reui-blocks/blocks/settings-integrations3a.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 h-full cursor-pointer flex-col gap-4 p-4 hover:bg-muted/50"
    >
      <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-px bg-muted sm:grid-cols-2 md:grid-cols-3">
      {integrations.map((integration, i) => {
        return (
          <li
            key={`integration-${i}-${integration.title}`}
            className="bg-background"
          >
            <IntegrationCard integration={integration} />
          </li>
        );
      })}
    </ul>
  );
};

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

const SettingsIntegrations3a = ({
  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: "فضای ابری",
      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",
    },
  ],
}: SettingsIntegrations3aProps) => {
  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 { SettingsIntegrations3a };