Kirill
62 lines
2.0 KiB
TypeScript
62 lines
2.0 KiB
TypeScript
import Box from '@mui/material/Box'
|
|
import IconButton from '@mui/material/IconButton'
|
|
import { Cherry, Hammer, Trees, WavesHorizontal } from 'lucide-react'
|
|
import type { ColorScheme } from '@/shared/model/theme'
|
|
|
|
type Props = {
|
|
value: ColorScheme
|
|
onChange: (scheme: ColorScheme) => void
|
|
orientation?: 'horizontal' | 'vertical'
|
|
}
|
|
|
|
const SCHEMES: { key: ColorScheme; color: string; label: string; icon: React.ReactNode }[] = [
|
|
{ key: 'craft', color: '#546E7A', label: 'Крафт', icon: <Hammer size={16} /> },
|
|
{ key: 'forest', color: '#2E8B57', label: 'Лес', icon: <Trees size={16} /> },
|
|
{ key: 'ocean', color: '#20B2AA', label: 'Океан', icon: <WavesHorizontal size={16} /> },
|
|
{ key: 'berry', color: '#8A2BE2', label: 'Ягоды', icon: <Cherry size={16} /> },
|
|
]
|
|
|
|
export function SchemeSwitcher({ value, onChange, orientation = 'horizontal' }: Props) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: orientation === 'vertical' ? 'column' : 'row',
|
|
gap: 1,
|
|
alignItems: 'center',
|
|
}}
|
|
>
|
|
{SCHEMES.map((s) => {
|
|
const active = value === s.key
|
|
return (
|
|
<IconButton
|
|
key={s.key}
|
|
onClick={() => onChange(s.key)}
|
|
size="small"
|
|
title={s.label}
|
|
sx={{
|
|
width: 36,
|
|
height: 36,
|
|
minWidth: 36,
|
|
bgcolor: 'transparent',
|
|
border: 2,
|
|
borderColor: active ? s.color : 'transparent',
|
|
boxShadow: active ? `0 0 8px ${s.color}66` : 'none',
|
|
transform: active ? 'scale(1.15)' : 'scale(1)',
|
|
color: active ? s.color : 'text.secondary',
|
|
transition: 'all 0.2s ease',
|
|
'&:hover': {
|
|
transform: 'scale(1.2)',
|
|
borderColor: s.color,
|
|
color: s.color,
|
|
},
|
|
}}
|
|
>
|
|
{s.icon}
|
|
</IconButton>
|
|
)
|
|
})}
|
|
</Box>
|
|
)
|
|
}
|