77 lines
2.2 KiB
TypeScript
77 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { Mail, MapPin, MessageCircle, Phone } from "lucide-react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ContactInfoItem {
|
|
label: string;
|
|
description: string;
|
|
value: string;
|
|
href: string;
|
|
icon: "mail" | "map" | "phone" | "chat";
|
|
}
|
|
|
|
interface ContactInfoGridProps {
|
|
title: string;
|
|
description: string;
|
|
items: ContactInfoItem[];
|
|
className?: string;
|
|
}
|
|
|
|
function getIcon(icon: ContactInfoItem["icon"]) {
|
|
switch (icon) {
|
|
case "mail":
|
|
return Mail;
|
|
case "map":
|
|
return MapPin;
|
|
case "phone":
|
|
return Phone;
|
|
case "chat":
|
|
return MessageCircle;
|
|
default:
|
|
return MessageCircle;
|
|
}
|
|
}
|
|
|
|
export function ContactInfoGrid({
|
|
title,
|
|
description,
|
|
items,
|
|
className,
|
|
}: ContactInfoGridProps) {
|
|
return (
|
|
<section className={cn("py-16 md:py-24", className)} dir="rtl" aria-labelledby="contact-info-heading">
|
|
<div className="mx-auto w-full max-w-7xl px-4 sm:px-6">
|
|
<div className="mx-auto max-w-3xl text-center">
|
|
<h1 id="contact-info-heading" className="text-heading-1 font-bold text-foreground">
|
|
{title}
|
|
</h1>
|
|
<p className="mt-4 text-body text-muted-foreground">{description}</p>
|
|
</div>
|
|
|
|
<div className="mt-10 grid gap-4 md:grid-cols-2 lg:gap-6">
|
|
{items.map((item) => {
|
|
const Icon = getIcon(item.icon);
|
|
|
|
return (
|
|
<div key={item.label} className="rounded-2xl border border-border bg-muted/40 p-6 md:p-8">
|
|
<Icon className="mb-4 size-5 text-muted-foreground" aria-hidden />
|
|
<h2 className="text-heading-4 font-medium text-foreground">{item.label}</h2>
|
|
<p className="mt-2 text-body-sm text-muted-foreground">{item.description}</p>
|
|
<a
|
|
href={item.href}
|
|
target={item.icon === "map" ? "_blank" : undefined}
|
|
rel={item.icon === "map" ? "noopener noreferrer" : undefined}
|
|
className="mt-4 inline-block text-body font-medium text-primary hover:opacity-90"
|
|
>
|
|
{item.value}
|
|
</a>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|