ZvRadioGroupHeadless ​

<template>
  <ZvRadioGroupHeadless v-model="selected" class="flex flex-col gap-2">
    <div class="sr-only">Server size</div>
    <ZvRadioGroupHeadlessOption
      v-for="(plan, index) in plans"
      :key="plan.name"
      :disabled="plan.disabled"
      :value="plan.name"
      v-slot="{ checked }"
    >
      <div
        :class="
          ([],
          {
            'bg-black text-white': checked,
            'shadow-md bg-white': !checked && !plan.disabled,
            'bg-gray-100': plan.disabled,
          })
        "
        class="relative flex px-5 py-4 rounded-lg"
      >
        <div class="flex items-center justify-between flex-1">
          <div class="flex flex-col">
            <span :class="checked ? 'text-white' : 'text-gray-900'" class="text-1">
              {{ plan.name }}
            </span>
            <span :class="checked ? 'text-gray-100' : 'text-gray-500'" class="text-3">
              <span> {{ plan.ram }}/{{ plan.cpus }}</span>
              <span aria-hidden="true"> &middot; </span>
              <span>{{ plan.disk }}</span>
            </span>
          </div>
          <ZvIcon v-show="checked" name="check-round" />
        </div>
      </div>
    </ZvRadioGroupHeadlessOption>
  </ZvRadioGroupHeadless>
</template>

<script lang="ts" setup>
  import ZvRadioGroupHeadless from '@zadigetvoltaire/ui/components/ZvRadioGroupHeadless'
  import ZvRadioGroupHeadlessOption from '@zadigetvoltaire/ui/components/ZvRadioGroupHeadlessOption'
  import ZvIcon from '@zadigetvoltaire/ui/components/ZvIcon'

  import { ref } from 'vue'

  const selected = ref()

  const plans = [
    {
      name: 'Startup',
      ram: '12GB',
      cpus: '6 CPUs',
      disk: '160 GB SSD disk',
    },
    {
      name: 'Business',
      ram: '16GB',
      cpus: '8 CPUs',
      disk: '512 GB SSD disk',
    },
    {
      name: 'Enterprise',
      ram: '32GB',
      cpus: '12 CPUs',
      disk: '1024 GB SSD disk',
      disabled: true,
    },
  ]
</script>