ui: Redesign the settings page and move it to its own layout

1 files changed, 33 insertions, 0 deletions

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>
+  );
+}