feat(ark): add user component

This commit is contained in:
2024-01-13 08:21:49 +07:00
parent 0487b8a801
commit 1822eac488
18 changed files with 324 additions and 317 deletions

View File

@@ -1,7 +1,9 @@
import { RepostIcon } from "@lume/icons";
import { NDKEvent, NostrEvent } from "@nostr-dev-kit/ndk";
import { useQuery } from "@tanstack/react-query";
import { Note } from "..";
import { useArk } from "../../../hooks/useArk";
import { User } from "../../user";
export function RepostNote({
event,
@@ -39,9 +41,20 @@ export function RepostNote({
if (isError || !repostEvent) {
return (
<Note.Root className={className}>
<Note.Provider event={event}>
<Note.User variant="repost" className="h-14" />
</Note.Provider>
<User.Provider pubkey={event.pubkey}>
<User.Root className="flex gap-2 px-3 h-14">
<div className="inline-flex shrink-0 w-10 items-center justify-center">
<RepostIcon className="h-5 w-5 text-blue-500" />
</div>
<div className="inline-flex items-center gap-2">
<User.Avatar className="size-6 shrink-0 rounded object-cover" />
<div className="inline-flex items-baseline gap-1">
<User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
<span className="text-blue-500">reposted</span>
</div>
</div>
</User.Root>
</User.Provider>
<div className="px-3 mb-3 select-text">
<div className="flex flex-col items-start justify-start px-3 py-3 bg-red-100 rounded-lg dark:bg-red-900">
<p className="text-red-500">Failed to get event</p>
@@ -57,9 +70,20 @@ export function RepostNote({
return (
<Note.Root className={className}>
<Note.Provider event={event}>
<Note.User variant="repost" className="h-14" />
</Note.Provider>
<User.Provider pubkey={event.pubkey}>
<User.Root className="flex gap-2 px-3 h-14">
<div className="inline-flex shrink-0 w-10 items-center justify-center">
<RepostIcon className="h-5 w-5 text-blue-500" />
</div>
<div className="inline-flex items-center gap-2">
<User.Avatar className="size-6 shrink-0 rounded object-cover" />
<div className="inline-flex items-baseline gap-1">
<User.Name className="font-medium text-neutral-900 dark:text-neutral-100" />
<span className="text-blue-500">reposted</span>
</div>
</div>
</User.Root>
</User.Provider>
<Note.Provider event={repostEvent}>
<div className="relative flex flex-col gap-2 px-3">
<div className="flex items-center justify-between">