Insurance Card A modern, animated card component to display insurance policy details, complete with a scannable QR code and quick actions.
// demo.tsx
import { InsuranceCard } from "@/components/ui/insurance-card";
// Main demo component to showcase the InsuranceCard
const InsuranceCardDemo = () => {
// Sample data to populate the card
const policyDetails = {
clientName: "Jeremy Allen White",
dateOfBirth: "09 Jan 1992",
cityOfResidence: "Los Angeles, CA",
idNumber: "756872004",
policyNumber: "NPX 47208716",
insuranceType: "Car Insurance",
vehicleInfo: "Bentley Bentayga, 2019",
expireDate: "21 Sep 2025",
expireDuration: "2 years",
// Replace with actual image URLs
avatarSrc: "https://cdn.21st.dev/assets/mirror/b3/b394d0bce8cb630d69db7db48fbf56760ecca8c1129e6364d797c75886320dfa.jpg",
qrCodeSrc: "https://cdn.21st.dev/assets/mirror/3e/3e2cc9b7c90e06b0f88ec8290055284e8d05d755430b40cbf709bba4ee93750e.png",
};
const handleUpdate = () => {
console.log("Update Policy button clicked!");
// Add logic for updating the policy here
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<InsuranceCard
{...policyDetails}
onUpdatePolicy={handleUpdate}
/>
</div>
);
};
export default InsuranceCardDemo;