123 lines
3.9 KiB
TypeScript
123 lines
3.9 KiB
TypeScript
import React from 'react';
|
|
import { Link } from '@tanstack/react-router';
|
|
import {
|
|
Slack,
|
|
Discord,
|
|
Webhook,
|
|
Calendar,
|
|
Mail,
|
|
ArrowRight,
|
|
Lock
|
|
} from 'lucide-react';
|
|
|
|
interface Integration {
|
|
id: string;
|
|
name: string;
|
|
description: string;
|
|
icon: React.ElementType;
|
|
status: 'available' | 'coming-soon';
|
|
link?: string;
|
|
}
|
|
|
|
const INTEGRATIONS: Integration[] = [
|
|
{
|
|
id: 'slack',
|
|
name: 'Slack',
|
|
description: 'Get notifications and updates directly in your Slack channels.',
|
|
icon: Slack,
|
|
status: 'coming-soon',
|
|
},
|
|
{
|
|
id: 'discord',
|
|
name: 'Discord',
|
|
description: 'Connect your workspace to Discord for community alerts.',
|
|
icon: Discord,
|
|
status: 'coming-soon',
|
|
},
|
|
{
|
|
id: 'webhooks',
|
|
name: 'Webhooks',
|
|
description: 'Send real-time data to any external URL via HTTP POST.',
|
|
icon: Webhook,
|
|
status: 'available',
|
|
link: '/webhooks',
|
|
},
|
|
{
|
|
id: 'calendar',
|
|
name: 'Google Calendar',
|
|
description: 'Sync your project deadlines and meetings with Google.',
|
|
icon: Calendar,
|
|
status: 'coming-soon',
|
|
},
|
|
{
|
|
id: 'email',
|
|
name: 'Email Notifications',
|
|
description: 'Configure how and when you receive email alerts.',
|
|
icon: Mail,
|
|
status: 'available',
|
|
link: '/settings',
|
|
},
|
|
];
|
|
|
|
export default function IntegrationsPage() {
|
|
return (
|
|
<div className="max-w-6xl mx-auto p-6">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-slate-900 dark:text-white">Integrations</h1>
|
|
<p className="text-slate-500 dark:text-slate-400 mt-2">
|
|
Connect EmberClone with your favorite tools to automate your workflow.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{INTEGRATIONS.map((integration) => {
|
|
const Icon = integration.icon;
|
|
const isComingSoon = integration.status === 'coming-soon';
|
|
|
|
return (
|
|
<div
|
|
key={integration.id}
|
|
className="group relative p-6 bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-700 rounded-xl transition-all duration-200 hover:shadow-lg hover:border-indigo-500 dark:hover:border-indigo-400"
|
|
>
|
|
<div className="flex items-start justify-between mb-4">
|
|
<div className="p-3 bg-indigo-50 dark:bg-indigo-900/30 text-indigo-600 dark:text-indigo-400 rounded-lg">
|
|
<Icon size={24} />
|
|
</div>
|
|
{isComingSoon && (
|
|
<span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-slate-100 text-slate-600 dark:bg-slate-700 dark:text-slate-400">
|
|
<Lock size={12} className="mr-1" />
|
|
Coming Soon
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<h3 className="text-lg font-semibold text-slate-900 dark:text-white mb-2">
|
|
{integration.name}
|
|
</h3>
|
|
<p className="text-sm text-slate-500 dark:text-slate-400 mb-6 min-h-[40px]">
|
|
{integration.description}
|
|
</p>
|
|
|
|
{isComingSoon ? (
|
|
<button
|
|
disabled
|
|
className="w-full py-2 px-4 bg-slate-100 dark:bg-slate-700 text-slate-400 dark:text-slate-500 rounded-lg text-sm font-medium cursor-not-allowed"
|
|
>
|
|
Configure
|
|
</button>
|
|
) : (
|
|
<Link
|
|
to={integration.link || '/'}
|
|
className="flex items-center justify-center w-full py-2 px-4 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium transition-colors group"
|
|
>
|
|
Configure
|
|
<ArrowRight size={16} className="ml-2 transition-transform group-hover:translate-x-1" />
|
|
</Link>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
} |