48 lines
1.7 KiB
TypeScript
48 lines
1.7 KiB
TypeScript
|
import { ArrayElement } from "@repo/rdx-utils";
|
||
|
|
import { Building2Icon, FileTextIcon, Mail, Phone, Search, User } from "lucide-react";
|
||
|
|
import { CustomersListData } from "../../schemas";
|
||
|
|
|
||
|
|
interface CustomerCardProps {
|
||
|
|
customer: ArrayElement<CustomersListData["items"]>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const CustomerCard = ({ customer }: CustomerCardProps) => {
|
||
|
|
return (
|
||
|
|
<div className='flex items-start gap-4'>
|
||
|
|
<div className='flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 border border-primary/20'>
|
||
|
|
<User className='h-6 w-6 text-primary' />
|
||
|
|
</div>
|
||
|
|
<div className='flex-1 space-y-2'>
|
||
|
|
<div className='flex items-center justify-between'>
|
||
|
|
<h3 className='font-semibold text-foreground text-lg'>{customer.name}</h3>
|
||
|
|
<Search className='size-4 text-muted-foreground' />
|
||
|
|
</div>
|
||
|
|
<div className='space-y-1 text-sm text-muted-foreground'>
|
||
|
|
<div className='flex items-center gap-2'>
|
||
|
|
<Mail className='h-3 w-3' />
|
||
|
|
{customer.email_primary}
|
||
|
|
</div>
|
||
|
|
{customer.mobile_primary && (
|
||
|
|
<div className='flex items-center gap-2'>
|
||
|
|
<Phone className='h-3 w-3' />
|
||
|
|
{customer.mobile_primary}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{customer.trade_name && (
|
||
|
|
<div className='flex items-center gap-2'>
|
||
|
|
<Building2Icon className='h-3 w-3' />
|
||
|
|
{customer.trade_name}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
{customer.tin && (
|
||
|
|
<div className='flex items-center gap-2'>
|
||
|
|
<FileTextIcon className='h-3 w-3' />
|
||
|
|
{customer.tin}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|