@kirill.komarov
62 lines
2.1 KiB
TypeScript
62 lines
2.1 KiB
TypeScript
import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
|
|
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: '#6D4C41', label: 'Крафт', icon: <Hammer size={14} /> },
|
|
{ key: 'forest', color: '#2E7D32', label: 'Лес', icon: <Trees size={14} /> },
|
|
{ key: 'ocean', color: '#1565C0', label: 'Океан', icon: <WavesHorizontal size={14} /> },
|
|
{ key: 'berry', color: '#7B1FA2', label: 'Ягоды', icon: <Cherry size={14} /> },
|
|
]
|
|
|
|
export function SchemeSwitcher({ value, onChange, orientation = 'horizontal' }: Props) {
|
|
return (
|
|
<Box
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: orientation === 'vertical' ? 'column' : 'row',
|
|
gap: 0.5,
|
|
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: 30,
|
|
height: 30,
|
|
minWidth: 30,
|
|
bgcolor: s.color,
|
|
border: 2,
|
|
borderColor: active ? 'common.white' : 'rgba(255,255,255,0.4)',
|
|
boxShadow: active ? `0 0 0 1.5px ${s.color}, 0 0 8px ${s.color}99` : 'none',
|
|
transform: active ? 'scale(1.1)' : 'scale(1)',
|
|
color: 'common.white',
|
|
transition: 'all 0.2s ease',
|
|
'&:hover': {
|
|
transform: 'scale(1.2)',
|
|
bgcolor: s.color,
|
|
},
|
|
}}
|
|
>
|
|
{active ? <CheckCircleRoundedIcon sx={{ fontSize: 14 }} /> : s.icon}
|
|
</IconButton>
|
|
)
|
|
})}
|
|
</Box>
|
|
)
|
|
}
|