48:I[783055,["/_next/static/immutable/chunks/0o7p8bf2k0x9-.js","/_next/static/immutable/chunks/2q9x8672lh6yb.js","/_next/static/immutable/chunks/1na_92bju72z5.js","/_next/static/immutable/chunks/449eiptxt0kis.js","/_next/static/immutable/chunks/3qcvv5r0pby6c.js","/_next/static/immutable/chunks/38v-7vq5kn_gy.js","/_next/static/immutable/chunks/26ejh_9vwn4nx.js","/_next/static/immutable/chunks/36x1hfo3di20z.js","/_next/static/immutable/chunks/3sf7iwjsg78m-.js","/_next/static/immutable/chunks/3_y759x_bw0qh.js","/_next/static/immutable/chunks/1ph7tm74x-nu0.js","/_next/static/immutable/chunks/3nn2p8o3s3td1.js","/_next/static/immutable/chunks/1e5e8q661sdra.js","/_next/static/immutable/chunks/0jjc5xrgo7woa.js","/_next/static/immutable/chunks/2135qg-3_qsft.js"],"ScrollArea"] 49:T814e,

"use client";

import * as stylex from "@stylexjs/stylex";
import { useId } from "react";
import { SettingsSection } from "@/components/blocks/settings-section";
import type { ProfileValues } from "@/components/blocks/settings-section";
import { Button } from "@/components/ui/button";
import * as Card from "@/components/ui/card";
import { Separator } from "@/components/ui/separator";
import { colors, spacing, typography } from "@/styles/shelf/tokens.stylex";
import { ConfirmDialog } from "@/components/patterns/confirm-dialog";

export type { ProfileValues };

export interface SettingsPageProps {
  profile: ProfileValues;
  /** Called with the values when the person saves valid changes. */
  onSaveProfile: (values: ProfileValues) => void;
  /** Runs after the person confirms. A thrown error is shown in the dialog. */
  onDeleteAccount: () => void | Promise<void>;
}

/**
 * A page of settings sections, each a heading and description beside its controls. It starts
 * with Profile and a danger zone. Add a section by placing another one between the
 * separators, and keep the danger zone last.
 */
export function SettingsPage({ profile, onSaveProfile, onDeleteAccount }: SettingsPageProps) {
  const dangerId = useId();

  return (
    <main {...stylex.props(styles.page)}>
      <header {...stylex.props(styles.header)}>
        <h1 {...stylex.props(styles.title)}>Settings</h1>
        <p {...stylex.props(styles.text)}>Manage your profile and your account.</p>
      </header>

      <SettingsSection defaultValues={profile} onSave={onSaveProfile} />

      <Separator />

      <section aria-labelledby={dangerId} {...stylex.props(styles.section)}>
        <div {...stylex.props(styles.intro)}>
          <h2 id={dangerId} {...stylex.props(styles.heading)}>
            Delete account
          </h2>
          <p {...stylex.props(styles.text)}>Remove your account and everything in it.</p>
        </div>
        <Card.Root style={styles.card}>
          <Card.Content>
            <p {...stylex.props(styles.text)}>
              Your projects, files, and history are deleted. You can't undo this.
            </p>
          </Card.Content>
          <Card.Footer style={styles.footer}>
            <ConfirmDialog
              title="Delete your account?"
              description="Your projects, files, and history are deleted for good."
              confirmLabel="Delete account"
              destructive
              onConfirm={onDeleteAccount}
            >
              <Button variant="destructive">Delete account</Button>
            </ConfirmDialog>
          </Card.Footer>
        </Card.Root>
      </section>
    </main>
  );
}

