wip: settings screen

src/app/settings/components/profileCard.tsx

@@ -0,0 +1,68 @@
+import * as Avatar from '@radix-ui/react-avatar';
+import { minidenticon } from 'minidenticons';
+import { Link } from 'react-router-dom';
+
+import { useStorage } from '@libs/storage/provider';
+
+import { EditIcon, LoaderIcon } from '@shared/icons';
+
+import { useProfile } from '@utils/hooks/useProfile';
+import { displayNpub } from '@utils/shortenKey';
+
+export function ProfileCard() {
+  const { db } = useStorage();
+  const { status, user } = useProfile(db.account.pubkey);
+
+  const svgURI =
+    'data:image/svg+xml;utf8,' +
+    encodeURIComponent(minidenticon(db.account.pubkey, 90, 50));
+
+  return (
+    <div className="mb-4 h-56 w-full rounded-2xl bg-neutral-100 transition-all duration-150 ease-smooth hover:scale-105 dark:bg-neutral-900">
+      {status === 'pending' ? (
+        <div className="flex h-full w-full items-center justify-center">
+          <LoaderIcon className="h-4 w-4 animate-spin" />
+        </div>
+      ) : (
+        <div className="flex h-full w-full flex-col justify-between p-4">
+          <div className="flex h-10 w-full justify-end">
+            <Link
+              to="/settings/edit-profile"
+              className="inline-flex h-8 w-20 items-center justify-center gap-1.5 rounded-full bg-neutral-200 text-sm font-medium hover:bg-neutral-400 dark:bg-neutral-800 dark:hover:bg-neutral-600"
+            >
+              <EditIcon className="h-4 w-4" />
+              Edit
+            </Link>
+          </div>
+          <div className="flex flex-col gap-2.5">
+            <Avatar.Root className="shrink-0">
+              <Avatar.Image
+                src={user?.picture || user?.image}
+                alt={db.account.pubkey}
+                loading="lazy"
+                decoding="async"
+                style={{ contentVisibility: 'auto' }}
+                className="h-16 w-16 rounded-xl border border-neutral-200/50 shadow-[rgba(17,_17,_26,_0.1)_0px_0px_16px] dark:border-neutral-800/50"
+              />
+              <Avatar.Fallback delayMs={300}>
+                <img
+                  src={svgURI}
+                  alt={db.account.pubkey}
+                  className="h-16 w-16 rounded-xl bg-black dark:bg-white"
+                />
+              </Avatar.Fallback>
+            </Avatar.Root>
+            <div>
+              <h3 className="text-3xl font-semibold leading-8 text-neutral-900 dark:text-neutral-100">
+                {user?.display_name || user?.name}
+              </h3>
+              <p className="text-lg text-neutral-700 dark:text-neutral-300">
+                {user.nip05 || displayNpub(db.account.pubkey, 16)}
+              </p>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}