Настойки внешний вид

FRONT/DEV/src/components/settings/SettingItem.tsx

@@ -0,0 +1,130 @@
+import {Setting, useSettingsStore} from "../../store/settingsStore";
+import {ChangeEvent} from "react";
+import styled, {useTheme} from "styled-components";
+import {IconComponent} from "../../const/buttons/icons";
+import {buttonNames} from "../../const/buttons/names";
+import SettingSelect from "./SettingSelect";
+import {MainButton} from "../UI/buttons/mainButton";
+
+const SettingBlock = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 24px;
+    margin-bottom: 18px;
+    font-size: 18px;
+    width: 90%;
+    input{
+        font-size: 16px;
+        outline: none;
+        background-color: ${props => props.theme.primary};
+        border: 1px solid ${props => props.theme.borderColor};
+        padding: 6px 8px;
+        border-radius: 4px;
+    }
+    input[type="number"]{
+        width: 80px;
+    }
+    input[type="number"]::-webkit-inner-spin-button,
+    input[type="number"]::-webkit-outer-spin-button {
+        -webkit-appearance: none;
+        margin: 0;
+    }
+`
+const StyledCheckbox = styled.input.attrs({ type: 'checkbox' })`
+    width: 22px !important;
+    height: 22px !important;
+    appearance: none;
+    -webkit-appearance: none;
+    position: relative;
+    cursor: pointer;
+    overflow: hidden;
+  
+  &::after {
+    content: "";
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: ${props => props.theme.primary};
+    top: 0;
+    left: 0;
+  }
+  &:checked::after {
+    background: ${props => props.theme.accent};
+  }
+
+`;
+const LabelCheckbox = styled.label`
+    position: relative;
+    cursor: pointer;
+    padding: 0;
+    svg{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+`
+
+
+export const SettingItem = ({ setting }: { setting: Setting }) => {
+    const { updateSetting } = useSettingsStore();
+    const theme = useTheme();
+
+    const handleChange = (
+        e: ChangeEvent<HTMLInputElement | HTMLSelectElement>
+    ) => {
+        const value =
+            setting.type === 'boolean'
+                ? (e.target as HTMLInputElement).checked
+                : e.target.value;
+        updateSetting(setting.id, value);
+    };
+
+    return (
+        <SettingBlock>
+            <label>{setting.label}</label>
+
+            {setting.type === 'boolean' && (
+                <LabelCheckbox>
+                    <StyledCheckbox />
+                    <IconComponent name={buttonNames[19]} width="18" height="18" setColor={theme.primary} />
+                </LabelCheckbox>
+            )}
+
+            {setting.type === 'select' && setting.options && (
+                <SettingSelect
+                    value={setting.value}
+                    options={setting.options}
+                    onChange={(value) => updateSetting(setting.id, value)}
+                />
+            )}
+
+            {setting.type === 'text' && (
+                <input
+                    type="text"
+                    value={setting.value}
+                    onChange={handleChange}
+                />
+            )}
+
+            {setting.type === 'number' && (
+                <input
+                    type="number"
+                    min={setting?.min}
+                    max={setting?.max}
+                    value={setting.value}
+                    onChange={handleChange}
+                />
+            )}
+
+            {setting.type === 'button' && (
+                <MainButton
+                    type="button"
+                    size="small"
+                    title={setting.value}
+                />
+            )}
+        </SettingBlock>
+    );
+};