Grouped Form

"use client"

import {
  GroupedForm,
  GroupedFormGroup,
  GroupedFormRow,
  GroupedFormRowControl,
  GroupedFormRowDescription,
  GroupedFormRowLabel,
  GroupedFormRowTitle,
  GroupedFormSection,
  GroupedFormSectionTitle,
} from "@/components/ui/grouped-form"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { Switch } from "@/components/ui/switch"

export default function GroupedFormDemo() {
  return (
    <GroupedForm className="w-full max-w-lg rounded-[16px] bg-mac-window px-5 py-4">
      <GroupedFormSection>
        <GroupedFormSectionTitle>Dock</GroupedFormSectionTitle>
        <GroupedFormGroup>
          <GroupedFormRow>
            <GroupedFormRowTitle>Position on screen</GroupedFormRowTitle>
            <GroupedFormRowControl>
              <Select defaultValue="bottom" items={{ left: "Left", bottom: "Bottom", right: "Right" }}>
                <SelectTrigger variant="borderless">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent>
                  <SelectItem value="left">Left</SelectItem>
                  <SelectItem value="bottom">Bottom</SelectItem>
                  <SelectItem value="right">Right</SelectItem>
                </SelectContent>
              </Select>
            </GroupedFormRowControl>
          </GroupedFormRow>
          <GroupedFormRow>
            <GroupedFormRowTitle>Automatically hide and show the Dock</GroupedFormRowTitle>
            <GroupedFormRowControl>
              <Switch size="mini" defaultChecked aria-label="Automatically hide and show the Dock" />
            </GroupedFormRowControl>
          </GroupedFormRow>
          <GroupedFormRow className="items-start">
            <GroupedFormRowLabel>
              <GroupedFormRowTitle>Stage Manager</GroupedFormRowTitle>
              <GroupedFormRowDescription>
                Arranges your recent windows into a single strip for reduced clutter and quick access.
              </GroupedFormRowDescription>
            </GroupedFormRowLabel>
            <GroupedFormRowControl>
              <Switch size="mini" aria-label="Stage Manager" />
            </GroupedFormRowControl>
          </GroupedFormRow>
        </GroupedFormGroup>
      </GroupedFormSection>
    </GroupedForm>
  )
}