const styles = stylex.create({
  page: {
    padding: spacing["6"],
    gap: spacing["6"],
    marginInline: "auto",
    boxSizing: "border-box",
    display: "flex",
    flexDirection: "column",
    fontFamily: typography.fontFamily,
    maxWidth: "56rem",
    width: "100%",
  },
  header: {
    gap: spacing["1"],
    display: "flex",
    flexDirection: "column",
  },
  title: {
    margin: 0,
    color: colors.foreground,
    fontSize: typography.fontSizeLg,
    fontWeight: typography.fontWeightSemibold,
    lineHeight: typography.lineHeightLg,
  },
  section: {
    gap: spacing["6"],
    display: "flex",
    flexWrap: "wrap",
    width: "100%",
  },
  intro: {
    gap: spacing["1"],
    display: "flex",
    flexBasis: "14rem",
    flexDirection: "column",
    flexGrow: 1,
  },
  heading: {
    margin: 0,
    color: colors.foreground,
    fontSize: typography.fontSizeBase,
    fontWeight: typography.fontWeightSemibold,
    lineHeight: typography.lineHeightBase,
  },
  text: {
    margin: 0,
    color: colors.mutedForeground,
    fontSize: typography.fontSizeSm,
    lineHeight: typography.lineHeightSm,
  },
  card: {
    flexBasis: "20rem",
    flexGrow: 2,
    minWidth: 0,
  },
  footer: {
    justifyContent: "flex-end",
    borderTopColor: colors.border,
    borderTopStyle: "solid",
    borderTopWidth: 1,
    paddingTop: spacing["6"],
  },
});

45:["$","$L48",null,{"style":[{"kaIpWk":"x1njqcm9","$$css":true},{"kskxy":"xkch13f","$$css":true}],"children":["$","div",null,{"className":"xxhlesw x1in1o3d x1dcheo9 xnunrkz xh8ff3j x521ovy x1qivamn xeq4nuv xezivpi","dangerouslySetInnerHTML":{"__html":"$49"}}]}] 4a:Tda0a,

"use client";

import * as stylex from "@stylexjs/stylex";
import { useId, useState } from "react";
import { Badge, type BadgeVariant } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import * as Card from "@/components/ui/card";
import * as Empty from "@/components/ui/empty";
import * as Item from "@/components/ui/item";
import { colors, spacing, typography } from "@/styles/shelf/tokens.stylex";
import { ConfirmDialog } from "@/components/patterns/confirm-dialog";

export type ProjectStatus = "active" | "paused" | "archived";

export interface Project {
  id: string;
  name: string;
  owner: string;
  status: ProjectStatus;
  /** Already formatted for display, such as "3 days ago". */
  updated: string;
  description: string;
}

export interface ListDetailPageProps {
  projects: Project[];
  /** Runs after the person confirms. A thrown error is shown in the dialog. */
  onDelete: (id: string) => void | Promise<void>;
}

const STATUS_VARIANT: Record<ProjectStatus, BadgeVariant> = {
  active: "default",
  paused: "secondary",
  archived: "outline",
};

/**
 * A collection beside the selected record. The first project is selected until the person
 * picks another, and when the selected one disappears the first is selected again. Swap
 * `Project` for your own record and edit the fields in the detail.
 */
