50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { useTheme } from "@/contexts/ThemeContext";
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectItem,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select";
|
||
|
|
import { Sun, Moon, Accessibility } from "lucide-react";
|
||
|
|
|
||
|
|
const themes = [
|
||
|
|
{ value: "light", label: "일반 모드", icon: Sun, color: "text-orange-500" },
|
||
|
|
{ value: "dark", label: "다크 모드", icon: Moon, color: "text-blue-400" },
|
||
|
|
{ value: "senior", label: "시니어 모드", icon: Accessibility, color: "text-green-500" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function ThemeSelect() {
|
||
|
|
const { theme, setTheme } = useTheme();
|
||
|
|
|
||
|
|
const currentTheme = themes.find((t) => t.value === theme);
|
||
|
|
const CurrentIcon = currentTheme?.icon || Sun;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Select value={theme} onValueChange={(value) => setTheme(value as "light" | "dark" | "senior")}>
|
||
|
|
<SelectTrigger className="w-[160px] rounded-xl border-border/50 bg-background/50 backdrop-blur">
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<CurrentIcon className={`w-4 h-4 ${currentTheme?.color}`} />
|
||
|
|
<SelectValue>
|
||
|
|
<span className="text-sm">{currentTheme?.label}</span>
|
||
|
|
</SelectValue>
|
||
|
|
</div>
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
{themes.map((themeOption) => {
|
||
|
|
const Icon = themeOption.icon;
|
||
|
|
return (
|
||
|
|
<SelectItem key={themeOption.value} value={themeOption.value}>
|
||
|
|
<div className="flex items-center gap-2">
|
||
|
|
<Icon className={`w-4 h-4 ${themeOption.color}`} />
|
||
|
|
<span>{themeOption.label}</span>
|
||
|
|
</div>
|
||
|
|
</SelectItem>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
);
|
||
|
|
}
|