Card grid

TS

import { … } from "@fungi.computer/caps/blocks/card-grid";

Shelf

TSX

import { CardGrid } from "@fungi.computer/caps/blocks/card-grid";
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
} from "@fungi.computer/caps/components/card";

const mushrooms = [
  { name: "Lion's Mane", note: "Shaggy, great sautéed." },
  { name: "Chanterelle", note: "Golden, apricot scent." },
  { name: "Oyster", note: "Fast grower, mild flavor." },
];

export default function Shelf() {
  return (
    <CardGrid
      shelf={{ title: "Today's harvest", description: "Picked this morning." }}
    >
      {mushrooms.map((mushroom) => (
        <Card key={mushroom.name} variant="outline">
          <CardHeader>
            <CardTitle>{mushroom.name}</CardTitle>
            <CardDescription>{mushroom.note}</CardDescription>
          </CardHeader>
        </Card>
      ))}
    </CardGrid>
  );
}

Min width

TSX

import { CardGrid } from "@fungi.computer/caps/blocks/card-grid";
import {
  Card,
  CardHeader,
  CardTitle,
} from "@fungi.computer/caps/components/card";

export default function MinWidth() {
  return (
    <div className="flex flex-col gap-sm">
      <CardGrid minColumnWidth="narrow">
        {["Cap", "Gill", "Stem"].map((part) => (
          <Card key={part} variant="outline">
            <CardHeader>
              <CardTitle>{part}</CardTitle>
            </CardHeader>
          </Card>
        ))}
      </CardGrid>
      <CardGrid minColumnWidth="wide">
        {["Mycelium network"].map((part) => (
          <Card key={part} variant="outline">
            <CardHeader>
              <CardTitle>{part}</CardTitle>
            </CardHeader>
          </Card>
        ))}
      </CardGrid>
    </div>
  );
}