fix: remove shadcn deps from dashboard pages, restyle services & settings to editorial design
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m29s
All checks were successful
Deploy to Production / Build and Deploy (push) Successful in 1m29s
- Profile: replace shadcn Select with native select, remove unused shadcn imports (fixes runtime crash) - Services: rewrite from shadcn Card/Badge to editorial-card design - Settings: rewrite from shadcn Card/Button/Badge to editorial-card design Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
@@ -1,8 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Zap, CheckCircle2, Lock, Loader2, Globe, Brain } from 'lucide-react';
|
||||
import { API_BASE } from '@/lib/config';
|
||||
import { useI18n } from '@/lib/i18n';
|
||||
@@ -51,102 +49,106 @@ export default function TranslationServicesPage() {
|
||||
const llmProviders = providers.filter((p) => p.mode === "llm");
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6 p-6 lg:p-8 max-w-2xl">
|
||||
<div>
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<Zap className="h-5 w-5 text-primary" />
|
||||
<h1 className="text-2xl font-bold text-foreground">{t('services.title')}</h1>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{t('services.subtitle')}
|
||||
</p>
|
||||
<div className="max-w-4xl mx-auto w-full p-6 lg:p-8">
|
||||
{/* ── Editorial Header ───────────────────────────────────── */}
|
||||
<div className="mb-12">
|
||||
<span className="accent-pill mb-4 block w-fit">{t('services.title')}</span>
|
||||
<h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
|
||||
{t('services.title')}
|
||||
</h1>
|
||||
<p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('services.subtitle')}</p>
|
||||
</div>
|
||||
|
||||
{isLoading ? (
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Loader2 className="size-4 animate-spin" />
|
||||
<span>{t('services.loading')}</span>
|
||||
<div className="flex items-center justify-center min-h-[30vh]">
|
||||
<div className="text-center space-y-4">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-4 border-brand-muted border-t-brand-accent mx-auto"></div>
|
||||
<p className="text-[9px] font-black text-brand-dark/40 dark:text-white/40 uppercase tracking-widest">{t('services.loading')}</p>
|
||||
</div>
|
||||
</div>
|
||||
) : providers.length === 0 ? (
|
||||
<Card>
|
||||
<CardContent className="py-8 text-center text-sm text-muted-foreground">
|
||||
{t('services.noProviders')}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div className="editorial-card p-16 bg-white dark:bg-[#141414] border-none shadow-editorial text-center">
|
||||
<p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('services.noProviders')}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-12">
|
||||
{/* Classic providers */}
|
||||
{classicProviders.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Globe className="size-4 text-muted-foreground" />
|
||||
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
<section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
|
||||
<div className="flex items-center gap-4 mb-8 text-brand-accent">
|
||||
<Globe size={20} />
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
|
||||
{t('services.classic')}
|
||||
</h2>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-4">
|
||||
{classicProviders.map((p) => (
|
||||
<Card key={p.id}>
|
||||
<CardContent className="flex items-center justify-between py-4 px-5">
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{p.label}</p>
|
||||
<p className="text-xs text-muted-foreground">{p.description}</p>
|
||||
</div>
|
||||
<Badge variant="outline" className="border-emerald-500/50 text-emerald-600 gap-1">
|
||||
<CheckCircle2 className="size-3" />{t('services.available')}
|
||||
</Badge>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div
|
||||
key={p.id}
|
||||
className="flex items-center justify-between p-6 bg-brand-muted dark:bg-white/5 rounded-[24px] border border-black/5 dark:border-white/10 hover:-translate-y-1 transition-all"
|
||||
>
|
||||
<div>
|
||||
<p className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">{p.label}</p>
|
||||
<p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">{p.description}</p>
|
||||
</div>
|
||||
<span className="flex items-center gap-2 px-4 py-2 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-full text-[9px] font-black uppercase tracking-widest">
|
||||
<CheckCircle2 size={12} /> {t('services.available')}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* LLM providers */}
|
||||
{llmProviders.length > 0 && (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Brain className="size-4 text-muted-foreground" />
|
||||
<h2 className="text-sm font-semibold text-muted-foreground uppercase tracking-wide">
|
||||
<section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
|
||||
<div className="flex items-center gap-4 mb-8 text-brand-accent">
|
||||
<Brain size={20} />
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
|
||||
{t('services.llmPro')}
|
||||
</h2>
|
||||
</h3>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-4">
|
||||
{llmProviders.map((p) => (
|
||||
<Card key={p.id}>
|
||||
<CardContent className="flex items-center justify-between py-4 px-5">
|
||||
<div>
|
||||
<p className="font-medium text-foreground">{p.label}</p>
|
||||
<p className="text-xs text-muted-foreground">{p.description}</p>
|
||||
{p.model && (
|
||||
<p className="mt-1 text-[10px] font-mono text-muted-foreground/80">
|
||||
{t('services.model')}: {p.model}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Badge variant="outline" className="border-emerald-500/50 text-emerald-600 gap-1">
|
||||
<CheckCircle2 className="size-3" />{t('services.available')}
|
||||
</Badge>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<div
|
||||
key={p.id}
|
||||
className="flex items-center justify-between p-6 bg-brand-muted dark:bg-white/5 rounded-[24px] border border-black/5 dark:border-white/10 hover:-translate-y-1 transition-all"
|
||||
>
|
||||
<div>
|
||||
<p className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white">{p.label}</p>
|
||||
<p className="text-[10px] text-brand-dark/30 dark:text-white/30 font-bold uppercase tracking-widest mt-1">{p.description}</p>
|
||||
{p.model && (
|
||||
<p className="mt-2 text-[9px] font-mono text-brand-dark/20 dark:text-white/20 uppercase tracking-widest">
|
||||
{t('services.model')}: {p.model}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<span className="flex items-center gap-2 px-4 py-2 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 rounded-full text-[9px] font-black uppercase tracking-widest">
|
||||
<CheckCircle2 size={12} /> {t('services.available')}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Card className="border-amber-200 dark:border-amber-500/20 bg-amber-50 dark:bg-amber-500/5">
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="text-sm text-amber-800 dark:text-amber-400 flex items-center gap-2">
|
||||
<Lock className="size-4" />
|
||||
{t('services.adminOnly.title')}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<CardDescription className="text-amber-700 dark:text-amber-400/80 text-xs">
|
||||
{t('services.adminOnly.desc')}
|
||||
</CardDescription>
|
||||
</CardContent>
|
||||
</Card>
|
||||
{/* Admin notice */}
|
||||
<div className="editorial-card p-10 lg:p-12 bg-amber-50 dark:bg-amber-500/5 border border-amber-200 dark:border-amber-500/20 mt-12">
|
||||
<div className="flex items-center gap-4 text-amber-600 dark:text-amber-400">
|
||||
<Lock size={20} />
|
||||
<div>
|
||||
<h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-amber-800 dark:text-amber-400">
|
||||
{t('services.adminOnly.title')}
|
||||
</h3>
|
||||
<p className="text-[10px] text-amber-600/60 dark:text-amber-400/60 font-bold uppercase tracking-widest mt-2">
|
||||
{t('services.adminOnly.desc')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user