Format Anatomy Tabs

npx shadcn add "https://ui.beste.co/r/feature271?email=YOUR_EMAIL&license_key=YOUR_KEY"

npx shadcn add "https://ui.beste.co/r-base/feature271?email=YOUR_EMAIL&license_key=YOUR_KEY"

import { Feature271, feature271Demo } from "@/components/beste/block/feature271";

export default function AboutPage() {
  return <Feature271 {...feature271Demo} />;
}

import { Feature271 } from "@/components/beste/block/feature271";

export default function AboutPage() {
  return (
    <Feature271
      eyebrow="Everything we publish"
      heading="Four formats, and how each one is made"
      description="Pick a format to see what it commits us to."
      exampleLabel="A recent one"
      formats={[
        {
          name: "Essays",
          summary: "One argument, written until it holds.",
          specs: [
            { label: "Length", value: "1,500 to 3,000 words" },
            { label: "Cadence", value: "When it is finished" },
          ],
          example: {
            image: { src: "/covers/042.jpg", alt: "A printed estimate" },
            meta: "Essay · 18 March",
            title: "The quote we lost on purpose",
            href: "/letters/042",
          },
        },
        {
          name: "Talks",
          summary: "Recorded sessions in one take, published the same week.",
          specs: [{ label: "Edited", value: "Not at all" }],
          example: {
            image: { src: "/covers/talk.jpg", alt: "A team at a whiteboard" },
            meta: "Talk · 26 March",
            title: "Reading a brief out loud",
            href: "/talks/briefs",
          },
        },
      ]}
    />
  );
}

type Format = {
  name: string;
  summary: string;
  specs: SpecRow[];
  example: Example;
};

type SpecRow = {
  label: string;
  value: string;
};

type Example = {
  image: { src: string; alt: string };
  meta: string;
  title: string;
  href: string;
};