reui-blocks/blocks/community7.tsx

import {
  FaDiscord,
  FaGithub,
  FaLinkedin,
  FaSlack,
  FaXTwitter,
} from "react-icons/fa6";
import { SiBluesky } from "react-icons/si";

import { cn } from "@/lib/utils";

interface Community7Props {
  className?: string;
}

const Community7 = ({ className }: Community7Props) => {
  const communityCards = [
    {
      icon: <FaXTwitter className="h-8 w-8 text-foreground/80" />,
      title: "X",
      description: "آخرین مقالات، آموزش‌ها و به‌روزرسانی‌های محصول را دنبال کنید.",
      link: "https://x.com/ShadcnBlocks",
      status: "online",
      followers: 12000,
    },
    {
      icon: <FaGithub className="h-8 w-8 text-foreground/80" />,
      title: "گیت‌هاب",
      description: "در توسعه مشارکت کنید، Issue ثبت کنید و از پروژه حمایت کنید.",
      link: "https://github.com/shadcn/blocks",
      status: "offline",
      followers: 8000,
    },
    {
      icon: <FaDiscord className="h-8 w-8 text-foreground/80" />,
      title: "دیسکورد",
      description: "با اعضای جامعه گفتگو کنید، تجربه‌های خود را به اشتراک بگذارید و پاسخ پرسش‌های خود را دریافت کنید.",
      link: "https://discord.gg",
      status: "online",
      followers: 3500,
    },
    {
      icon: <FaLinkedin className="h-8 w-8 text-foreground/80" />,
      title: "LinkedIn",
      description: "از طریق لینکدین با تیم ما در ارتباط باشید و شبکه حرفه‌ای خود را توسعه دهید.",
      link: "https://www.linkedin.com/company/shadcn",
      status: "online",
      followers: 5000,
    },
    {
      icon: <FaSlack className="h-8 w-8 text-foreground/80" />,
      title: "Slack",
      description: "برای همکاری سریع و ارتباط مستقیم به فضای پیام‌رسان تیمی ما بپیوندید.",
      link: "https://slack.com/shadcn",
      status: "offline",
      followers: 1200,
    },
    {
      icon: <SiBluesky className="h-8 w-8 text-foreground/80" />,
      title: "Bluesky",
      description: "ما را در Bluesky دنبال کنید و در گفتگوهای جامعه مشارکت داشته باشید.",
      link: "https://bsky.app/profile/shadcn.bsky.social",
      status: "online",
      followers: 900,
    },
  ];

  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container flex flex-col items-center justify-center">
        <h2 className="mb-4 text-center text-xl font-bold tracking-tight md:text-2xll xl:text-2xll">
          در شبکه‌های اجتماعی همراه ما باشید
                          </h2>
        <p className="mb-8 max-w-2xl text-center text-lg font-normal text-muted-foreground md:text-xl">
          ما را در شبکه‌های اجتماعی دنبال کنید و از آخرین محتوا و اخبار باخبر شوید.
                          </p>
        <div className="mb-10 grid w-full grid-cols-1 gap-6 md:grid-cols-3">
          {communityCards.map((card) => (
            <div
              key={card.title}
              className="group flex flex-1 flex-col items-center gap-2 rounded-2xl border-0 bg-background p-8 transition-colors duration-200 hover:bg-muted"
            >
              <div className="flex flex-col items-center gap-2">
                {card.icon}
                <h5 className="mb-1 text-lg font-semibold">{card.title}</h5>
                <a
                  href={card.link}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="mb-1 text-xs break-all underline"
                >
                  {card.link}
                </a>
                <div className="mt-2 flex items-center justify-center gap-2">
                  <span
                    className={`h-2 w-2 rounded-full ${card.status === "online" ? "bg-green-500" : "bg-gray-400"}`}
                    title={card.status === "online" ? "آنلاین" : "آفلاین"}
                  />
                  <span className="text-xs text-muted-foreground">
                    {card.status === "online" ? "آنلاین" : "آفلاین"}
                  </span>
                  <span className="mx-2 text-xs text-muted-foreground">•</span>
                  <span className="text-xs font-medium text-foreground">
                    {card.followers.toLocaleString("fa-IR")} دنبال‌کننده
                  </span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export { Community7 };