Switch in frame

<script setup lang="ts">
import { Frame, FrameHeader, FramePanel, FrameTitle } from "@/components/reui/frame"
import { Field, FieldGroup, FieldLabel, FieldTitle } from "@/components/ui/field"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
</script>

<template>
  <Frame class="w-full max-w-xs" spacing="sm">
    <FrameHeader>
      <FrameTitle>Privacy Settings</FrameTitle>
    </FrameHeader>
    <FramePanel class="overflow-hidden p-0!">
      <FieldGroup class="gap-0">
        <Field>
          <FieldLabel class="justify-between p-3">
            <FieldTitle>Profile visibility</FieldTitle>
            <Switch :default-value="true" />
          </FieldLabel>
        </Field>
        <Separator />
        <Field>
          <FieldLabel class="justify-between p-3">
            <FieldTitle>Show online status</FieldTitle>
            <Switch :default-value="true" />
          </FieldLabel>
        </Field>
        <Separator />
        <Field>
          <FieldLabel class="justify-between p-3">
            <FieldTitle>Allow data collection</FieldTitle>
            <Switch />
          </FieldLabel>
        </Field>
      </FieldGroup>
    </FramePanel>
  </Frame>
</template>