test refactor

2026-05-14 19:54:45 +05:00
parent 8165f75a78
commit ce9883f8c9
12 changed files with 175 additions and 175 deletions
@@ -0,0 +1,61 @@
+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>
+  )
+}