Radio group in card with icons

<!--
  Расхождение с апстримом: `IconPlaceholder` заменена инлайновым `<svg>`
  (lucide-react v0.545.0 "mail"/"smartphone"/"message-circle") —
  см. docs/PORTING.md §5.
-->
<script setup lang="ts">
import { Card } from "@/components/ui/card"
import { Field, FieldGroup, FieldLabel, FieldTitle } from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Separator } from "@/components/ui/separator"
</script>

<template>
  <Card class="w-full max-w-xs p-0">
    <RadioGroup default-value="email">
      <FieldGroup class="gap-0">
        <Field>
          <FieldLabel class="justify-between px-4 py-3">
            <FieldTitle class="flex items-center gap-2">
              <svg
                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"
                aria-hidden="true"
                class="lucide lucide-mail size-4 opacity-60"
              >
                <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7" />
                <rect x="2" y="4" width="20" height="16" rx="2" />
              </svg>
              Email
            </FieldTitle>
            <RadioGroupItem value="email" id="contact-email" />
          </FieldLabel>
        </Field>
        <Separator />
        <Field>
          <FieldLabel class="justify-between px-4 py-3">
            <FieldTitle class="flex items-center gap-2">
              <svg
                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"
                aria-hidden="true"
                class="lucide lucide-smartphone size-4 opacity-60"
              >
                <rect width="14" height="20" x="5" y="2" rx="2" ry="2" />
                <path d="M12 18h.01" />
              </svg>
              Phone
            </FieldTitle>
            <RadioGroupItem value="phone" id="contact-phone" />
          </FieldLabel>
        </Field>
        <Separator />
        <Field>
          <FieldLabel class="justify-between px-4 py-3">
            <FieldTitle class="flex items-center gap-2">
              <svg
                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"
                aria-hidden="true"
                class="lucide lucide-message-circle size-4 opacity-60"
              >
                <path d="M2.992 16.342a2 2 0 0 1 .094 1.167l-1.065 3.29a1 1 0 0 0 1.236 1.168l3.413-.998a2 2 0 0 1 1.099.092 10 10 0 1 0-4.777-4.719" />
              </svg>
              Chat
            </FieldTitle>
            <RadioGroupItem value="chat" id="contact-chat" />
          </FieldLabel>
        </Field>
      </FieldGroup>
    </RadioGroup>
  </Card>
</template>