88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
import { ArrowUpRight } from "lucide-react";
|
|
import { FaDiscord, FaGithub, FaLinkedin, FaXTwitter } from "react-icons/fa6";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface SocialLink {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
url: string;
|
|
}
|
|
|
|
interface Community2Props {
|
|
heading?: string;
|
|
description?: string;
|
|
socialLinks?: SocialLink[];
|
|
className?: string;
|
|
}
|
|
|
|
const Community2 = ({
|
|
heading = "به جامعه ما بپیوندید",
|
|
description =
|
|
"با متخصصان صنعت ارتباط بگیرید، دانش خود را به اشتراک بگذارید و از آخرین تحولات و به‌روزرسانی‌ها باخبر شوید.",
|
|
socialLinks = [
|
|
{
|
|
icon: <FaXTwitter className="size-5" />,
|
|
title: "X",
|
|
description: "آخرین اخبار، به‌روزرسانی‌ها و اطلاعیه‌های رسمی را دنبال کنید.",
|
|
url: "https://x.com/ShadcnBlocks",
|
|
},
|
|
{
|
|
icon: <FaLinkedin className="size-5" />,
|
|
title: "LinkedIn",
|
|
description: "با تیم ما در LinkedIn ارتباط حرفه‌ای برقرار کنید و از فرصت‌های همکاری باخبر شوید.",
|
|
url: "https://www.linkedin.com/company/ShadcnBlocks",
|
|
},
|
|
{
|
|
icon: <FaGithub className="size-5" />,
|
|
title: "گیت‌هاب",
|
|
description: "در توسعه پروژه‌های متن‌باز مشارکت کنید، ایده ارائه دهید و باگ‌ها را گزارش کنید.",
|
|
url: "https://github.com/ShadcnBlocks",
|
|
},
|
|
{
|
|
icon: <FaDiscord className="size-5" />,
|
|
title: "دیسکورد",
|
|
description:
|
|
"با سایر توسعه‌دهندگان در دیسکورد گفتگو کنید، سؤال بپرسید و از تجربیات اعضای جامعه بهره‌مند شوید.",
|
|
url: "#",
|
|
},
|
|
],
|
|
className,
|
|
}: Community2Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h2 className="mb-5 text-xl font-semibold md:text-3xl">{heading}</h2>
|
|
<p className="font-medium text-muted-foreground md:text-xl">
|
|
{description}
|
|
</p>
|
|
<div className="mt-10 grid grid-cols-1 gap-3 md:grid-cols-2 lg:grid-cols-4">
|
|
{socialLinks.map((link, index) => (
|
|
<a
|
|
key={index}
|
|
className="group rounded-md border border-border p-6"
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<div className="flex items-center justify-between gap-4">
|
|
{link.icon}
|
|
<ArrowUpRight className="size-4 translate-x-2 translate-y-2 opacity-0 transition-all group-hover:translate-x-0 group-hover:translate-y-0 group-hover:opacity-100 rtl:-translate-x-2 rtl:rotate-180" />
|
|
</div>
|
|
<div className="mt-4">
|
|
<h3 className="mb-1 font-semibold">{link.title}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{link.description}
|
|
</p>
|
|
</div>
|
|
</a>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Community2 };
|