Listing detail

TS

import { … } from "@fungi.computer/caps/blocks/listing-detail";

Hero

TSX

import { ListingDetail } from "@fungi.computer/caps/blocks/listing-detail";
import { Button } from "@fungi.computer/caps/components/button";

export default function Hero() {
  return (
    <div className="w-full max-w-2xl">
      <ListingDetail
        identity="lions-mane"
        icon={<span className="text-2xl">🍄</span>}
        title="Lion's Mane Grow Kit"
        tagline="Ready to fruit in 10 days"
        seller="Sold by Spora Farms"
        action={<Button size="sm">Add to cart</Button>}
        description={[
          "A block of fully colonized substrate, ready for its first flush.",
        ]}
        facts={[
          { label: "Yield", value: "1-2 lb" },
          { label: "Cycles", value: "3-4" },
        ]}
      />
    </div>
  );
}

Minimal

TSX

import { ListingDetail } from "@fungi.computer/caps/blocks/listing-detail";
import { Button } from "@fungi.computer/caps/components/button";

export default function Minimal() {
  return (
    <div className="w-full max-w-md">
      <ListingDetail
        identity="oyster"
        title="Oyster Spawn Jar"
        tagline="Back in stock next week"
        note="Pre-orders ship in arrival order."
        action={
          <Button size="sm" disabled>
            Sold out
          </Button>
        }
      />
    </div>
  );
}