export function ListDetailPage({ projects, onDelete }: ListDetailPageProps) {
  const listId = useId();
  const detailId = useId();
  const [selectedId, setSelectedId] = useState<string | undefined>(undefined);
  const selected = projects.find((project) => project.id === selectedId) ?? projects[0];

  return (
    <main {...stylex.props(styles.page)}>
      <h1 {...stylex.props(styles.title)}>Projects</h1>

      {selected === undefined ? (
        <Empty.Root>
          <Empty.Header>
            <h2 {...stylex.props(styles.heading)}>No projects</h2>
            <Empty.Description>Projects you create appear here.</Empty.Description>
          </Empty.Header>
        </Empty.Root>
      ) : (
        <div {...stylex.props(styles.layout)}>
          <section aria-labelledby={listId} {...stylex.props(styles.list)}>
            <h2 id={listId} {...stylex.props(styles.heading)}>
              All projects ({projects.length})
            </h2>
            <nav aria-label="Projects">
              <Item.Group>
                {projects.map((project) => (
                  <Item.Root
                    key={project.id}
                    size="sm"
                    variant={project.id === selected.id ? "muted" : "default"}
                    render={
                      <button
                        type="button"
                        aria-current={project.id === selected.id ? "true" : undefined}
                        onClick={() => setSelectedId(project.id)}
                      />
                    }
                  >
                    <Item.Content>
                      <Item.Title>{project.name}</Item.Title>
                      <Item.Description>{project.owner}</Item.Description>
                    </Item.Content>
                    <Item.Actions>
                      <Badge variant={STATUS_VARIANT[project.status]}>{project.status}</Badge>
                    </Item.Actions>
                  </Item.Root>
                ))}
              </Item.Group>
            </nav>
          </section>

          <section aria-labelledby={detailId} {...stylex.props(styles.detail)}>
            <Card.Root>
              <Card.Header>
                <h2 id={detailId} {...stylex.props(styles.heading)}>
                  {selected.name}
                </h2>
                <Card.Description>{selected.description}</Card.Description>
              </Card.Header>
              <Card.Content>
                <dl {...stylex.props(styles.facts)}>
                  <dt {...stylex.props(styles.term)}>Owner</dt>
                  <dd {...stylex.props(styles.value)}>{selected.owner}</dd>
                  <dt {...stylex.props(styles.term)}>Status</dt>
                  <dd {...stylex.props(styles.value)}>{selected.status}</dd>
                  <dt {...stylex.props(styles.term)}>Updated</dt>
                  <dd {...stylex.props(styles.value)}>{selected.updated}</dd>
                </dl>
              </Card.Content>
              <Card.Footer style={styles.footer}>
                <ConfirmDialog
                  title={`Delete ${selected.name}?`}
                  description="Its files and history are deleted. You can't undo this."
                  confirmLabel="Delete project"
                  destructive
                  onConfirm={() => onDelete(selected.id)}
                >
                  <Button variant="outline">Delete project</Button>
                </ConfirmDialog>
              </Card.Footer>
            </Card.Root>
          </section>
        </div>
      )}
    </main>
  );
}

const styles = stylex.create({
  page: {
    padding: spacing["6"],
    gap: spacing["6"],
    marginInline: "auto",
    boxSizing: "border-box",
    display: "flex",
    flexDirection: "column",
    fontFamily: typography.fontFamily,
    maxWidth: "64rem",
    width: "100%",
  },
  title: {
    margin: 0,
    color: colors.foreground,
    fontSize: typography.fontSizeLg,
    fontWeight: typography.fontWeightSemibold,
    lineHeight: typography.lineHeightLg,
  },
  layout: {
    gap: spacing["6"],
    alignItems: "start",
    display: "flex",
    flexWrap: "wrap",
  },
  list: {
    gap: spacing["3"],
    display: "flex",
    flexBasis: "16rem",
    flexDirection: "column",
    flexGrow: 1,
    minWidth: 0,
  },
  detail: {
    flexBasis: "24rem",
    flexGrow: 2,
    minWidth: 0,
  },
  heading: {
    margin: 0,
    color: colors.foreground,
    fontSize: typography.fontSizeBase,
    fontWeight: typography.fontWeightSemibold,
    lineHeight: typography.lineHeightBase,
  },
  facts: {
    margin: 0,
    columnGap: spacing["6"],
    display: "grid",
    gridTemplateColumns: "max-content 1fr",
    rowGap: spacing["2"],
  },
  term: {
    color: colors.mutedForeground,
    fontSize: typography.fontSizeSm,
    lineHeight: typography.lineHeightSm,
  },
  value: {
    margin: 0,
    color: colors.foreground,
    fontSize: typography.fontSizeSm,
    lineHeight: typography.lineHeightSm,
  },
  footer: {
    justifyContent: "flex-end",
  },
});

47:["$","$L48",null,{"style":["$45:props:style:0","$45:props:style:1"],"children":["$","div",null,{"className":"xxhlesw x1in1o3d x1dcheo9 xnunrkz xh8ff3j x521ovy x1qivamn xeq4nuv xezivpi","dangerouslySetInnerHTML":{"__html":"$4a"}}]}]

Settings Page

List Detail Page