73e8372b0e
- Bulk replace text-white → text-foreground across 116 component files (preserving text-white/ opacity variants) - Remove hover-glow-cyan, shadow-card-glow-cyan, shadow-button-primary-glow classes from all components - Replace --duration-normal/--duration-immersive/--duration-slow with --sumi-duration-normal/--sumi-duration-slow across 130+ files - Replace --ease-out/--ease-in-out with --sumi-ease-out/--sumi-ease-in-out - Replace focus:ring-blue-500 → focus:ring-primary (4 files) - Remove hover:scale-105/110 and hover:-translate-y-1/0.5 transforms (SUMI anti-pattern: no scale on hover) - Clean up stale kodo- references in comments Co-authored-by: Cursor <cursoragent@cursor.com>
109 lines
3.4 KiB
TypeScript
109 lines
3.4 KiB
TypeScript
import { Palette } from 'lucide-react';
|
|
|
|
interface ThemeSwitcherProps {
|
|
currentTheme: string;
|
|
onThemeChange: (theme: string) => void;
|
|
}
|
|
|
|
const themes = [
|
|
{
|
|
id: 'cyber',
|
|
name: 'Cyber',
|
|
colors: ['#7c9dd6', '#d4634a'],
|
|
description: 'Indigo & Vermillion',
|
|
gradient: 'linear-gradient(135deg, #7c9dd6 0%, #d4634a 100%)',
|
|
},
|
|
{
|
|
id: 'ocean',
|
|
name: 'Ocean',
|
|
colors: ['#7a9e6c', '#8eb280'],
|
|
description: 'Sage & Moss',
|
|
gradient: 'linear-gradient(135deg, #7a9e6c 0%, #8eb280 100%)',
|
|
},
|
|
{
|
|
id: 'forest',
|
|
name: 'Forest',
|
|
colors: ['#c9a84c', '#d6b860'],
|
|
description: 'Gold & Amber',
|
|
gradient: 'linear-gradient(135deg, #c9a84c 0%, #d6b860 100%)',
|
|
},
|
|
{
|
|
id: 'sunset',
|
|
name: 'Sunset',
|
|
colors: ['#e0a0b8', '#c840a0'],
|
|
description: 'Sakura & Magenta',
|
|
gradient: 'linear-gradient(135deg, #e0a0b8 0%, #c840a0 100%)',
|
|
},
|
|
];
|
|
|
|
export function ThemeSwitcher({
|
|
currentTheme,
|
|
onThemeChange,
|
|
}: ThemeSwitcherProps) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 rounded-xl bg-primary flex items-center justify-center">
|
|
<Palette className="w-5 h-5 text-foreground" />
|
|
</div>
|
|
<div>
|
|
<h3 className="text-xl font-bold text-foreground">Color Theme</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
Choose your visual style
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
{themes.map((theme) => (
|
|
<button
|
|
key={theme.id}
|
|
onClick={() => onThemeChange(theme.id)}
|
|
className={`group relative p-8 rounded-2xl border-2 transition-all duration-[var(--sumi-duration-normal)] text-left overflow-hidden ${
|
|
currentTheme === theme.id
|
|
? 'border-primary bg-primary/10 shadow-lg shadow-primary/20'
|
|
: 'border-white/10 bg-muted/50 hover:border-white/30 hover:bg-muted'
|
|
}`}
|
|
>
|
|
{/* Gradient Background */}
|
|
<div
|
|
className="absolute inset-0 opacity-10 group-hover:opacity-20 transition-opacity"
|
|
style={{ background: theme.gradient }}
|
|
/>
|
|
|
|
{/* Content */}
|
|
<div className="relative z-10">
|
|
<div className="flex items-center gap-4 mb-3">
|
|
<div className="flex gap-2">
|
|
{theme.colors.map((color, i) => (
|
|
<div
|
|
key={i}
|
|
className="w-10 h-10 rounded-lg shadow-lg transition-opacity group-hover:opacity-80"
|
|
style={{ backgroundColor: color }}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-2">
|
|
<div className="font-bold text-lg text-foreground mb-1">
|
|
{theme.name}
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
{theme.description}
|
|
</div>
|
|
</div>
|
|
|
|
{currentTheme === theme.id && (
|
|
<div className="flex items-center gap-2 text-muted-foreground font-mono text-sm animate-slide-in-left">
|
|
<div className="w-2 h-2 rounded-full bg-primary animate-glow-pulse" />
|
|
Active Theme
|
|
</div>
|
|
)}
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|