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,17 @@
+"use client";
+
+import { memo } from "react";
+import { ListView } from "./List.view";
+import type { ListProps } from "./List.types";
+
+/**
+ * Figma: "List Edit" list frame — S (21863:45631), M (21863:45493), L (21844:4405).
+ * Composes {@link ListEntry} rows with a shared list-level top rule when enabled.
+ */
+const ListContainer = memo<ListProps>((props) => {
+  return <ListView {...props} />;
+});
+
+ListContainer.displayName = "List";
+
+export default ListContainer;
@@ -0,0 +1,29 @@
+import type { IconName } from "../../asset/Icon";
+import type {
+  ListEntryVariant,
+  ListSize,
+} from "../ListEntry/ListEntry.types";
+
+export type ListItem = {
+  id: string;
+  title: string;
+  description: string;
+  href?: string;
+  onClick?: () => void;
+  /** Per-row icon; falls back to list-level {@link ListProps.leadingIcon}. */
+  leadingIcon?: IconName;
+  variant?: ListEntryVariant;
+  showDescription?: boolean;
+};
+
+export type ListProps = {
+  items: ListItem[];
+  size?: ListSize;
+  topDivider?: boolean;
+  leadingIcon?: IconName;
+  className?: string;
+};
+
+export type { ListEntryVariant, ListSize };
+
+export type ListViewProps = ListProps;
@@ -0,0 +1,47 @@
+"use client";
+
+import { memo } from "react";
+import Divider from "../../utility/Divider";
+import ListEntry from "../ListEntry";
+import { FIGMA_LIST_ROOT } from "../listSizeLayout";
+import type { ListViewProps } from "./List.types";
+
+export const ListView = memo(function ListView({
+  items,
+  size = "m",
+  topDivider = true,
+  leadingIcon = "edit",
+  className = "",
+}: ListViewProps) {
+  return (
+    <div
+      className={`flex w-full max-w-[1590px] flex-col items-start ${className}`}
+      data-figma-node={FIGMA_LIST_ROOT[size]}
+    >
+      {topDivider ? <Divider type="content" orientation="horizontal" /> : null}
+      <ul className="m-0 flex w-full list-none flex-col items-start p-0">
+        {items.map((item) => (
+          <li
+            key={item.id}
+            className="flex w-full flex-col items-stretch [list-style:none]"
+          >
+            <ListEntry
+              title={item.title}
+              description={item.description}
+              showDescription={item.showDescription}
+              href={item.href}
+              onClick={item.onClick}
+              size={size}
+              leadingIcon={item.leadingIcon ?? leadingIcon}
+              variant={item.variant}
+              topDivider={false}
+              bottomDivider
+            />
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+});
+
+ListView.displayName = "ListView";
@@ -0,0 +1,3 @@
+export { default } from "./List.container";
+export type { ListProps, ListItem, ListSize, ListViewProps } from "./List.types";
+export { LIST_SIZE_OPTIONS } from "../ListEntry/ListEntry.types";