Notification preferences form

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox"
import { Field, FieldContent, FieldDescription, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldTitle } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"
</script>

<template>
  <div class="mx-auto w-full max-w-xs">
    <FieldGroup>
      <FieldSet>
        <FieldLegend variant="label">Notification Channels</FieldLegend>
        <FieldGroup class="gap-4">
          <Field orientation="horizontal">
            <FieldContent>
              <FieldTitle>Push Notifications</FieldTitle>
              <FieldDescription>
                Alerts sent to your device in real time.
              </FieldDescription>
            </FieldContent>
            <Switch id="notif-push" :default-value="true" />
          </Field>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldTitle>Email Digest</FieldTitle>
              <FieldDescription>
                A daily summary of activity sent to your inbox.
              </FieldDescription>
            </FieldContent>
            <Switch id="notif-email" :default-value="true" />
          </Field>
          <Field orientation="horizontal">
            <FieldContent>
              <FieldTitle>SMS Alerts</FieldTitle>
              <FieldDescription>
                Text messages for critical notifications only.
              </FieldDescription>
            </FieldContent>
            <Switch id="notif-sms" />
          </Field>
        </FieldGroup>
      </FieldSet>
      <FieldSeparator />
      <FieldSet>
        <FieldLegend variant="label">Notify me about</FieldLegend>
        <FieldGroup class="gap-4">
          <Field orientation="horizontal">
            <Checkbox id="notif-comments" :default-value="true" />
            <FieldContent>
              <FieldTitle>Comments</FieldTitle>
              <FieldDescription>
                When someone comments on your posts.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="notif-mentions" :default-value="true" />
            <FieldContent>
              <FieldTitle>Mentions</FieldTitle>
              <FieldDescription>
                When someone mentions you in a conversation.
              </FieldDescription>
            </FieldContent>
          </Field>
          <Field orientation="horizontal">
            <Checkbox id="notif-updates" />
            <FieldContent>
              <FieldTitle>Product Updates</FieldTitle>
              <FieldDescription>
                News about new features and improvements.
              </FieldDescription>
            </FieldContent>
          </Field>
        </FieldGroup>
      </FieldSet>
    </FieldGroup>
  </div>
</template>