Components
Loading preview...
Insurance Policy Card Description: A visually polished card to display key insurance policy details for a client. It includes sections for client info, policy data, a QR code, and an action button. It's designed to be easily reused with different data via props.
@ravikatiyar
npx shadcn@latest add https://21st.dev/r/ravikatiyar162/insurance-policy-card// demo.tsx
import React from 'react';
import { InsurancePolicyCard } from '@/components/ui/insurance-policy-card';
const InsurancePolicyCardDemo = () => {
// Sample data to pass into the component
const sampleClient = {
name: 'Jeremy Allen White',
avatarUrl: 'https://i.pravatar.cc/150',
dateOfBirth: '09 Jan 1992',
cityOfResidence: 'Los Angeles, CA',
};
const samplePolicy = {
idNumber: '756872004',
policyNumber: 'NPX 47208716',
insuranceType: 'Car Insurance',
vehicleInfo: 'Bentley Bentayga, 2019',
expiryDate: '21 Sep 2025',
expiryDuration: '2 years',
};
const handleUpdate = () => {
// In a real app, this would trigger a modal or navigation
alert('"Update a Policy" button clicked!');
};
return (
<div className="flex h-screen w-full items-center justify-center bg-background p-4">
<InsurancePolicyCard
client={sampleClient}
policy={samplePolicy}
qrCodeUrl="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=policy-NPX47208716"
onUpdatePolicy={handleUpdate}
/>
</div>
);
};
export default InsurancePolicyCardDemo;