reui-blocks/blocks/settings-integrations2.tsx

import { ArrowRight } from "lucide-react";

import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";

interface IntegrationItem {
  image: string;
  title: string;
  description: string;
  isConnected?: boolean;
  link: string;
  className?: string;
}

interface CtaText {
  title: string;
  ctaText: string;
  ctaLink: string;
}

interface SettingsIntegrations2Props {
  heading?: string;
  description?: CtaText[];
  integrations?: IntegrationItem[];
}

const SettingsIntegrations2 = ({
  heading = "یکپارچه‌سازی‌ها",
  description = [
    {
      title:
        "با اتصال اپلیکیشن‌ها و سرویس‌های محبوبتان، گردش کار خود را بهبود دهید.",
      ctaText: "بیشتر بدانید",
      ctaLink: "https://ShadcnBlocks",
    },
    {
      title: "سؤالی درباره راه‌اندازی یکپارچه‌سازی‌ها دارید؟",
      ctaText: "صحبت با فروش",
      ctaLink: "https://ShadcnBlocks",
    },
  ],
  integrations = [
    {
      image:
        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
      title: "Slack",
      description: "اعلان‌ها و به‌روزرسانی‌ها را به کانال‌های تیم ارسال کنید.",
      isConnected: true,
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/mainline/logos/drive.svg",
      title: "فضای ابری",
      description: "به فایل‌های فضای ابری دسترسی داشته باشید و آن‌ها را همگام‌سازی کنید.",
      isConnected: true,
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
      title: "Notion",
      description: "صفحات و پایگاه‌های داده فضای کاری را همگام‌سازی کنید.",
      isConnected: true,
      link: "https://ShadcnBlocks",
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/mainline/logos/jira.svg",
      title: "Jira",
      description: "مسائل را پیگیری کنید و پروژه‌های چابک خود را مدیریت کنید.",
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/mainline/logos/asana.svg",
      title: "Asana",
      description: "وظایف را مدیریت کنید و با تیم همکاری کنید.",
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
      title: "Dropbox",
      description: "فایل‌ها را به‌صورت امن در فضای ابری ذخیره و به اشتراک بگذارید.",
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
      title: "Figma",
      description: "طرح‌ها را وارد کنید و روی نمونه‌ها همکاری کنید.",
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/github-icon.svg",
      title: "GitHub",
      description: "مخازن را متصل کنید و گردش کارها را خودکار کنید.",
      isConnected: true,
      link: "https://ShadcnBlocks",
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/ecommerce/payment-methods/stripe.svg",
      title: "Stripe",
      description: "پرداخت‌ها را پردازش کنید و اشتراک‌ها را مدیریت کنید.",
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/mainline/logos/confluence.svg",
      title: "Confluence",
      description: "مستندات تیم را ایجاد و به اشتراک بگذارید.",
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/mainline/logos/monday.svg",
      title: "Monday",
      description: "گردش کارها را ساماندهی کنید و پیشرفت پروژه را پیگیری کنید.",
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/mainline/logos/excel.svg",
      title: "Excel",
      description: "داده‌های جدول را به‌راحتی وارد و صادر کنید.",
      isConnected: true,
      link: "https://ShadcnBlocks",
    },
    {
      image:
        "/block-media/shadcnblocks/block/logos/vercel-icon.svg",
      title: "Vercel",
      description: "اپلیکیشن‌های وب را مستقر کنید و پیش‌نمایش بگیرید.",
      isConnected: true,
      link: "https://ShadcnBlocks",
      className: "dark:invert",
    },
    {
      image:
        "/block-media/shadcnblocks/block/mainline/logos/retool.svg",
      title: "Retool",
      description: "ابزارها و داشبوردهای داخلی سفارشی بسازید.",
      link: "https://ShadcnBlocks",
      className: "dark:invert",
    },
  ],
}: SettingsIntegrations2Props) => {
  return (
    <section className="py-32">
      <div className="container max-w-4xl">
        <div className="flex flex-col gap-3">
          <p className="text-xl font-semibold tracking-tight sm:text-xl">
            {heading}
          </p>
          <div className="space-y-1 sm:space-y-0">
            {description.map((item, i) => {
              return (
                <p
                  key={`description-${i}`}
                  className="flex flex-wrap items-center gap-1 gap-y-0 text-xs text-muted-foreground sm:text-sm sm:leading-tight"
                >
                  {item.title}
                  <a href={item.ctaLink} className="underline">
                    {item.ctaText}
                  </a>
                </p>
              );
            })}
          </div>
          <ul className="mt-8">
            {integrations.map((integration, i) => {
              return (
                <li
                  key={`integration-${i}-${integration.title}`}
                  className="border-t last:border-b"
                >
                  <a
                    href={integration.link}
                    className="group flex cursor-pointer items-center gap-4 py-6 hover:bg-muted/50 sm:px-2"
                  >
                    <img
                      src={integration.image}
                      alt={integration.title}
                      className={cn("size-6", integration.className)}
                    />
                    <div className="flex-1 text-sm">
                      <p className="font-medium">{integration.title}</p>
                      <p className="text-xs text-muted-foreground">
                        {integration.description}
                      </p>
                    </div>
                    {integration.isConnected ? (
                      <div>
                        <Badge className="bg-green-100 text-green-800">
                          متصل
                        </Badge>
                      </div>
                    ) : (
                      <div className="opacity-0 group-hover:opacity-100">
                        <ArrowRight className="size-5 text-muted-foreground rtl:rotate-180" />
                      </div>
                    )}
                  </a>
                </li>
              );
            })}
          </ul>
        </div>
      </div>
    </section>
  );
};

export { SettingsIntegrations2 };