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,218 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
|
||||
import { ScrollableTabsList } from "@/components/shadcnblocks/scrollable-tabslist";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface IntegrationItem {
|
||||
image: string;
|
||||
title: string;
|
||||
description: string;
|
||||
isConnected?: boolean;
|
||||
category: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
interface IntegrationCardProps {
|
||||
integration: IntegrationItem;
|
||||
onToggle?: (title: string) => void;
|
||||
}
|
||||
|
||||
const IntegrationCard = ({ integration, onToggle }: IntegrationCardProps) => {
|
||||
return (
|
||||
<div className="flex items-start gap-4 rounded-lg border p-4 text-start">
|
||||
<img
|
||||
src={integration.image}
|
||||
alt={`لوگوی ${integration.title}`}
|
||||
className={cn("size-10 shrink-0", integration.className)}
|
||||
/>
|
||||
<div className="min-w-0 flex-1 space-y-1">
|
||||
<p className="font-medium">{integration.title}</p>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{integration.description}
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex shrink-0 flex-col items-end gap-2 sm:flex-row sm:items-center">
|
||||
{integration.isConnected && (
|
||||
<Badge variant="secondary" className="bg-green-100 text-green-800">
|
||||
متصل
|
||||
</Badge>
|
||||
)}
|
||||
<Button
|
||||
variant={integration.isConnected ? "outline" : "default"}
|
||||
size="sm"
|
||||
onClick={() => onToggle?.(integration.title)}
|
||||
>
|
||||
{integration.isConnected ? "قطع اتصال" : "اتصال"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface SettingsIntegrations4Props {
|
||||
className?: string;
|
||||
heading?: string;
|
||||
subHeading?: string;
|
||||
integrations?: IntegrationItem[];
|
||||
}
|
||||
|
||||
const SettingsIntegrations4 = ({
|
||||
className,
|
||||
heading = "یکپارچه‌سازی‌ها",
|
||||
subHeading = "ابزارها و سرویس‌های محبوبتان را متصل کنید و گردش کار خود را ساده‌تر کنید.",
|
||||
integrations: initialIntegrations = [
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/slack-icon.svg",
|
||||
title: "Slack",
|
||||
description: "اعلان‌ها و به‌روزرسانی‌ها را به کانال‌های تیم ارسال کنید.",
|
||||
isConnected: true,
|
||||
category: "communication",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/discord-icon.svg",
|
||||
title: "Discord",
|
||||
description: "سرور گفتگوی تیمی خود را برای هشدارهای لحظه‌ای متصل کنید.",
|
||||
category: "communication",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/microsoft-teams-icon.svg",
|
||||
title: "Microsoft Teams",
|
||||
description: "با Teams برای همکاری یکپارچه ادغام شوید.",
|
||||
category: "communication",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/google-icon.svg",
|
||||
title: "فضای ابری",
|
||||
description: "به فایل‌های فضای ابری دسترسی داشته باشید و آن‌ها را همگام‌سازی کنید.",
|
||||
isConnected: true,
|
||||
category: "storage",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/dropbox-icon.svg",
|
||||
title: "Dropbox",
|
||||
description: "فایل‌ها را به‌صورت امن در فضای ابری ذخیره و به اشتراک بگذارید.",
|
||||
category: "storage",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/microsoft-onedrive-icon.svg",
|
||||
title: "OneDrive",
|
||||
description: "فایل‌ها و پوشه‌های OneDrive را همگام‌سازی کنید.",
|
||||
category: "storage",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/github-icon.svg",
|
||||
title: "GitHub",
|
||||
description: "مخازن را متصل کنید و گردش کارها را خودکار کنید.",
|
||||
isConnected: true,
|
||||
category: "development",
|
||||
className: "dark:invert",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/gitlab-icon.svg",
|
||||
title: "GitLab",
|
||||
description: "با GitLab برای خطوط استقرار خودکار ادغام شوید.",
|
||||
category: "development",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/vercel-icon.svg",
|
||||
title: "Vercel",
|
||||
description: "اپلیکیشن‌های وب را مستقر کنید و پیش‌نمایش بگیرید.",
|
||||
category: "development",
|
||||
className: "dark:invert",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/stripe-icon.svg",
|
||||
title: "Stripe",
|
||||
description: "پرداخت‌ها را پردازش کنید و اشتراک‌ها را مدیریت کنید.",
|
||||
isConnected: true,
|
||||
category: "payments",
|
||||
},
|
||||
{
|
||||
image:
|
||||
"/block-media/shadcnblocks/block/logos/paypal-icon.svg",
|
||||
title: "PayPal",
|
||||
description: "پرداخت‌های کیف پول دیجیتال را از مشتریان بپذیرید.",
|
||||
category: "payments",
|
||||
},
|
||||
],
|
||||
}: SettingsIntegrations4Props) => {
|
||||
const [integrations, setIntegrations] = useState(initialIntegrations);
|
||||
|
||||
const categories = [...new Set(integrations.map((i) => i.category))];
|
||||
|
||||
const handleToggle = (title: string) => {
|
||||
setIntegrations((prev) =>
|
||||
prev.map((i) =>
|
||||
i.title === title ? { ...i, isConnected: !i.isConnected } : i,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
const getCategoryLabel = (category: string) => {
|
||||
const labels: Record<string, string> = {
|
||||
communication: "ارتباطات",
|
||||
storage: "ذخیره‌سازی",
|
||||
development: "توسعه",
|
||||
payments: "پرداخت",
|
||||
};
|
||||
return labels[category] ?? category;
|
||||
};
|
||||
|
||||
return (
|
||||
<section className={cn("py-32", className)}>
|
||||
<div className="container max-w-4xl">
|
||||
<div className="space-y-2 border-b pb-6 text-start">
|
||||
<h2 className="text-xl font-semibold tracking-tight">{heading}</h2>
|
||||
<p className="text-sm text-muted-foreground">{subHeading}</p>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue={categories[0]} className="mt-6">
|
||||
<div className="flex w-full justify-start">
|
||||
<ScrollableTabsList className="rounded-none">
|
||||
<TabsList className="overflow-y-hidden">
|
||||
{categories.map((category) => (
|
||||
<TabsTrigger key={category} value={category}>
|
||||
{getCategoryLabel(category)}
|
||||
</TabsTrigger>
|
||||
))}
|
||||
</TabsList>
|
||||
</ScrollableTabsList>
|
||||
</div>
|
||||
|
||||
{categories.map((category) => (
|
||||
<TabsContent key={category} value={category} className="mt-6 text-start">
|
||||
<div className="space-y-4">
|
||||
{integrations
|
||||
.filter((i) => i.category === category)
|
||||
.map((integration) => (
|
||||
<IntegrationCard
|
||||
key={integration.title}
|
||||
integration={integration}
|
||||
onToggle={handleToggle}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</TabsContent>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { SettingsIntegrations4 };
|
||||
Reference in New Issue
Block a user