Fold

tcmts.share.Fold · #hp2zhfte · term · runs anywhere

Something folded away under a head that opens it (React Aria's Disclosure): what only re-hashed, a comment form.

import { Chevron } from "#codebase/tcmts/share";
import type { ReactNode } from "react";
import { Button, Disclosure, DisclosurePanel, Heading } from "react-aria-components";

export function Fold({ head, children }: { head: ReactNode; children: ReactNode }) {
  return (
    <Disclosure className="fold">
      <Heading level={3} className="fold-heading">
        <Button slot="trigger" className="fold-btn">
          <Chevron />
          {head}
        </Button>
      </Heading>
      <DisclosurePanel className="fold-panel">{children}</DisclosurePanel>
    </Disclosure>
  );
}

uses

used by