From eb7da996a7c2d617d276f296cac07a6fd5648664 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Sun, 27 Oct 2024 12:03:14 +0000
Subject: ui: Redesign the settings page and move it to its own layout

---
 apps/web/components/settings/UserDetails.tsx | 33 ++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 apps/web/components/settings/UserDetails.tsx

(limited to 'apps/web/components/settings/UserDetails.tsx')

diff --git a/apps/web/components/settings/UserDetails.tsx b/apps/web/components/settings/UserDetails.tsx
new file mode 100644
index 00000000..471a6e09
--- /dev/null
+++ b/apps/web/components/settings/UserDetails.tsx
@@ -0,0 +1,33 @@
+import { Input } from "@/components/ui/input";
+import { api } from "@/server/api/client";
+
+export default async function UserDetails() {
+  const whoami = await api.users.whoami();
+
+  const details = [
+    {
+      label: "Name",
+      value: whoami.name ?? undefined,
+    },
+    {
+      label: "Email",
+      value: whoami.email ?? undefined,
+    },
+  ];
+
+  return (
+    <div className="mb-8 flex w-full flex-col sm:flex-row">
+      <div className="mb-4 w-full text-lg font-medium sm:w-1/3">
+        Basic Details
+      </div>
+      <div className="w-full">
+        {details.map(({ label, value }) => (
+          <div className="mb-2" key={label}>
+            <div className="mb-2 text-sm font-medium">{label}</div>
+            <Input value={value} disabled />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
-- 
cgit v1.2.3-70-g09d2