Switch list in card with separators

<script setup lang="ts">
import { Card } from "@/components/ui/card"
import { Field, FieldGroup, FieldLabel, FieldTitle } from "@/components/ui/field"
import { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch"
</script>

<template>
  <Card class="w-full max-w-xs p-0">
    <FieldGroup class="gap-0">
      <Field>
        <FieldLabel class="justify-between px-4 py-3">
          <FieldTitle>Push notifications</FieldTitle>
          <Switch :default-value="true" />
        </FieldLabel>
      </Field>
      <Separator />
      <Field>
        <FieldLabel class="justify-between px-4 py-3">
          <FieldTitle>Email notifications</FieldTitle>
          <Switch />
        </FieldLabel>
      </Field>
      <Separator />
      <Field>
        <FieldLabel class="justify-between px-4 py-3">
          <FieldTitle>SMS notifications</FieldTitle>
          <Switch />
        </FieldLabel>
      </Field>
    </FieldGroup>
  </Card>
</template>