feat(ark): add note component to ark

2023-12-19 08:06:10 +07:00
parent 55298515af
commit ec2ac2dce3
19 changed files with 898 additions and 85 deletions
@@ -0,0 +1,143 @@
+import * as Avatar from '@radix-ui/react-avatar';
+import { useQuery } from '@tanstack/react-query';
+import { minidenticon } from 'minidenticons';
+import { useMemo } from 'react';
+import { useArk } from '@libs/ark';
+import { RepostIcon } from '@shared/icons';
+import { displayNpub, formatCreatedAt } from '@utils/formater';
+
+export function NoteUser({
+  pubkey,
+  time,
+  variant = 'text',
+}: {
+  pubkey: string;
+  time: number;
+  variant?: 'text' | 'repost';
+}) {
+  const ark = useArk();
+  const createdAt = useMemo(() => formatCreatedAt(time), [time]);
+  const fallbackName = useMemo(() => displayNpub(pubkey, 16), [pubkey]);
+  const fallbackAvatar = useMemo(
+    () => 'data:image/svg+xml;utf8,' + encodeURIComponent(minidenticon(pubkey, 90, 50)),
+    [pubkey]
+  );
+
+  const { isLoading, data: user } = useQuery({
+    queryKey: ['user', pubkey],
+    queryFn: async () => {
+      try {
+        const profile = await ark.getUserProfile({ pubkey });
+
+        if (!profile)
+          throw new Error(
+            `Cannot get metadata for ${pubkey}, will be retry after 10 seconds`
+          );
+
+        return profile;
+      } catch (e) {
+        throw new Error(e);
+      }
+    },
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+    retry: 2,
+  });
+
+  if (variant === 'repost') {
+    if (isLoading) {
+      return (
+        <div className="flex gap-3">
+          <div className="inline-flex w-10 items-center justify-center">
+            <RepostIcon className="h-5 w-5 text-blue-500" />
+          </div>
+          <div className="inline-flex items-center gap-2">
+            <div className="h-6 w-6 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+            <div className="h-4 w-24 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex gap-2">
+        <div className="inline-flex w-10 items-center justify-center">
+          <RepostIcon className="h-5 w-5 text-blue-500" />
+        </div>
+        <div className="inline-flex items-center gap-2">
+          <Avatar.Root className="shrink-0">
+            <Avatar.Image
+              src={user?.picture || user?.image}
+              alt={pubkey}
+              loading="lazy"
+              decoding="async"
+              className="h-6 w-6 rounded object-cover"
+            />
+            <Avatar.Fallback delayMs={300}>
+              <img
+                src={fallbackAvatar}
+                alt={pubkey}
+                className="h-6 w-6 rounded bg-black dark:bg-white"
+              />
+            </Avatar.Fallback>
+          </Avatar.Root>
+          <div className="inline-flex items-baseline gap-1">
+            <h5 className="max-w-[10rem] truncate font-medium text-neutral-900 dark:text-neutral-100/80">
+              {user?.name || user?.display_name || user?.displayName || fallbackName}
+            </h5>
+            <span className="text-blue-500">reposted</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-3">
+        <Avatar.Root className="h-9 w-9 shrink-0">
+          <Avatar.Image
+            src={fallbackAvatar}
+            alt={pubkey}
+            className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
+          />
+        </Avatar.Root>
+        <div className="h-6 flex-1">
+          <div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
+            {fallbackName}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      <Avatar.Root className="h-9 w-9 shrink-0">
+        <Avatar.Image
+          src={user?.picture || user?.image}
+          alt={pubkey}
+          loading="lazy"
+          decoding="async"
+          className="h-9 w-9 rounded-lg bg-white object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
+        />
+        <Avatar.Fallback delayMs={300}>
+          <img
+            src={fallbackAvatar}
+            alt={pubkey}
+            className="h-9 w-9 rounded-lg bg-black ring-1 ring-neutral-200/50 dark:bg-white dark:ring-neutral-800/50"
+          />
+        </Avatar.Fallback>
+      </Avatar.Root>
+      <div className="flex h-6 flex-1 items-start gap-2">
+        <div className="max-w-[15rem] truncate font-semibold text-neutral-950 dark:text-neutral-50">
+          {user?.name || user?.display_name || user?.displayName || fallbackName}
+        </div>
+        <div className="ml-auto inline-flex items-center gap-3">
+          <div className="text-neutral-500 dark:text-neutral-400">{createdAt}</div>
+        </div>
+      </div>
+    </div>
+  );
+}