Sheet

import { useState } from 'react';
import {
  Button,
  Checkbox,
  Field,
  Select,
  SheetContent,
  SheetRoot,
} from '@andrewbehma/glass-ui';

function Example() {
  const [open, setOpen] = useState(false);
  return (
    <SheetRoot open={open} onOpenChange={setOpen}>
      <Button onClick={() => setOpen(true)}>Open sheet</Button>
      <SheetContent
        side="right"
        title="Filters"
        description="Narrow the board to what matters this week."
        footer={<Button variant="solid" full onClick={() => setOpen(false)}>Apply</Button>}
      >
        <div className="grid gap-4">
          <Checkbox label="Assigned to me" defaultChecked />
          <Checkbox label="Has due date" />
          <Field label="Priority" htmlFor="priority">
            <Select id="priority" tone="on-glass" defaultValue="high">
              <option value="high">High</option>
              <option value="any">Any</option>
            </Select>
          </Field>
        </div>
      </SheetContent>
    </SheetRoot>
  );
}