Minimal Guide Cards

import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"

import { Heading } from "@/components/editorial/heading"
import {
  Section,
  SectionContent,
  SectionDescription,
  SectionHeader,
  SectionTitleGroup,
} from "@/components/editorial/section"
import { buttonVariants } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Guides",
  body: "Short, practical reads on planning and shipping with a small team.",
  read: "Read the guide",
} as const

const GUIDES = [
  {
    kind: "Guide · 6 min",
    title: "Write a plan people read",
    body: "Owners, dates and one sentence of why: the three things every line needs.",
    href: "#",
  },
  {
    kind: "Guide · 8 min",
    title: "Run a ten-minute standup",
    body: "Let the digest carry the news so the meeting only handles what is blocked.",
    href: "#",
  },
  {
    kind: "Guide · 5 min",
    title: "Hand off without a meeting",
    body: "What goes in the handoff note, and what the next person should never have to ask.",
    href: "#",
  },
] as const

export default function MinimalResources01() {
  return (
    <Section>
      <SectionHeader>
        <SectionTitleGroup>
          <Heading>{COPY.title}</Heading>
        </SectionTitleGroup>
        <SectionDescription>{COPY.body}</SectionDescription>
      </SectionHeader>
      <SectionContent>
        <ul
          role="list"
          className="grid grid-cols-1 gap-4 @5xl/section:grid-cols-3"
        >
          {GUIDES.map((guide) => (
            <li key={guide.title} className="flex">
              <Card className="w-full">
                <CardHeader className="gap-2">
                  <p className="text-sm text-muted-foreground">{guide.kind}</p>
                  <CardTitle role="heading" aria-level={3}>
                    {guide.title}
                  </CardTitle>
                </CardHeader>
                <CardContent className="flex-1">
                  <CardDescription>{guide.body}</CardDescription>
                </CardContent>
                <CardFooter>
                  <a
                    href={guide.href}
                    data-slot="button"
                    className={cn(
                      buttonVariants({ variant: "link" }),
                      "h-auto p-0 font-semibold"
                    )}
                  >
                    {COPY.read}
                    <span className="sr-only">: {guide.title}</span>
                    <ArrowRightIcon data-icon="inline-end" aria-hidden="true" />
                  </a>
                </CardFooter>
              </Card>
            </li>
          ))}
        </ul>
      </SectionContent>
    </Section>
  )
}

pnpm dlx shadcn add @01orbital/minimal-resources-01

npx shadcn add @01orbital/minimal-resources-01

yarn shadcn add @01orbital/minimal-resources-01

bunx --bun shadcn add @01orbital/minimal-resources-01