App bar

TS

import { … } from "@fungi.computer/caps/blocks/app-bar";

Speed dial

TSX

import { AppBar, type AppBarItem } from "@fungi.computer/caps/blocks/app-bar";

const windows: AppBarItem[] = [
  {
    id: "terminal",
    label: "Terminal",
    icon: <span>⌨️</span>,
    active: true,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
  {
    id: "library",
    label: "Library",
    icon: <span>📚</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
];

const launchers: AppBarItem[] = [
  {
    id: "lab",
    label: "Spore Lab",
    icon: <span>🧪</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
  {
    id: "studio",
    label: "Studio",
    icon: <span>🎨</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
  {
    id: "market",
    label: "Market",
    icon: <span>🛒</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
];

export default function SpeedDial() {
  return (
    <div className="flex h-40 items-end justify-center">
      <AppBar
        windows={windows}
        launchers={launchers}
        alwaysExpanded
        launcher={{ label: "Open apps", icon: <span>🍄</span> }}
      />
    </div>
  );
}

Primary action

TSX

import { AppBar, type AppBarItem } from "@fungi.computer/caps/blocks/app-bar";
import { useState } from "react";

const launchers: AppBarItem[] = [
  {
    id: "forage",
    label: "Forage",
    icon: <span>🍄</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
  {
    id: "compost",
    label: "Compost",
    icon: <span>🪴</span>,
    onSelect: () => {
      /* This specimen has no host action. */
    },
  },
];

export default function PrimaryAction() {
  const [open, setOpen] = useState(true);
  return (
    <div className="flex h-40 items-end justify-center">
      <AppBar
        windows={[]}
        launchers={launchers}
        isOpen={open}
        onOpenChange={setOpen}
        launcher={{ label: "Open apps", icon: <span>🍄</span> }}
        primaryAction={{
          label: "New chat",
          icon: <span>💬</span>,
          onSelect: () => {
            /* This specimen has no host action. */
          },
        }}
      />
    </div>
  );
}

Props

AppBarProps

Prop	Type	Description
open	boolean

• openboolean

Full types: API reference.