Resources

1"use client"
2 
3import Link from "next/link"
4import { useMemo, useState } from "react"
5 
6/** Edit CONTENT.items for your resource library. */
7const CONTENT = {
8  title: "Resources",
9  blurb: "Guides and downloads for shipping faster.",
10  items: [
11    {
12      id: "r1",
13      title: "7-day MVP checklist",
14      description: "Scope, stack, and daily cadence for a fixed sprint.",
15      href: "/resources/mvp-checklist",
16      kind: "Guide",
17    },
18    {
19      id: "r2",
20      title: "OG card brief",
21      description: "Title, subtitle, and safe-zone rules for social images.",
22      href: "/resources/og-brief",
23      kind: "PDF",
24    },
25  ],
26}
27 
28export function ResourcesContent() {
29  const [q, setQ] = useState("")
30  const items = useMemo(() => {
31    const needle = q.trim().toLowerCase()
32    if (!needle) return CONTENT.items
33    return CONTENT.items.filter(
34      (p) =>
35        p.title.toLowerCase().includes(needle) ||
36        p.description.toLowerCase().includes(needle)
37    )
38  }, [q])
39 
40  return (
41    <div className="space-y-8">
42      <header>
43        <p className="ms-stamp">{CONTENT.title}</p>
44        <p className="mt-2 text-sm text-muted-foreground">{CONTENT.blurb}</p>
45        <input
46          value={q}
47          onChange={(e) => setQ(e.target.value)}
48          placeholder="Search resources…"
49          className="mt-4 w-full max-w-md rounded-lg border border-border-subtle bg-background px-4 py-2 text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring"
50        />
51      </header>
52      <ul className="grid gap-3 sm:grid-cols-2">
53        {items.map((item) => (
54          <li key={item.id}>
55            <Link
56              href={item.href}
57              className="block rounded-2xl border border-border-subtle bg-card/40 p-5 transition-colors hover:bg-white/[0.04]"
58            >
59              <p className="text-[11px] font-semibold uppercase tracking-[0.08em] text-muted-foreground">
60                {item.kind}
61              </p>
62              <h3 className="mt-2 text-base font-medium text-foreground">
63                {item.title}
64              </h3>
65              <p className="mt-1 text-sm text-muted-foreground">
66                {item.description}
67              </p>
68            </Link>
69          </li>
70        ))}
71      </ul>
72    </div>
73  )
74}