Sheet

"use client"

import { Button } from "macbetter/button"
import { List, ListRow, ListRowTitle, ListRowValue, ListSection } from "macbetter/list"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "macbetter/sheet"

const places = [
  { name: "Blue Bottle Coffee", detail: "Coffee · 0.2 mi" },
  { name: "Tartine Bakery", detail: "Bakery · 0.4 mi" },
  { name: "Dolores Park", detail: "Park · 0.5 mi" },
  { name: "Mission Dolores", detail: "Landmark · 0.6 mi" },
  { name: "Ritual Coffee Roasters", detail: "Coffee · 0.7 mi" },
  { name: "Bi-Rite Creamery", detail: "Ice cream · 0.7 mi" },
  { name: "Alamo Square", detail: "Park · 1.1 mi" },
  { name: "Ferry Building", detail: "Market · 2.3 mi" },
]

export default function Example() {
  return (
    <Sheet detents={["medium", "large"]}>
      <SheetTrigger render={<Button variant="filled" />}>Find a Place</SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Places Nearby</SheetTitle>
          <SheetClose variant="primary">Done</SheetClose>
        </SheetHeader>
        <SheetDescription>Drag the sheet up to see more.</SheetDescription>
        <SheetBody>
          <List>
            <ListSection>
              {places.map((place) => (
                <ListRow key={place.name}>
                  <ListRowTitle>{place.name}</ListRowTitle>
                  <ListRowValue>{place.detail}</ListRowValue>
                </ListRow>
              ))}
            </ListSection>
          </List>
        </SheetBody>
      </SheetContent>
    </Sheet>
  )
}

"use client"

import { Button } from "macbetter/button"
import { List, ListRow, ListRowAccessory, ListRowTitle, ListRowValue, ListSection } from "macbetter/list"
import { Sheet, SheetBody, SheetClose, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "macbetter/sheet"
import { Switch } from "macbetter/switch"
import { PanelRightIcon } from "lucide-react"

export default function Example() {
  return (
    <Sheet side="end" modal={false}>
      <SheetTrigger render={<Button />}>
        <PanelRightIcon aria-hidden="true" />
        Show Inspector
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Inspector</SheetTitle>
          <SheetClose>Hide</SheetClose>
        </SheetHeader>
        <SheetBody>
          <List>
            <ListSection header="Document">
              <ListRow>
                <ListRowTitle>Size</ListRowTitle>
                <ListRowValue>1,920 × 1,080</ListRowValue>
              </ListRow>
              <ListRow>
                <ListRowTitle>Modified</ListRowTitle>
                <ListRowValue>Today, 9:41</ListRowValue>
              </ListRow>
              <ListRow>
                <ListRowTitle>Show Grid</ListRowTitle>
                <ListRowAccessory>
                  <Switch aria-label="Show Grid" defaultChecked />
                </ListRowAccessory>
              </ListRow>
            </ListSection>
          </List>
        </SheetBody>
      </SheetContent>
    </Sheet>
  )
}

"use client"

import { Button } from "macbetter/button"
import {
  Sheet,
  SheetBody,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetOutlet,
  SheetTitle,
  SheetTrigger,
} from "macbetter/sheet"
import { Field, FieldLabel } from "macbetter/field"
import { TextField } from "macbetter/text-field"

const messages = [
  { from: "Inès", text: "The proofs are back from the printer." },
  { from: "Kofi", text: "Lunch on Thursday?" },
  { from: "Wren", text: "Pushed the fix for the release build." },
]

export default function Example() {
  return (
    <Sheet detents={["large"]}>
      <SheetOutlet style={{ width: "100%", padding: 16, background: "var(--mb-bg)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
          <strong>Inbox</strong>
          <SheetTrigger render={<Button variant="filled" size="sm" />}>Compose</SheetTrigger>
        </div>
        <ul style={{ listStyle: "none", padding: 0, margin: "12px 0 0", display: "grid", gap: 10 }}>
          {messages.map((message) => (
            <li key={message.from}>
              <div style={{ fontWeight: 600 }}>{message.from}</div>
              <div style={{ color: "var(--mb-label-secondary)" }}>{message.text}</div>
            </li>
          ))}
        </ul>
      </SheetOutlet>
      <SheetContent>
        <SheetHeader>
          <SheetClose>Cancel</SheetClose>
          <SheetTitle>New Message</SheetTitle>
          <SheetClose variant="primary" value="send">
            Send
          </SheetClose>
        </SheetHeader>
        <SheetBody>
          <Field>
            <FieldLabel>To</FieldLabel>
            <TextField defaultValue="Design team" />
          </Field>
        </SheetBody>
      </SheetContent>
    </Sheet>
  )
}