Sheet

import { Cell } from "retend";

import { Button, Sheet } from "innate-ui";
import classes from "../docs.module.css";

export function SheetDemo() {
  const snapPoint = Cell.source<"12rem" | 0.72 | 1 | null>("12rem");
  return (
    <div class={classes.inlineDemo}>
      <Sheet id="sheet-demo-drawer" side="right">
        <Sheet.Trigger>
          <Button>Open drawer</Button>
        </Sheet.Trigger>
        <Sheet.Content>
          <Sheet.Handle />
          <div class={classes.dialogBody}>
            <Sheet.Title>Project details</Sheet.Title>
            <Sheet.Description>
              Drag the edge handle to dismiss this contextual drawer.
            </Sheet.Description>
            <Sheet.Actions>
              <Sheet.Close>Close</Sheet.Close>
            </Sheet.Actions>
          </div>
        </Sheet.Content>
      </Sheet>

      <Sheet
        id="sheet-demo-bottom"
        side="bottom"
        snapPoints={["12rem", 0.72, 1]}
        snapPoint={snapPoint}
        onSnapPointChange={(value) => snapPoint.set(value)}
        snapToSequentialPoints
      >
        <Sheet.Trigger>
          <Button variant="ghost">Open bottom sheet</Button>
        </Sheet.Trigger>
        <Sheet.Content>
          <Sheet.Handle />
          <div class={classes.dialogBody}>
            <Sheet.Title>Quick actions</Sheet.Title>
            <Sheet.Description>
              Drag the handle to move between snap points or dismiss the sheet.
            </Sheet.Description>
            <Sheet.Actions>
              <Sheet.Close>Done</Sheet.Close>
            </Sheet.Actions>
          </div>
        </Sheet.Content>
      </Sheet>
    </div>
  );
}