Switch with descriptions in card grid

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

const features = [
  {
    id: "feat-analytics",
    title: "Analytics",
    description: "Track page views and user interactions",
    checked: true,
    icon: "chart-column",
  },
  {
    id: "feat-logging",
    title: "Error Logging",
    description: "Capture and report runtime errors",
    checked: true,
    icon: "bug",
  },
  {
    id: "feat-cdn",
    title: "CDN Caching",
    description: "Serve static assets from edge network",
    checked: false,
    icon: "globe",
  },
  {
    id: "feat-backup",
    title: "Auto Backup",
    description: "Daily snapshots of your database",
    checked: false,
    icon: "database",
  },
] as const
</script>

<template>
  <FieldGroup class="grid w-full max-w-md grid-cols-2 gap-4">
    <FieldLabel v-for="feature in features" :key="feature.id" :for="feature.id" class="p-0!">
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle class="flex items-start gap-2">
            <div class="bg-background border-border flex shrink-0 items-center justify-center rounded-md border p-1.5 shadow-xs shadow-black/5">
              <svg
                v-if="feature.icon === 'chart-column'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-chart-column size-4"
                aria-hidden="true"
              >
                <path d="M3 3v16a2 2 0 0 0 2 2h16" />
                <path d="M18 17V9" />
                <path d="M13 17V5" />
                <path d="M8 17v-3" />
              </svg>
              <svg
                v-else-if="feature.icon === 'bug'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-bug size-4"
                aria-hidden="true"
              >
                <path d="M12 20v-9" />
                <path d="M14 7a4 4 0 0 1 4 4v3a6 6 0 0 1-12 0v-3a4 4 0 0 1 4-4z" />
                <path d="M14.12 3.88 16 2" />
                <path d="M21 21a4 4 0 0 0-3.81-4" />
                <path d="M21 5a4 4 0 0 1-3.55 3.97" />
                <path d="M22 13h-4" />
                <path d="M3 21a4 4 0 0 1 3.81-4" />
                <path d="M3 5a4 4 0 0 0 3.55 3.97" />
                <path d="M6 13H2" />
                <path d="m8 2 1.88 1.88" />
                <path d="M9 7.13V6a3 3 0 1 1 6 0v1.13" />
              </svg>
              <svg
                v-else-if="feature.icon === 'globe'"
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-globe size-4"
                aria-hidden="true"
              >
                <circle cx="12" cy="12" r="10" />
                <path d="M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" />
                <path d="M2 12h20" />
              </svg>
              <svg
                v-else
                xmlns="http://www.w3.org/2000/svg"
                width="24"
                height="24"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="lucide lucide-database size-4"
                aria-hidden="true"
              >
                <ellipse cx="12" cy="5" rx="9" ry="3" />
                <path d="M3 5V19A9 3 0 0 0 21 19V5" />
                <path d="M3 12A9 3 0 0 0 21 12" />
              </svg>
            </div>
            <div class="flex flex-col items-start gap-0.5">
              <span class="text-sm font-semibold">{{ feature.title }}</span>
              <span class="text-muted-foreground text-xs">
                {{ feature.description }}
              </span>
            </div>
          </FieldTitle>
        </FieldContent>
        <Switch
          :id="feature.id"
          :default-value="feature.checked"
          size="sm"
        />
      </Field>
    </FieldLabel>
  </FieldGroup>
</template>