Project List

1import Link from "next/link"
2import { ArrowUpRight } from "lucide-react"
3 
4/** Edit titles, descriptions, and links after install. */
5const CONTENT = {
6  stamp: "Projects",
7  viewAllHref: "/projects",
8  viewAllLabel: "view all →",
9}
10 
11const PROJECTS = [
12  {
13    title: "Personal site kit",
14    description: "Narrow chrome, command menu, and indie home sections.",
15    href: "https://www.atroui.com",
16    tags: ["Next.js", "Registry"],
17  },
18  {
19    title: "Studio tools",
20    description: "OG images, scope chat, and host-bound demos.",
21    href: "https://www.atroui.com/docs",
22    tags: ["Tools", "Docs"],
23  },
24  {
25    title: "Open source UI",
26    description: "Dark-first React components you own in your repo.",
27    href: "https://github.com/atroui/atroui",
28    tags: ["OSS", "React"],
29  },
30]
31 
32export function ProjectList({
33  stamp = CONTENT.stamp,
34  viewAllHref = CONTENT.viewAllHref,
35  viewAllLabel = CONTENT.viewAllLabel,
36  projects = PROJECTS,
37  limit = 4,
38  className,
39}: {
40  stamp?: string
41  viewAllHref?: string
42  viewAllLabel?: string
43  projects?: Array<{
44    title: string
45    description: string
46    href: string
47    tags?: string[]
48  }>
49  limit?: number
50  className?: string
51} = {}) {
52  const shown = projects.slice(0, limit)
53  if (shown.length === 0) return null
54 
55  return (
56    <section
57      id="projects"
58      className={className ?? "mx-auto max-w-[640px] scroll-mt-20"}
59    >
60      <div className="mb-3 flex items-baseline justify-between">
61        <h2 className="font-mono text-[10.5px] tracking-[0.12em] text-muted-foreground uppercase">
62          {stamp}
63        </h2>
64        {projects.length > limit ? (
65          <Link
66            href={viewAllHref}
67            className="font-mono text-[11px] text-muted-foreground hover:text-foreground"
68          >
69            {viewAllLabel}
70          </Link>
71        ) : null}
72      </div>
73      <ul className="divide-y divide-border-subtle border-y border-border-subtle">
74        {shown.map((p) => {
75          const external = /^https?:\/\//.test(p.href)
76          const body = (
77            <>
78              <div className="min-w-0 flex-1">
79                <div className="flex items-center gap-1 text-[14.5px] font-medium text-foreground">
80                  <span>{p.title}</span>
81                  <ArrowUpRight
82// … truncated