Sheet

import { useRef, useState } from "react";
import { Button, HStack, Sheet, Toggle, VStack } from "@/ohmygui";

export default function Example() {
  const [open, setOpen] = useState(false);
  const [placement, setPlacement] = useState<"bottom" | "end">("bottom");
  const trigger = useRef<HTMLButtonElement>(null);
  const show = (next: "bottom" | "end", button: HTMLButtonElement) => {
    trigger.current = button;
    setPlacement(next);
    setOpen(true);
  };
  return (
    <VStack gap="md" align="start">
      <HStack gap="sm" wrap>
        <Button onClick={(event) => show("bottom", event.currentTarget)}>Bottom sheet</Button>
        <Button variant="outline" onClick={(event) => show("end", event.currentTarget)}>Side sheet</Button>
      </HStack>
      <Sheet open={open} triggerRef={trigger} placement={placement} onClose={() => setOpen(false)} title="Share settings" description="Choose what collaborators can see." actions={<Button onClick={() => setOpen(false)}>Done</Button>}>
        <Toggle label="Include unpublished pages" defaultChecked />
      </Sheet>
    </VStack>
  );
}