init repo
This commit is contained in:
135
app/integrations/page.tsx
Normal file
135
app/integrations/page.tsx
Normal file
@@ -0,0 +1,135 @@
|
||||
"use client"
|
||||
|
||||
import { Topbar } from "@/components/topbar"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Search, Slack, Calendar, Mail, Zap, Github, Chrome, Database, MessageSquare } from "lucide-react"
|
||||
import { useTranslation } from "@/lib/i18n"
|
||||
|
||||
const integrationDescKeys: Record<string, string> = {
|
||||
Slack: "integrations.slackDesc",
|
||||
"Google Calendar": "integrations.calendarDesc",
|
||||
HubSpot: "integrations.hubspotDesc",
|
||||
Zapier: "integrations.zapierDesc",
|
||||
Gmail: "integrations.gmailDesc",
|
||||
GitHub: "integrations.githubDesc",
|
||||
"Chrome Extension": "integrations.chromeDesc",
|
||||
"Microsoft Teams": "integrations.teamsDesc",
|
||||
}
|
||||
|
||||
const categoryKeys: Record<string, string> = {
|
||||
All: "integrations.all",
|
||||
Communication: "integrations.communication",
|
||||
Productivity: "integrations.productivity",
|
||||
CRM: "integrations.crm",
|
||||
Automation: "integrations.automation",
|
||||
Email: "integrations.email",
|
||||
Development: "integrations.development",
|
||||
Browser: "integrations.browser",
|
||||
}
|
||||
|
||||
const integrations = [
|
||||
{ id: 1, name: "Slack", icon: Slack, connected: true, category: "Communication" },
|
||||
{ id: 2, name: "Google Calendar", icon: Calendar, connected: true, category: "Productivity" },
|
||||
{ id: 3, name: "HubSpot", icon: Database, connected: false, category: "CRM" },
|
||||
{ id: 4, name: "Zapier", icon: Zap, connected: false, category: "Automation" },
|
||||
{ id: 5, name: "Gmail", icon: Mail, connected: true, category: "Email" },
|
||||
{ id: 6, name: "GitHub", icon: Github, connected: false, category: "Development" },
|
||||
{ id: 7, name: "Chrome Extension", icon: Chrome, connected: false, category: "Browser" },
|
||||
{ id: 8, name: "Microsoft Teams", icon: MessageSquare, connected: false, category: "Communication" },
|
||||
]
|
||||
|
||||
const categories = ["All", "Communication", "Productivity", "CRM", "Automation", "Email", "Development", "Browser"]
|
||||
|
||||
export default function Integrations() {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<Topbar />
|
||||
<div className="flex-1 p-6 space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight">{t("integrations.title")}</h1>
|
||||
<p className="text-muted-foreground">{t("integrations.description")}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-4 w-4" />
|
||||
<Input placeholder={t("integrations.search")} className="pl-10" />
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
{categories.map((category) => (
|
||||
<Button key={category} variant={category === "All" ? "default" : "outline"} size="sm">
|
||||
{t(categoryKeys[category])}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
|
||||
{integrations.map((integration) => (
|
||||
<Card key={integration.id} className="relative">
|
||||
<CardHeader>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-10 w-10 items-center justify-center rounded-lg bg-muted">
|
||||
<integration.icon className="h-5 w-5" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-lg">{integration.name}</CardTitle>
|
||||
<Badge variant="secondary" className="text-xs">
|
||||
{t(categoryKeys[integration.category])}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
{integration.connected && <Badge className="bg-green-100 text-green-800">{t("integrations.connected")}</Badge>}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="mb-4">{t(integrationDescKeys[integration.name])}</CardDescription>
|
||||
<Button className="w-full" variant={integration.connected ? "outline" : "default"}>
|
||||
{integration.connected ? t("integrations.manage") : t("integrations.connect")}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>{t("integrations.popularTitle")}</CardTitle>
|
||||
<CardDescription>{t("integrations.popularDesc")}</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid gap-4 md:grid-cols-3">
|
||||
<div className="flex items-center gap-3 p-3 border rounded-lg">
|
||||
<Slack className="h-8 w-8 text-purple-600" />
|
||||
<div>
|
||||
<p className="font-medium">Slack</p>
|
||||
<p className="text-sm text-muted-foreground">{t("integrations.slackPopular")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 border rounded-lg">
|
||||
<Calendar className="h-8 w-8 text-blue-600" />
|
||||
<div>
|
||||
<p className="font-medium">Google Calendar</p>
|
||||
<p className="text-sm text-muted-foreground">{t("integrations.calendarPopular")}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-3 p-3 border rounded-lg">
|
||||
<Mail className="h-8 w-8 text-red-600" />
|
||||
<div>
|
||||
<p className="font-medium">Gmail</p>
|
||||
<p className="text-sm text-muted-foreground">{t("integrations.gmailPopular")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user