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: "Google Drive",
      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 };