Credit Card

1"use client";
2
3import { useEffect, useState } from "react";
4import { CreditCard } from "@/registry/ui";
5
6export function CreditCardDefaultExample() {
7  const [isMounted, setIsMounted] = useState(false);
8
9  useEffect(() => {
10    setIsMounted(true);
11  }, []);
12
13  if (!isMounted) {
14    return <div className="w-full flex justify-center items-center px-4" />;
15  }
16
17  return (
18    <div className="w-full flex justify-center items-center px-4">
19      <CreditCard
20        cardNumber="3700 0000 0000 002"
21        cardholderName="John Doe"
22        expiry="12/28"
23        cvv="123"
24        maskNumber={false}
25      />
26    </div>
27  );
28}

1"use client";
2
3import { useEffect, useState } from "react";
4import { CreditCard } from "@/registry/ui";
5
6export function CreditCardAutoBrandExample() {
7  const [isMounted, setIsMounted] = useState(false);
8
9  useEffect(() => {
10    setIsMounted(true);
11  }, []);
12
13  if (!isMounted) {
14    return <div className="w-full flex justify-center items-center px-4" />;
15  }
16
17  return (
18    <div className="w-full flex justify-center items-center px-4">
19      <CreditCard
20        cardNumber="5123 4500 0000 0008"
21        cardholderName="John Doe"
22        expiry="12/28"
23        cvv="123"
24        maskNumber={false}
25      />
26    </div>
27  );
28}

1"use client";
2
3import { useState } from "react";
4import { CreditCard } from "@/registry/ui";
5import { Input } from "@/components/ui/input";
6
7export function CreditCardWithInputExample() {
8  const [cardNumber, setCardNumber] = useState("4532 8720 1234 5678");
9  const [cardholderName, setCardholderName] = useState("John Doe");
10  const [expiry, setExpiry] = useState("12/28");
11  const [cvv, setCvv] = useState("123");
12
13  return (
14    <div className="w-full px-4">
15      <div className="mx-auto grid w-full max-w-5xl gap-6 rounded-2xl border bg-card/50 p-4 shadow-sm backdrop-blur-sm md:grid-cols-[320px_minmax(0,1fr)] md:items-center md:p-6">
16        <div className="space-y-4 rounded-xl border bg-background/80 p-4">
17          <div className="space-y-1">
18            <p className="text-sm font-medium">Card Number</p>
19            <Input
20              placeholder="4532 8720 1234 5678"
21              value={cardNumber}
22              onChange={(e) => setCardNumber(e.target.value)}
23            />
24          </div>
25
26          <div className="space-y-1">
27            <p className="text-sm font-medium">Cardholder Name</p>
28            <Input
29              placeholder="John Doe"
30              value={cardholderName}
31              onChange={(e) => setCardholderName(e.target.value)}
32            />
33          </div>
34
35          <div className="grid grid-cols-2 gap-3">
36            <div className="space-y-1">
37              <p className="text-sm font-medium">Expiry</p>
38              <Input
39                placeholder="12/28"
40                value={expiry}
41                onChange={(e) => setExpiry(e.target.value)}
42              />
43            </div>
44            <div className="space-y-1">
45              <p className="text-sm font-medium">CVV</p>
46              <Input
47                placeholder="123"
48                value={cvv}
49                onChange={(e) => setCvv(e.target.value)}
50              />
51            </div>
52          </div>
53
54          <p className="text-xs text-muted-foreground">
55            Update the fields to preview changes live on the card.
56          </p>
57        </div>
58
59        <div className="flex justify-center md:justify-end">
60          <CreditCard
61            cardNumber={cardNumber}
62            cardholderName={cardholderName}
63            expiry={expiry}
64            cvv={cvv}
65            brand="auto"
66          />
67        </div>
68      </div>
69    </div>
70  );
71}