105 lines
4.3 KiB
TypeScript
105 lines
4.3 KiB
TypeScript
// components/vendors/ContactCard.tsx
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Separator } from '@/components/ui/separator'
|
|
import { Globe, Mail, MapPin, Phone, User } from 'lucide-react'
|
|
|
|
interface Address {
|
|
street: string
|
|
city: string
|
|
state: string
|
|
zip: number
|
|
}
|
|
|
|
interface ContactCardProps {
|
|
contactPerson?: string | null
|
|
email?: string | null
|
|
phone?: string | null
|
|
website?: string | null
|
|
address?: Address | null
|
|
}
|
|
|
|
export function ContactCard({ contactPerson, email, phone, website, address }: ContactCardProps) {
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Contact Information</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{contactPerson && (
|
|
<div className="flex items-start gap-3">
|
|
<User className="h-5 w-5 text-muted-foreground mt-0.5" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Contact Person</p>
|
|
<p className="font-medium">{contactPerson}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{email && (
|
|
<div className="flex items-start gap-3">
|
|
<Mail className="h-5 w-5 text-muted-foreground mt-0.5" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Email</p>
|
|
<a
|
|
href={`mailto:${email}`}
|
|
className="font-medium hover:text-primary hover:underline"
|
|
>
|
|
{email}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{phone && (
|
|
<div className="flex items-start gap-3">
|
|
<Phone className="h-5 w-5 text-muted-foreground mt-0.5" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Phone</p>
|
|
<a
|
|
href={`tel:${phone}`}
|
|
className="font-medium hover:text-primary hover:underline"
|
|
>
|
|
{phone}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{website && (
|
|
<div className="flex items-start gap-3">
|
|
<Globe className="h-5 w-5 text-muted-foreground mt-0.5" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Website</p>
|
|
<a
|
|
href={website}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="font-medium hover:text-primary hover:underline"
|
|
>
|
|
{website.replace(/^https?:\/\//, '')}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{address && (
|
|
<>
|
|
<Separator />
|
|
<div className="flex items-start gap-3">
|
|
<MapPin className="h-5 w-5 text-muted-foreground mt-0.5" />
|
|
<div>
|
|
<p className="text-sm text-muted-foreground">Address</p>
|
|
<p className="font-medium">
|
|
{address.street}<br />
|
|
{address.city}, {address.state} {address.zip}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
)
|
|
} |