extended-19

1<script setup lang="ts">
2import { Button } from "@/registry/default/ui/button";
3import { Card, CardContent } from "@/registry/default/ui/card";
4import { RiBankLine, RiNoCreditCardLine, RiPaypalLine } from "@remixicon/vue";
5 
6const paymentMethods = [
7  {
8    name: "Credit Card",
9    description: "Pay with your credit card",
10    icon: RiNoCreditCardLine,
11  },
12  {
13    name: "PayPal",
14    description: "Pay with your PayPal account",
15    icon: RiPaypalLine,
16  },
17  {
18    name: "Bank Transfer",
19    description: "Pay with your bank transfer",
20    icon: RiBankLine,
21  },
22];
23</script>
24 
25<template>
26  <Card>
27    <CardHeader>
28      <CardTitle>Select payment method</CardTitle>
29      <CardDescription>
30        Choose your preferred payment method to complete your purchase.
31      </CardDescription>
32    </CardHeader>
33    <CardContent>
34      <form>
35        <RadioGroup class="gap-2">
36          <div
37            v-for="paymentMethod in paymentMethods"
38            :key="paymentMethod.name"
39            class="border-input has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-accent relative flex w-full items-center gap-2 rounded-md border px-4 py-3 shadow-xs outline-none"
40          >
41            <RadioGroupItem
42              :value="paymentMethod.name"
43              class="order-1 after:absolute after:inset-0"
44            />
45            <div class="bg-primary/10 flex size-9 items-center justify-center rounded-full">
46              <component :is="paymentMethod.icon" class="text-primary size-5" />
47            </div>
48            <div class="grid grow gap-1">
49              <Label :htmlFor="`${id}-${paymentMethod.name}`">
50                {{ paymentMethod.name }}
51              </Label>
52              <p
53                :id="`${id}-${paymentMethod.name}-description`"
54                class="text-muted-foreground text-xs"
55              >
56                {{ paymentMethod.description }}
57              </p>
58            </div>
59          </div>
60        </RadioGroup>
61      </form>
62    </CardContent>
63    <CardFooter class="gap-2">
64      <Button variant="default" class="flex-1">
65        <span>Proceed to checkout</span>
66      </Button>
67      <Button variant="outline" class="flex-1">
68        <span>Cancel</span>
69      </Button>
70    </CardFooter>
71  </Card>
72</template>