Initial import of 1407 block sources under blocks/
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
@@ -0,0 +1,207 @@
|
||||
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: "فضای ابری",
|
||||
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",
|
||||
},
|
||||
],
|
||||
}: 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 };
|
||||
Reference in New Issue
Block a user