hw11 styles

src/s2-homeworks/hw10/HW10.tsx

@@ -26,7 +26,7 @@ const HW10 = () => {
 
     return (
         <div id={'hw10'}>
-            <div className={s2.hwTitle}>homeworks 10</div>
+            <div className={s2.hwTitle}>Homework #10</div>
 
             {/*should work (должно работать)*/}
             <div className={s2.hw}>

src/s2-homeworks/hw11/HW11.module.css

@@ -0,0 +1,15 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    gap: 40px;
+}
+
+.wrapper {
+    display: flex;
+    align-items: center;
+    gap: 25px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 20px;
+}

src/s2-homeworks/hw11/HW11.tsx

@@ -1,9 +1,8 @@
 import React, { useState } from 'react'
-import SuperRange from './common/c7-SuperRange/SuperRange'
+import s from './HW11.module.css'
-import SuperDoubleRange from './common/c8-SuperDoubleRange/SuperDoubleRange'
 import s2 from '../../s1-main/App.module.css'
 import { restoreState } from '../hw06/localStorage/localStorage'
-import { Slider } from '@mui/material'
+import SuperRange from './common/c7-SuperRange/SuperRange'
 
 function HW11() {
     const [value1, setValue1] = useState(restoreState<number>('hw11-value1', 0))
@@ -21,43 +20,29 @@ function HW11() {
     }
 
     return (
-        <div id={'hw11'} className={s2.hw}>
+        <div id={'hw11'}>
-            <div className={s2.hwTitle}>homeworks 11</div>
+            <div className={s2.hwTitle}>Homework #11</div>
 
             {/*should work (должно работать)*/}
-            <div>
+            <div className={s2.hw}>
-                <span
+                <div className={s.container}>
-                    id={'hw11-value'}
+                    <div className={s.wrapper}>
-                    style={{ display: 'inline-block', width: 32 }}
+                        <span id={'hw11-value'}>{value1}</span>
-                >
+                        <SuperRange
-                    {value1}
+                            // сделать так чтоб value1 изменялось
-                </span>
+                            value={value1}
-                <Slider
+                            onChange={change}
-                    // сделать так чтоб value1 изменялось
+                        />
-                    value={value1}
+                    </div>
-                    onChange={change}
+                    <div className={s.wrapper}>
-                    sx={{ width: '160px' }}
+                        <span id={'hw11-value-1'}>{value1}</span>
-                />
+                        <SuperRange
-            </div>
+                            value={[value1, value2]}
-
+                            onChange={change}
-            <div>
+                        />
-                <span
+                        <span id={'hw11-value-2'}>{value2}</span>
-                    id={'hw11-value-1'}
+                    </div>
-                    style={{ display: 'inline-block', width: 32 }}
+                </div>
-                >
-                    {value1}
-                </span>
-                <Slider
-                    value={[value1, value2]}
-                    onChange={change}
-                    sx={{ width: '160px' }}
-                />
-                <span
-                    id={'hw11-value-2'}
-                    style={{ display: 'inline-block', width: 32 }}
-                >
-                    {value2}
-                </span>
             </div>
         </div>
     )

src/s2-homeworks/hw11/common/c7-SuperRange/SuperRange.module.css

@@ -1,21 +0,0 @@
-.range {
-    appearance: none;
-    width: 160px;
-
-    outline: none;
-    border-radius: 3px;
-    background: #99ff99;
-}
-
-.range::-webkit-slider-thumb {
-    appearance: none;
-    position: relative;
-    width: 16px;
-    height: 16px;
-    top: 3px;
-    margin-top: -6px;
-
-    background: red;
-    cursor: pointer;
-    z-index: 2;
-}

src/s2-homeworks/hw11/common/c7-SuperRange/SuperRange.tsx

@@ -1,47 +1,41 @@
-import React, {
+import React from 'react'
-    ChangeEvent,
+import { Slider, SliderProps } from '@mui/material'
-    DetailedHTMLProps,
-    InputHTMLAttributes,
-} from 'react'
-import s from './SuperRange.module.css'
 
-// тип пропсов обычного инпута
+// здесь мы говорим что у нашего слайдера будут такие же пропсы как у обычного mui слайдера
-type DefaultInputPropsType = DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
->
-
-// здесь мы говорим что у нашего инпута будут такие же пропсы как у обычного инпута
 // (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType)
-type SuperRangePropsType = DefaultInputPropsType & {
+type SuperRangePropsType = SliderProps
-    // и + ещё пропсы которых нет в стандартном инпуте
-    onChangeRange?: (value: number) => void
-}
 
 const SuperRange: React.FC<SuperRangePropsType> = ({
-    type, // достаём и игнорируем чтоб нельзя было задать другой тип инпута
-    onChange,
-    onChangeRange,
-    className,
-
     ...restProps // все остальные пропсы попадут в объект restProps
 }) => {
-    const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
-        onChange && onChange(e) // сохраняем старую функциональность
-
-        onChangeRange && onChangeRange(+e.currentTarget.value)
-    }
-
-    const finalRangeClassName = `${s.range} ${className ? className : ''}`
-
-    // взять одинарный ползунок из материал-юай и повесить на него ид
     return (
         <>
-            <input
+            <Slider
                 id={'hw11-single-slider'}
-                type={'range'}
+                sx={{
-                onChange={onChangeCallback}
+                    width: '160px',
-                className={finalRangeClassName}
+                    color: '#00CC22',
+                    '& .MuiSlider-track': {
+                        border: 'none',
+                    },
+                    '& .MuiSlider-thumb': {
+                        width: 20,
+                        height: 20,
+                        border: '1px solid #00CC22',
+                        backgroundColor: '#fff',
+                        '&:before': {
+                            content: '""',
+                            width: '6px',
+                            height: '6px',
+                            borderRadius: '50%',
+                            backgroundColor: '#00CC22',
+                            zIndex: -1,
+                        },
+                        '&:hover, &.Mui-focusVisible, &.Mui-active': {
+                            boxShadow: 'none',
+                        },
+                    },
+                }}
                 {...restProps} // отдаём инпуту остальные пропсы если они есть (value например там внутри)
             />
         </>

src/s2-homeworks/hw11/common/c8-SuperDoubleRange/SuperDoubleRange.tsx

@@ -1,57 +0,0 @@
-import React, { DetailedHTMLProps, InputHTMLAttributes } from 'react'
-import SuperRange from '../c7-SuperRange/SuperRange'
-
-type DefaultInputPropsType = DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
->
-
-type SuperDoubleRangePropsType = Omit<DefaultInputPropsType, 'value'> & {
-    onChangeRange?: (value: [number, number]) => void
-    value?: [number, number]
-    // min, max, step, disable, ...
-}
-
-const SuperDoubleRange: React.FC<SuperDoubleRangePropsType> = ({
-    onChangeRange,
-    value,
-    // min, max, step, disable, ...
-    ...restProps
-}) => {
-    // сделать самому, можно подключать библиотеки
-    const [value1, value2] = value || [-1, -1]
-
-    const change1 = (n: number) => {
-        if (n <= value2) onChangeRange?.([n, value2])
-    }
-    const change2 = (n: number) => {
-        if (value1 <= n) onChangeRange?.([value1, n])
-    }
-
-    // взять двойной ползунок из материал-юай и повесить на него ид
-    return (
-        <div
-            id={'hw11-double-slider'}
-            style={{
-                position: 'relative',
-                display: 'inline-block',
-                width: 176,
-            }}
-        >
-            <SuperRange
-                style={{ position: 'absolute', top: -12 }}
-                value={value?.[0]}
-                onChangeRange={change1}
-                {...restProps}
-            />
-            <SuperRange
-                style={{ position: 'absolute', top: -12 }}
-                value={value?.[1]}
-                onChangeRange={change2}
-                {...restProps}
-            />
-        </div>
-    )
-}
-
-export default SuperDoubleRange