Disclosure

TS

import { … } from "@fungi.computer/caps/components/disclosure";

Open by default

TSX

import { Disclosure } from "@fungi.computer/caps/components/disclosure";
import { InlineCode } from "@fungi.computer/caps/components/inline-code";
import { useState } from "react";

export default function OpenByDefault() {
  const [open, setOpen] = useState(true);
  return (
    <Disclosure
      className="w-full max-w-sm"
      open={open}
      onOpenChange={setOpen}
      summary="Spawn run details"
      trailing="40 logs"
    >
      <p>
        Oak logs inoculated with <InlineCode>shiitake.LE-01</InlineCode>.
      </p>
    </Disclosure>
  );
}

Nested rows

TSX

import { Disclosure } from "@fungi.computer/caps/components/disclosure";
import { useState } from "react";

export default function NestedRows() {
  const [open, setOpen] = useState<Record<string, boolean | undefined>>({
    a: true,
  });
  const toggle = (id: string) => (next: boolean) => {
    setOpen((current) => ({ ...current, [id]: next }));
  };
  return (
    <div className="flex w-full max-w-sm flex-col gap-1">
      <Disclosure
        open={open.a ?? false}
        onOpenChange={toggle("a")}
        summary="Batch A"
      >
        <Disclosure
          size="row"
          open={open.a1 ?? false}
          onOpenChange={toggle("a1")}
          summary="Log 1"
          trailing="colonized"
        >
          <p>Started 2 weeks ago.</p>
        </Disclosure>
        <Disclosure
          size="row"
          tone="error"
          open={open.a2 ?? false}
          onOpenChange={toggle("a2")}
          summary="Log 2"
          trailing="contaminated"
        >
          <p>Green mold spotted near the end cap.</p>
        </Disclosure>
      </Disclosure>
    </div>
  );
}