reui-blocks/blocks/settings-integrations3.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 IntegrationCardProps {
  integration: IntegrationItem;
}

const IntegrationCard = ({ integration }: IntegrationCardProps) => {
  return (
    <a
      href={integration.link}
      className="group flex cursor-pointer flex-col gap-4 rounded-lg border p-4 hover:bg-muted/30 hover:shadow-md"
    >
      <div className="flex items-start justify-between gap-4">
        <img
          src={integration.image}
          alt={integration.title}
          className={cn("size-10 sm:size-16", integration.className)}
        />
        {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>
        )}
      </div>
      <div className="flex-1 text-base">
        <p className="font-medium">{integration.title}</p>
        <p className="text-sm text-muted-foreground">
          {integration.description}
        </p>
      </div>
    </a>
  );
};

interface IntegrationListProps {
  integrations: IntegrationItem[];
}

const IntegrationList = ({ integrations }: IntegrationListProps) => {
  return (
    <ul className="mt-8 grid gap-4 sm:grid-cols-2 md:grid-cols-3">
      {integrations.map((integration, i) => {
        return (
          <li key={`integration-${i}-${integration.title}`}>
            <IntegrationCard integration={integration} />
          </li>
        );
      })}
    </ul>
  );
};

interface SettingsIntegrations3Props {
  heading?: string;
  subHeading?: string;
  integrations?: IntegrationItem[];
}

const SettingsIntegrations3 = ({
  heading = "ابزارهای تیم فروش را متصل کنید",
  subHeading = "با یکپارچه‌سازی‌ها، لید و تیکت را همگام کنید و زمان دستی تیم را کم کنید.",
  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: "پیشنهادها و فایل‌های قرارداد را با رکوردهای CRM همگام کنید.",
      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: "وب‌هوک‌ها و گردش‌کار استقرار را به CRM متصل کنید.",
      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: "ابزارهای داخلی عملیات فروش را روی داده‌های CRM بسازید.",
      link: "https://ShadcnBlocks",
      className: "dark:invert",
    },
  ],
}: SettingsIntegrations3Props) => {
  return (
    <section className="py-32">
      <div className="container max-w-5xl">
        <div className="flex flex-col gap-3">
          <p className="text-xl font-semibold tracking-tight sm:text-3xl">
            {heading}
          </p>
          <p className="text-lg font-medium text-muted-foreground">
            {subHeading}
          </p>

          <IntegrationList integrations={integrations} />
        </div>
      </div>
    </section>
  );
};

export { SettingsIntegrations3 };