Currently

1/**
2 * Narrow “now” list — edit CONTENT after install.
3 */
4 
5const CONTENT = {
6  stamp: "Currently",
7  updatedLabel: "Updated recently",
8  items: [
9    {
10      label: "Focus",
11      value: "Shipping the personal site kit",
12      swatch: "var(--color-brand, #0b7bff)",
13    },
14    {
15      label: "Build",
16      value: "React / Next.js components for indie sites",
17    },
18    {
19      label: "Read",
20      value: "Something worth finishing",
21    },
22  ],
23}
24 
25export function Currently({
26  stamp = CONTENT.stamp,
27  updatedLabel = CONTENT.updatedLabel,
28  items = CONTENT.items,
29  className,
30}: {
31  stamp?: string
32  updatedLabel?: string
33  items?: Array<{ label: string; value: string; swatch?: string }>
34  className?: string
35} = {}) {
36  return (
37    <section className={className ?? "mx-auto max-w-[640px]"}>
38      <div className="mb-3 flex items-baseline justify-between">
39        <h2 className="font-mono text-[10.5px] tracking-[0.12em] text-muted-foreground uppercase">
40          {stamp}
41        </h2>
42        <span className="font-mono text-[11px] text-muted-foreground">
43          {updatedLabel}
44        </span>
45      </div>
46 
47      <ul className="divide-y divide-border-subtle border-y border-border-subtle">
48        {items.map((item) => (
49          <li
50            key={item.label}
51            className="flex items-start gap-3 py-[11px] text-[14.5px]"
52          >
53            {item.swatch ? (
54              <span
55                aria-hidden
56                className="mt-[9px] h-[6px] w-[6px] shrink-0 rounded-[1px]"
57                style={{ background: item.swatch }}
58              />
59            ) : (
60              <span
61                aria-hidden
62                className="mt-[9px] h-[6px] w-[6px] shrink-0"
63              />
64            )}
65            <span className="w-[76px] shrink-0 pt-[3px] font-mono text-[10.5px] tracking-[0.1em] text-muted-foreground uppercase">
66              {item.label}
67            </span>
68            <span className="flex-1 leading-[1.55] text-foreground">
69              {item.value}
70            </span>
71          </li>
72        ))}
73      </ul>
74    </section>
75  )
76}