Profile page UI and functionality implemented

2026-04-25 17:57:58 -06:00
parent 7dd2562bae
commit 68517796a9
103 changed files with 4439 additions and 1476 deletions
@@ -0,0 +1,97 @@
+import List from "../../app/components/layout/List";
+
+const fiveItems = [
+  {
+    id: "1",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+  {
+    id: "2",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+  {
+    id: "3",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+  {
+    id: "4",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+  {
+    id: "5",
+    title: "Item",
+    description: "Description/text only option here.",
+    href: "#",
+  },
+];
+
+export default {
+  title: "Components/Layout/List",
+  component: List,
+  parameters: {
+    layout: "fullscreen",
+    backgrounds: { default: "dark" },
+    docs: {
+      description: {
+        component:
+          "Figma list frames: S (21863:45631), M (21863:45493), L (21844:4405). Built from ListEntry (21844:4118).",
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="min-h-[480px] bg-[var(--color-surface-default-primary)] p-6">
+        <div className="mx-auto max-w-[1044px]">
+          <Story />
+        </div>
+      </div>
+    ),
+  ],
+  argTypes: {
+    size: { control: { type: "select" }, options: ["s", "m", "l"] },
+    topDivider: { control: { type: "boolean" } },
+    leadingIcon: {
+      control: { type: "select" },
+      options: ["edit", "mail", "warning"],
+    },
+  },
+  tags: ["autodocs"],
+};
+
+export const Default = {
+  args: {
+    items: fiveItems,
+    size: "m",
+    topDivider: true,
+    leadingIcon: "edit",
+  },
+};
+
+export const NoTopDivider = {
+  args: {
+    ...Default.args,
+    topDivider: false,
+  },
+};
+
+export const Small = {
+  args: {
+    ...Default.args,
+    size: "s",
+  },
+};
+
+export const Large = {
+  args: {
+    ...Default.args,
+    size: "l",
+  },
+};