42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import { useEffect, useState } from "react";
|
|||
|
|
import { Mail, Phone, Send } from "lucide-react";
|
|||
|
|
import { fetchLinks, FALLBACK_LINKS, type SiteLinks } from "@/lib/links";
|
|||
|
|
|
|||
|
|
export function SupportContact() {
|
|||
|
|
const [links, setLinks] = useState<SiteLinks>(FALLBACK_LINKS);
|
|||
|
|
useEffect(() => {
|
|||
|
|
let on = true;
|
|||
|
|
fetchLinks().then((l) => on && setLinks(l));
|
|||
|
|
return () => {
|
|||
|
|
on = false;
|
|||
|
|
};
|
|||
|
|
}, []);
|
|||
|
|
|
|||
|
|
const email = links.supportEmail || FALLBACK_LINKS.supportEmail;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|||
|
|
<a href={`mailto:${email}`} className="glass flex items-center gap-3 rounded-2xl p-5 hover:border-gold/40">
|
|||
|
|
<Mail className="text-gold" /> <span>{email}</span>
|
|||
|
|
</a>
|
|||
|
|
{links.supportPhone && (
|
|||
|
|
<a href={`tel:${links.supportPhone}`} className="glass flex items-center gap-3 rounded-2xl p-5 hover:border-gold/40">
|
|||
|
|
<Phone className="text-gold" /> <span dir="ltr">{links.supportPhone}</span>
|
|||
|
|
</a>
|
|||
|
|
)}
|
|||
|
|
{links.telegram && (
|
|||
|
|
<a href={links.telegram} target="_blank" rel="noopener" className="glass flex items-center gap-3 rounded-2xl p-5 hover:border-gold/40">
|
|||
|
|
<Send className="text-teal" /> <span>تلگرام پشتیبانی</span>
|
|||
|
|
</a>
|
|||
|
|
)}
|
|||
|
|
{links.instagram && (
|
|||
|
|
<a href={links.instagram} target="_blank" rel="noopener" className="glass flex items-center gap-3 rounded-2xl p-5 hover:border-gold/40">
|
|||
|
|
<span className="text-lg">📷</span> <span>اینستاگرام</span>
|
|||
|
|
</a>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|