Sheet

import { Button } from "@etched/monet/button";
import { DescriptionList } from "@etched/monet/description-list";
import { Dialog, DialogActions, DialogClose, DialogDescription, DialogRoot, DialogTitle, DialogTrigger } from "@etched/monet/dialog";
import { Text } from "@etched/monet/text";
import { Sheet, SheetActions, SheetBody, SheetClose, SheetDescription, SheetHeader, SheetRoot, SheetTrigger } from "@etched/monet/sheet";

const notes = [
  ["Sam Lee, 14 Oct", "Strong on clock trees; led the clock rework on the last tape-out. Wants to stay close to silicon bring-up."],
  ["Kai Ito, 15 Oct", "Phone screen went well. Asked good questions about our test floor and the board bring-up plan."],
  ["Ana Ruiz, 16 Oct", "Can start in January. Prefers the Santa Clara lab; open to two days a week in San Jose."],
  ["Sam Lee, 18 Oct", "References from her last two managers are in. Both mention calm under schedule pressure."],
  ["Kai Ito, 20 Oct", "Onsite set for 28 Oct: design review, bring-up debugging, and lunch with the team."],
  ["Sam Lee, 21 Oct", "Sent her the take-home on power integrity. She asked for the board files, which we shared."],
  ["Ana Ruiz, 22 Oct", "Returned the take-home early, with a short note on a decoupling issue we had missed."],
  ["Kai Ito, 23 Oct", "The decoupling note checks out. Adding the board team's lead to the onsite panel."],
  ["Sam Lee, 24 Oct", "Travel booked. She lands on 27 Oct and stays near the Santa Clara lab."],
];

export function RecordDetails() {
  return (
    <SheetRoot>
      <SheetTrigger render={<Button variant="primary">View Ana Ruiz</Button>} />
      <Sheet>
        <SheetHeader close>Ana Ruiz</SheetHeader>
        <SheetDescription>Hardware engineer, applied 12 October</SheetDescription>
        <SheetBody>
          <DescriptionList layout="columns">
            <div>
              <dt>Stage</dt>
              <dd>Onsite</dd>
            </div>
            <div>
              <dt>Owner</dt>
              <dd>Sam Lee</dd>
            </div>
            <div>
              <dt>Email</dt>
              <dd>ana.ruiz@example.com</dd>
            </div>
            <div>
              <dt>Location</dt>
              <dd>Santa Clara</dd>
            </div>
          </DescriptionList>
          <Text variant="heading3" as="h3">
            Notes
          </Text>
          {notes.map(([byline, note]) => (
            <div key={byline}>
              <Text variant="secondary" size="sm">
                {byline}
              </Text>
              <Text>{note}</Text>
            </div>
          ))}
        </SheetBody>
        <SheetActions>
          <DialogRoot role="alertdialog">
            <DialogTrigger render={<Button variant="secondary-destructive">Delete</Button>} />
            <Dialog size="sm">
              <DialogTitle>Delete Ana Ruiz?</DialogTitle>
              <DialogDescription>Her notes and files are deleted too. You cannot undo this.</DialogDescription>
              <DialogActions>
                <DialogClose render={<Button>Cancel</Button>} />
                <DialogClose render={<Button variant="destructive">Delete</Button>} />
              </DialogActions>
            </Dialog>
          </DialogRoot>
          <SheetClose render={<Button variant="primary">Done</Button>} />
        </SheetActions>
      </Sheet>
    </SheetRoot>
  );
}

import { Button } from "@etched/monet/button";
import { Sheet, SheetDescription, SheetHeader, SheetRoot, type SheetSide, SheetTrigger } from "@etched/monet/sheet";

const sides: [SheetSide, string][] = [
  ["start", "From the start"],
  ["end", "From the end"],
  ["bottom", "From the bottom"],
];

export function SidesAndSizes() {
  return (
    <div className="row">
      {sides.map(([side, label]) => (
        <SheetRoot key={side} side={side}>
          <SheetTrigger render={<Button>{label}</Button>} />
          <Sheet size={side === "start" ? "base" : "xl"}>
            <SheetHeader close>Run 1,284</SheetHeader>
            <SheetDescription>Thermal soak, lot 7801. Passed in 42 minutes.</SheetDescription>
          </Sheet>
        </SheetRoot>
      ))}
    </div>
  );
}

import { useState } from "react";
import { Button } from "@etched/monet/button";
import { Input, InputArea } from "@etched/monet/input";
import { Sheet, SheetActions, SheetBody, SheetClose, SheetHeader, SheetRoot, SheetTrigger } from "@etched/monet/sheet";

export function Saving() {
  const [open, setOpen] = useState(false);
  const [busy, setBusy] = useState(false);

  const save = () => {
    setBusy(true);
    setTimeout(() => {
      setBusy(false);
      setOpen(false);
    }, 1200);
  };

  return (
    <SheetRoot open={open} onOpenChange={setOpen} dismissDisabled={busy}>
      <SheetTrigger render={<Button>Edit chip SH-24A-0193</Button>} />
      <Sheet>
        <SheetHeader close>Edit chip SH-24A-0193</SheetHeader>
        <SheetBody>
          <Input label="Name" defaultValue="SH-24A-0193" />
          <Input label="Test site" defaultValue="Santa Clara lab 2" />
          <InputArea label="Notes" rows={3} defaultValue="Runs hot above 1.9 GHz." />
        </SheetBody>
        <SheetActions>
          <SheetClose render={<Button>Cancel</Button>} />
          <Button variant="primary" loading={busy} onClick={save}>
            Save
          </Button>
        </SheetActions>
      </Sheet>
    </SheetRoot>
  );
}