83 lines
4.5 KiB
TypeScript
83 lines
4.5 KiB
TypeScript
import { SettingsModel } from '@/types';
|
|
import { Theme } from '@/context/ThemeContext';
|
|
|
|
interface SettingsThemeProps {
|
|
settings: SettingsModel;
|
|
currentTheme: Theme;
|
|
onSelect: (theme: string) => void;
|
|
}
|
|
|
|
export function SettingsTheme({ settings, currentTheme, onSelect }: SettingsThemeProps) {
|
|
return (
|
|
<div className="space-y-6">
|
|
<h3 className="text-lg font-semibold text-white/90">테마 선택</h3>
|
|
<div className="grid grid-cols-1 gap-4">
|
|
{/* Dark Theme */}
|
|
<button
|
|
onClick={() => onSelect('dark')}
|
|
className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'dark' || (!settings.Theme && currentTheme === 'dark')
|
|
? 'border-primary-500 bg-primary-500/10'
|
|
: 'border-white/10 hover:border-white/30 hover:bg-white/5'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-white font-medium">Dark (기본)</span>
|
|
{(settings.Theme === 'dark') && <div className="w-2 h-2 rounded-full bg-primary-500"></div>}
|
|
</div>
|
|
<div className="h-16 rounded-lg bg-[#1e1e2e] border border-white/10 flex overflow-hidden">
|
|
<div className="w-1/4 bg-[#181825] border-r border-white/5"></div>
|
|
<div className="flex-1 p-2">
|
|
<div className="h-2 w-2/3 bg-white/10 rounded mb-2"></div>
|
|
<div className="h-8 w-full bg-[#1e1e2e] border border-primary-500/30 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
{/* PSH_PINK Theme */}
|
|
<button
|
|
onClick={() => onSelect('PSH_PINK')}
|
|
className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'PSH_PINK'
|
|
? 'border-[#FF00FF] bg-[#FF00FF]/10'
|
|
: 'border-white/10 hover:border-white/30 hover:bg-white/5'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-white font-medium">PSH Pink</span>
|
|
{settings.Theme === 'PSH_PINK' && <div className="w-2 h-2 rounded-full bg-[#FF00FF]"></div>}
|
|
</div>
|
|
<div className="h-16 rounded-lg bg-[#2D0A1E] border border-[#FF66FF]/30 flex overflow-hidden">
|
|
<div className="w-1/4 bg-[#1A0512] border-r border-[#FF66FF]/20"></div>
|
|
<div className="flex-1 p-2">
|
|
<div className="h-2 w-2/3 bg-[#FF66FF]/20 rounded mb-2"></div>
|
|
<div className="h-8 w-full bg-[#3D0D28] border border-[#FF00FF] rounded relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-transparent via-[#FF00FF]/10 to-transparent"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
|
|
{/* JW_SKY Theme */}
|
|
<button
|
|
onClick={() => onSelect('JW_SKY')}
|
|
className={`relative group p-4 rounded-xl border-2 transition-all duration-300 text-left ${settings.Theme === 'JW_SKY'
|
|
? 'border-sky-400 bg-sky-400/10'
|
|
: 'border-white/10 hover:border-white/30 hover:bg-white/5'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<span className="text-white font-medium">JW Sky</span>
|
|
{settings.Theme === 'JW_SKY' && <div className="w-2 h-2 rounded-full bg-sky-400"></div>}
|
|
</div>
|
|
<div className="h-16 rounded-lg bg-[#0F172A] border border-sky-400/30 flex overflow-hidden">
|
|
<div className="w-1/4 bg-[#020617] border-r border-sky-400/20"></div>
|
|
<div className="flex-1 p-2">
|
|
<div className="h-2 w-2/3 bg-sky-400/20 rounded mb-2"></div>
|
|
<div className="h-8 w-full bg-[#1E293B] border border-sky-400 rounded"></div>
|
|
</div>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|