highperfocused/lume
1
0
Fork 0
mirror of https://github.com/lumehq/lume.git synced 2025-09-29 09:33:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: add hover card to user

Browse Source
This commit is contained in:
reya
2024-01-30 14:45:46 +07:00
parent 1fa1872ca6
commit 46ed3330fc
1 changed files with 43 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/ark/src/components/note/user.tsx
View File

@@ -1,4 +1,6 @@
import { cn } from "@lume/utils"; import { cn } from "@lume/utils";
import * as HoverCard from "@radix-ui/react-hover-card";
import { Link } from "react-router-dom";
import { User } from "../user"; import { User } from "../user";
import { useNoteContext } from "./provider"; import { useNoteContext } from "./provider";
@@ -11,16 +13,47 @@ export function NoteUser({
return ( return (
<User.Provider pubkey={event.pubkey}> <User.Provider pubkey={event.pubkey}>
<User.Root className={cn("flex items-center gap-3", className)}> <HoverCard.Root>
<User.Avatar className="size-9 shrink-0 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" /> <User.Root className={cn("flex items-center gap-3", className)}>
<div className="flex h-6 flex-1 items-start justify-between gap-2"> <HoverCard.Trigger>
<User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" /> <User.Avatar className="size-9 shrink-0 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
<User.Time </HoverCard.Trigger>
time={event.created_at} <div className="flex h-6 flex-1 items-start justify-between gap-2">
className="text-neutral-500 dark:text-neutral-400" <User.Name className="font-semibold text-neutral-950 dark:text-neutral-50" />
/> <User.Time
</div> time={event.created_at}
</User.Root> className="text-neutral-500 dark:text-neutral-400"
/>
</div>
</User.Root>
<HoverCard.Portal>
<HoverCard.Content
className="data-[side=bottom]:animate-slideUpAndFade w-[300px] shadow-lg shadow-neutral-500/20 rounded-xl bg-white dark:shadow-none dark:bg-neutral-900 dark:border dark:border-neutral-800 p-5 data-[state=open]:transition-all"
sideOffset={5}
>
<div className="flex flex-col gap-2">
<User.Avatar className="size-11 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50" />
<div className="flex flex-col gap-2">
<div>
<User.Name className="font-semibold leading-tight" />
<User.NIP05
pubkey={event.pubkey}
className="text-neutral-600 dark:text-neutral-400"
/>
</div>
<User.About className="line-clamp-3" />
<Link
to={`/users/${event.pubkey}`}
className="mt-3 w-full h-8 text-sm font-medium bg-neutral-100 dark:bg-neutral-900 hover:bg-neutral-200 dark:hover:bg-neutral-800 rounded-lg inline-flex items-center justify-center"
>
View profile
</Link>
</div>
</div>
<HoverCard.Arrow className="fill-white dark:fill-neutral-800" />
</HoverCard.Content>
</HoverCard.Portal>
</HoverCard.Root>
</User.Provider> </User.Provider>
); );
} }