Collapsible

import { Text } from "@etched/reticle/text";
import { Collapsible } from "@etched/reticle/collapsible";

export function ViewNote() {
  return (
    <div style={{ maxInlineSize: "26rem" }}>
      <Text as="p" size="sm" variant="secondary">
        Accepted by Sam Lee · Oct 14
      </Text>
      <Collapsible label="View note">
        <Text as="p">The Ashby owner was wrong. Moved to Kai Ito, who ran the first screen.</Text>
      </Collapsible>
    </div>
  );
}

import { Text } from "@etched/reticle/text";
import { Collapsible } from "@etched/reticle/collapsible";

const drafts = [
  { name: "Ana Ruiz", body: "Thanks for the call today. Could you send the tape-out timeline before Friday?" },
  { name: "Kai Ito", body: "Moving our chat to Thursday at 10:00. The Taipei trip is still on." },
];

export function UnsavedEdits() {
  return (
    <div style={{ maxInlineSize: "26rem" }}>
      <Collapsible label="2 unsaved edits" defaultOpen>
        {drafts.map((draft) => (
          <div key={draft.name}>
            <Text as="p" bold>
              {draft.name}
            </Text>
            <Text as="p" variant="secondary">
              {draft.body}
            </Text>
          </div>
        ))}
      </Collapsible>
    </div>
  );
}

import { useRef, useState } from "react";
import { Button } from "@etched/reticle/button";
import { Select } from "@etched/reticle/select";
import { Text } from "@etched/reticle/text";
import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "@etched/reticle/collapsible";

interface Referral {
  name: string;
  role: string;
  by: string;
}

const referrals: [string, Referral[]][] = [
  [
    "Active",
    [
      { name: "Ana Ruiz", role: "ASIC design engineer", by: "Sam Lee" },
      { name: "José Núñez", role: "Firmware engineer", by: "Kai Ito" },
    ],
  ],
  [
    "Inactive",
    [
      { name: "Lee Park", role: "Thermal engineer", by: "Sam Lee" },
      { name: "Mira Osei", role: "Physical design lead", by: "Ana Ruiz" },
    ],
  ],
];

export function FiltersPanel() {
  const [open, setOpen] = useState(false);
  const trigger = useRef<HTMLButtonElement>(null);

  return (
    <CollapsibleRoot open={open} onOpenChange={setOpen}>
      <div className="row" style={{ justifyContent: "space-between", maxInlineSize: "32rem" }}>
        <Text variant="heading">Submitted referrals</Text>
        <CollapsibleTrigger ref={trigger} render={<Button size="sm" />}>
          Filters
        </CollapsibleTrigger>
      </div>
      <CollapsiblePanel>
        <div className="row" style={{ alignItems: "end", paddingBlockStart: "var(--et-space-3)" }}>
          <Select label="Status" items={{ new: "New", accepted: "Accepted", declined: "Declined" }} placeholder="Any status" />
          <Select label="Referred by" items={{ sam: "Sam Lee", kai: "Kai Ito", ana: "Ana Ruiz" }} placeholder="Anyone" />
          <Button
            onClick={() => {
              setOpen(false);
              trigger.current?.focus();
            }}
          >
            Done
          </Button>
        </div>
      </CollapsiblePanel>
    </CollapsibleRoot>
  );
}

import { Table } from "@etched/reticle/table";
import { CollapsiblePanel, CollapsibleRoot, CollapsibleTrigger } from "@etched/reticle/collapsible";

interface Referral {
  name: string;
  role: string;
  by: string;
}

const referrals: [string, Referral[]][] = [
  [
    "Active",
    [
      { name: "Ana Ruiz", role: "ASIC design engineer", by: "Sam Lee" },
      { name: "José Núñez", role: "Firmware engineer", by: "Kai Ito" },
    ],
  ],
  [
    "Inactive",
    [
      { name: "Lee Park", role: "Thermal engineer", by: "Sam Lee" },
      { name: "Mira Osei", role: "Physical design lead", by: "Ana Ruiz" },
    ],
  ],
];

export function TableRowGroups() {
  return (
    <div className="card">
      <Table aria-label="Referrals">
        <thead>
          <tr>
            <th style={{ inlineSize: "30%" }}>Candidate</th>
            <th>Role</th>
            <th style={{ inlineSize: "20%" }}>Referred by</th>
          </tr>
        </thead>
        {referrals.map(([group, rows]) => (
          <CollapsibleRoot key={group} defaultOpen={group === "Active"}>
            <tbody>
              <tr>
                <th scope="rowgroup" colSpan={3}>
                  <CollapsibleTrigger>
                    {group} ({rows.length})
                  </CollapsibleTrigger>
                </th>
              </tr>
            </tbody>
            <CollapsiblePanel render={<tbody />}>
              {rows.map((row) => (
                <tr key={row.name}>
                  <th scope="row">{row.name}</th>
                  <td>{row.role}</td>
                  <td>{row.by}</td>
                </tr>
              ))}
            </CollapsiblePanel>
          </CollapsibleRoot>
        ))}
      </Table>
    </div>
  );
}