Launcher grid

TS

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

App grid

TSX

import { AppGrid } from "@fungi.computer/caps/blocks/launcher-grid";

const items = [
  {
    id: "forage",
    label: "Forage",
    icon: <span>🍄</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
  {
    id: "dry",
    label: "Dry",
    icon: <span>🌬️</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
  {
    id: "market",
    label: "Market",
    icon: <span>🛒</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
  {
    id: "lab",
    label: "Lab",
    icon: <span>🧪</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
];

export default function AppGridHero() {
  return <AppGrid items={items} />;
}

App grid states

TSX

import { AppGrid } from "@fungi.computer/caps/blocks/launcher-grid";

const items = [
  {
    id: "forage",
    label: "Forage",
    icon: <span>🍄</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
    status: <span className="text-xs text-success">Active</span>,
  },
  {
    id: "compost",
    label: "Compost",
    icon: <span>🪴</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
    muted: true,
  },
  {
    id: "market",
    label: "Market",
    icon: <span>🛒</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
    disabled: true,
  },
];

export default function AppGridStates() {
  return <AppGrid size="lg" items={items} />;
}

Section grid

TSX

import { SectionGrid } from "@fungi.computer/caps/blocks/launcher-grid";
import { SectionCard } from "@fungi.computer/caps/blocks/section-card";

export default function SectionGridHero() {
  return (
    <SectionGrid className="w-full max-w-md">
      <SectionCard heading="Today's pick">3.2 kg logged.</SectionCard>
      <SectionCard heading="Drying now">2 batches.</SectionCard>
    </SectionGrid>
  );
}

Props

SectionGridProps

Prop	Type	Description
layout?	"split" | "desktop"	split is a page's two-column section grid. desktop composes a home screen: it fills and scrolls its region, centers a bounded measure, and lets span="full" sections run across both columns.

• layout?"split" | "desktop"

  split is a page's two-column section grid. desktop composes a home screen: it fills and scrolls its region, centers a bounded measure, and lets span="full" sections run across both columns.

AppGridProps

Prop	Type	Description
items	readonly AppGridItem[]
size?	"default" | "lg"	default is a quiet launcher. lg gives each mark a larger key and a more spacious label. The theme supplies its material.

• itemsreadonly AppGridItem[]
• size?"default" | "lg"

  default is a quiet launcher. lg gives each mark a larger key and a more spacious label. The theme supplies its material.

Full types: API reference.