contact-2

1import { cn } from "@/lib/utils";
2import { XIcon } from "@/components/icons/x-icon";
3import { Button } from "@/components/ui/button";
4 
5const APP_EMAIL = "mail@example.com";
6 
7const data = [
8	{
9		title: "Email Us",
10		description: "We respond to all emails within 24 hours.",
11		icon: (
12			<IconPlaceholder
13				hugeicons="MailSend01Icon"
14				lucide="Mail"
15				phosphor="EnvelopeIcon"
16				remixicon="RiMailLine"
17				tabler="IconMail"
18			/>
19		),
20		href: `mailto:${APP_EMAIL}`,
21		label: APP_EMAIL,
22	},
23	{
24		title: "Send us DM",
25		description: "Send us a direct message on X for quick answers.",
26		icon: <XIcon />,
27		href: "#",
28		label: "@efferdui",
29	},
30	{
31		title: "Join the community",
32		description: "Join our community to connect with other users.",
33		icon: (
34			<IconPlaceholder
35				hugeicons="UserGroupIcon"
36				lucide="Users"
37				phosphor="UsersIcon"
38				remixicon="RiGroupLine"
39				tabler="IconUsers"
40			/>
41		),
42		href: "#",
43		label: "Join Discord",
44	},
45];
46 
47export function Contact() {
48	return (
49		<div className="mx-auto max-w-4xl">
50			<div className="mb-12 flex max-w-md flex-col justify-center gap-2">
51				<h1 className="font-bold text-2xl md:text-3xl">Contact Us</h1>
52				<p className="text-base text-muted-foreground">
53					We&apos;re here to help and answer any question you might have, We
54					look forward to hearing from you.
55				</p>
56			</div>
57			<div className="grid gap-0.5 overflow-hidden rounded-lg bg-muted p-0.5 md:grid-cols-3 dark:bg-muted/50">
58				{data.map((item) => (
59					<div
60						className="flex flex-col gap-3 rounded-lg bg-background px-6 py-6 shadow-xs"
61						key={item.title}
62					>
63						<div
64							className={cn(
65								"flex items-center gap-x-2",
66								"[&_svg]:size-4 [&_svg]:text-muted-foreground"
67							)}
68						>
69							{item.icon}
70							<h2 className="text-sm">{item.title}</h2>
71						</div>
72						<p className="text-muted-foreground text-sm">{item.description}</p>
73						<div className="mt-1 flex items-center gap-x-2">
74							<Button asChild variant="link">
75								<a href={item.href}>{item.label}</a>
76							</Button>
77						</div>
78					</div>
79				))}
80			</div>
81		</div>
82	);
83}