Initial import of 1407 block sources under blocks/

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-11 21:21:29 +03:30
commit 85836ef183
1412 changed files with 303567 additions and 0 deletions
@@ -0,0 +1,153 @@
+"use client";
+
+import { useState } from "react";
+
+import { Switch } from "@/components/ui/switch";
+import { cn } from "@/lib/utils";
+
+interface IntegrationItem {
+  image: string;
+  title: string;
+  description: string;
+  isConnected?: boolean;
+  className?: string;
+}
+
+interface IntegrationRowProps {
+  integration: IntegrationItem;
+  onToggle?: (title: string) => void;
+}
+
+const IntegrationRow = ({ integration, onToggle }: IntegrationRowProps) => {
+  return (
+    <div className="flex items-center justify-between gap-4 py-4">
+      <div className="flex items-center gap-4">
+        <div className="flex size-12 items-center justify-center rounded-lg border bg-muted/50">
+          <img
+            src={integration.image}
+            alt={`لوگوی ${integration.title}`}
+            className={cn("size-7", integration.className)}
+          />
+        </div>
+        <div className="space-y-0.5">
+          <p className="font-medium">{integration.title}</p>
+          <p className="text-sm text-muted-foreground">
+            {integration.description}
+          </p>
+        </div>
+      </div>
+      <Switch
+        checked={integration.isConnected}
+        onCheckedChange={() => onToggle?.(integration.title)}
+      />
+    </div>
+  );
+};
+
+interface SettingsIntegrations5Props {
+  className?: string;
+  heading?: string;
+  subHeading?: string;
+  integrations?: IntegrationItem[];
+}
+
+const SettingsIntegrations5 = ({
+  className,
+  heading = "اپلیکیشن‌های متصل",
+  subHeading = "مدیریت اپلیکیشن‌هایی که به حساب شما دسترسی دارند.",
+  integrations: initialIntegrations = [
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/slack-icon.svg",
+      title: "Slack",
+      description: "اعلان‌ها را در فضای کاری پیام‌رسان تیمی دریافت کنید",
+      isConnected: true,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/google-icon.svg",
+      title: "فضای ابری",
+      description: "اسناد و فایل‌ها را به‌صورت خودکار همگام‌سازی کنید",
+      isConnected: true,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/notion-icon.svg",
+      title: "Notion",
+      description: "داده‌ها را به فضای کاری یادداشت‌برداری صادر کنید",
+      isConnected: false,
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/github-icon.svg",
+      title: "GitHub",
+      description: "مخازن را برای پیگیری مسائل متصل کنید",
+      isConnected: true,
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/figma-icon.svg",
+      title: "Figma",
+      description: "طرح‌ها را مستقیماً از طراحی رابط وارد کنید",
+      isConnected: false,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/jira-icon.svg",
+      title: "Jira",
+      description: "وظایف و مسائل را با پروژه‌های Jira همگام کنید",
+      isConnected: true,
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/linear-icon.svg",
+      title: "Linear",
+      description: "مسائل را در Linear ایجاد و پیگیری کنید",
+      isConnected: false,
+      className: "dark:invert",
+    },
+    {
+      image:
+        "/block-media/shadcnblocks/block/logos/stripe-icon.svg",
+      title: "Stripe",
+      description: "پرداخت‌ها را پردازش کنید و تراکنش‌ها را مشاهده کنید",
+      isConnected: true,
+    },
+  ],
+}: SettingsIntegrations5Props) => {
+  const [integrations, setIntegrations] = useState(initialIntegrations);
+
+  const handleToggle = (title: string) => {
+    setIntegrations((prev) =>
+      prev.map((i) =>
+        i.title === title ? { ...i, isConnected: !i.isConnected } : i,
+      ),
+    );
+  };
+
+  return (
+    <section className={cn("py-32", className)}>
+      <div className="container max-w-2xl">
+        <div className="rounded-lg border">
+          <div className="border-b p-6">
+            <h2 className="text-lg font-semibold">{heading}</h2>
+            <p className="text-sm text-muted-foreground">{subHeading}</p>
+          </div>
+          <div className="divide-y px-6">
+            {integrations.map((integration) => (
+              <IntegrationRow
+                key={integration.title}
+                integration={integration}
+                onToggle={handleToggle}
+              />
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { SettingsIntegrations5 };