Components

Permission grid

Show what a scope may use at a glance: one spec-sheet row per capability with its mark, state and scope.

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

Hero

import { PermissionGrid } from "@fungi.computer/caps/blocks/permission-grid";

const rows = [
  {
    id: "camera",
    mark: <span>📷</span>,
    label: "Camera",
    group: "DEVICES",
    state: "allowed" as const,
    stateLabel: "On",
    scope: "Owner grant",
  },
  {
    id: "location",
    mark: <span>📍</span>,
    label: "Location",
    group: "DEVICES",
    state: "denied" as const,
    stateLabel: "Off",
    scope: "Default",
  },
];

export default function Hero() {
  return <PermissionGrid caption="Spore Scanner permissions" rows={rows} />;
}

With controls

import { PermissionGrid } from "@fungi.computer/caps/blocks/permission-grid";
import { Switch } from "@fungi.computer/caps/components/switch";
import { useState } from "react";

export default function WithControls() {
  const [notifications, setNotifications] = useState(true);
  return (
    <PermissionGrid
      caption="Market app"
      summary="What the Market app may use."
      rows={[
        {
          id: "notifications",
          mark: <span>🔔</span>,
          label: "Notifications",
          state: notifications ? "allowed" : "denied",
          stateLabel: notifications ? "On" : "Off",
          scope: "User choice",
          control: (
            <Switch
              aria-label="Notifications"
              checked={notifications}
              onCheckedChange={setNotifications}
            />
          ),
        },
      ]}
    />
  );
}