Stack List

1const CONTENT = {
2  stamp: "Stack",
3}
4 
5const SECTIONS = [
6  {
7    title: "Everyday",
8    entries: [
9      { label: "Editor", value: "Cursor / VS Code" },
10      { label: "Runtime", value: "Node · pnpm · Next.js" },
11      { label: "UI", value: "React · Tailwind · AtroUI" },
12    ],
13  },
14  {
15    title: "Ship",
16    entries: [
17      { label: "Hosting", value: "Vercel" },
18      { label: "Repo", value: "GitHub" },
19      { label: "Design", value: "Figma" },
20    ],
21  },
22]
23 
24export function StackList({
25  stamp = CONTENT.stamp,
26  sections = SECTIONS,
27  className,
28}: {
29  stamp?: string
30  sections?: Array<{
31    title: string
32    entries: Array<{ label: string; value: string }>
33  }>
34  className?: string
35} = {}) {
36  return (
37    <div className={className ?? "mx-auto max-w-[640px] space-y-12"}>
38      {stamp ? (
39        <h2 className="font-mono text-[10.5px] tracking-[0.12em] text-muted-foreground uppercase">
40          {stamp}
41        </h2>
42      ) : null}
43      {sections.map((section) => (
44        <section key={section.title}>
45          <h3 className="mb-4 font-mono text-[10.5px] tracking-[0.12em] text-muted-foreground uppercase">
46            {section.title}
47          </h3>
48          <dl className="divide-y divide-border-subtle border-y border-border-subtle">
49            {section.entries.map((e) => (
50              <div
51                key={e.label}
52                className="grid grid-cols-[96px_1fr] gap-4 py-3 sm:grid-cols-[140px_1fr]"
53              >
54                <dt className="pt-[4px] font-mono text-[10.5px] tracking-[0.1em] text-muted-foreground uppercase">
55                  {e.label}
56                </dt>
57                <dd className="text-[14.5px] leading-[1.55] text-foreground">
58                  {e.value}
59                </dd>
60              </div>
61            ))}
62          </dl>
63        </section>
64      ))}
65    </div>
66  )
67}