75 lines
2.1 KiB
TypeScript
75 lines
2.1 KiB
TypeScript
import { FaDiscord, FaGithub, FaXTwitter } from "react-icons/fa6";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface SocialLink {
|
|
icon: React.ReactNode;
|
|
url: string;
|
|
label: string;
|
|
}
|
|
|
|
interface Community1Props {
|
|
logo?: string;
|
|
heading?: string;
|
|
headingHighlight?: string;
|
|
socialLinks?: SocialLink[];
|
|
className?: string;
|
|
}
|
|
|
|
const Community1 = ({
|
|
logo = "/block-media/shadcnblocks/block/block-1.svg",
|
|
heading = "در جامعه ما عضو شوید",
|
|
headingHighlight = "شبکهای از متخصصان، طراحان و توسعهدهندگان پیشرو",
|
|
socialLinks = [
|
|
{
|
|
icon: <FaXTwitter />,
|
|
url: "https://x.com/ShadcnBlocks",
|
|
label: "در X همراه ما باشید",
|
|
},
|
|
{
|
|
icon: <FaGithub />,
|
|
url: "https://github.com/ShadcnBlocks",
|
|
label: "پروژههای ما را در گیتهاب دنبال کنید",
|
|
},
|
|
{
|
|
icon: <FaDiscord />,
|
|
url: "#",
|
|
label: "به جمع ما در دیسکورد بپیوندید",
|
|
},
|
|
],
|
|
className,
|
|
}: Community1Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="flex flex-col items-center gap-5">
|
|
<img src={logo} alt="لوگو" className="size-10" />
|
|
<h2 className="text-center text-3xl font-semibold">
|
|
{heading}
|
|
<br />
|
|
<span className="text-muted-foreground/80">{headingHighlight}</span>
|
|
</h2>
|
|
<div className="flex items-center gap-4">
|
|
{socialLinks.map((link, index) => (
|
|
<Button key={index} size="lg" variant="outline" asChild>
|
|
<a
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={link.label}
|
|
className="size-10"
|
|
>
|
|
{link.icon}
|
|
</a>
|
|
</Button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Community1 };
|