Components
Loading preview...
Here is Dialog component
npx shadcn@latest add https://21st.dev/r/anubra266/dialog-2"use client";
import { Dialog } from "@ark-ui/react/dialog";
import { Portal } from "@ark-ui/react/portal";
import { X, CreditCard } from "lucide-react";
import { useState } from "react";
export default function CardDetailsDialog() {
const [cardData, setCardData] = useState({
nameOnCard: "",
cardNumber: "",
expiryDate: "",
cvc: "",
setAsDefault: false,
});
const handleInputChange = (field: string, value: string | boolean) => {
setCardData((prev) => ({ ...prev, [field]: value }));
};
return (
<Dialog.Root>
<Dialog.Trigger asChild>
<button className="rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 px-4 py-2 text-sm text-gray-900 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors cursor-pointer inline-flex items-center justify-center">
Card Details
</button>
</Dialog.Trigger>
<Portal>
<Dialog.Backdrop className="data-[state=open]:animate-backdrop-in data-[state=closed]:animate-backdrop-out fixed inset-0 z-50 bg-black/50 backdrop-blur-xs" />
<Dialog.Positioner className="fixed inset-0 z-50 flex items-center justify-center p-4">
<Dialog.Content className="data-[state=open]:animate-dialog-in data-[state=closed]:animate-dialog-out relative w-full max-w-sm rounded-lg bg-white dark:bg-gray-900 p-5 shadow-lg">
<Dialog.CloseTrigger asChild>
<button className="absolute right-3 top-3 p-1 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors cursor-pointer">
<X className="h-4 w-4" />
</button>
</Dialog.CloseTrigger>
<div className="space-y-4">
<div className="flex items-start space-x-3">
<div className="flex h-10 w-10 items-center justify-center rounded-full border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
<CreditCard className="h-5 w-5 text-gray-600 dark:text-white" />
</div>
<div className="space-y-1">
<Dialog.Title className="text-lg font-semibold text-gray-900 dark:text-white">
Update your card
</Dialog.Title>
<Dialog.Description className="text-sm text-gray-600 dark:text-gray-400">
Your new card will replace your current card.
</Dialog.Description>
</div>
</div>
<div className="space-y-3">
<div className="space-y-1">
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
Name on card
</label>
<input
type="text"
value={cardData.nameOnCard}
onChange={(e) =>
handleInputChange("nameOnCard", e.target.value)
}
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
/>
</div>
<div className="space-y-1">
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
Card Number
</label>
<div className="relative">
<input
type="text"
placeholder="Card number"
value={cardData.cardNumber}
onChange={(e) =>
handleInputChange("cardNumber", e.target.value)
}
className="w-full px-3 py-2 pr-10 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
/>
<CreditCard className="absolute right-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
</div>
</div>
<div className="grid grid-cols-2 gap-3">
<div className="space-y-1">
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
Expiry date
</label>
<input
type="text"
placeholder="MM/YY"
value={cardData.expiryDate}
onChange={(e) =>
handleInputChange("expiryDate", e.target.value)
}
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
/>
</div>
<div className="space-y-1">
<label className="block text-xs font-medium text-gray-700 dark:text-gray-300">
CVC
</label>
<input
type="text"
placeholder="CVC"
value={cardData.cvc}
onChange={(e) => handleInputChange("cvc", e.target.value)}
className="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:outline-hidden focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 transition-colors"
/>
</div>
</div>
<div className="flex items-center space-x-2">
<input
type="checkbox"
id="setAsDefault"
checked={cardData.setAsDefault}
onChange={(e) =>
handleInputChange("setAsDefault", e.target.checked)
}
className="w-3 h-3 border border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 focus:ring-0 focus:ring-offset-0"
/>
<label
htmlFor="setAsDefault"
className="text-xs text-gray-600 dark:text-gray-400 cursor-pointer"
>
Set as default payment method
</label>
</div>
<Dialog.CloseTrigger asChild>
<button className="w-full px-3 py-2 text-sm bg-gray-900 dark:bg-white text-white dark:text-gray-900 hover:bg-gray-800 dark:hover:bg-gray-100 rounded-md transition-colors cursor-pointer inline-flex items-center justify-center font-medium">
Update card
</button>
</Dialog.CloseTrigger>
</div>
</div>
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root>
);
}