final ref hw7

src/s2-homeworks/hw05/pages/Junior.tsx

@@ -1,14 +1,14 @@
 import React from 'react'
-// import HW6 from '../../hw06/HW6'
+import HW6 from '../../hw06/HW6'
-// import HW7 from '../../hw07/HW7'
+import HW7 from '../../hw07/HW7'
 // import HW8 from '../../hw08/HW8'
 // import HW9 from '../../hw09/HW9'
 
 function Junior() {
     return (
         <div id={'hw5-page-junior'}>
-            {/*<HW6 />*/}
+            <HW6 />
-            {/*<HW7 />*/}
+            <HW7 />
             {/*<HW8 />*/}
             {/*<HW9 />*/}
         </div>

src/s2-homeworks/hw06/HW6.tsx

@@ -26,7 +26,7 @@ const HW6 = () => {
         <div id={'hw6'}>
             <div className={s2.hwTitle}>Homework #6</div>
 
-            {/*should work (должно работать)*/}
+            {/*демонстрация возможностей компонент:*/}
             <div className={s2.hw}>
                 <div className={s.editableSpanContainer}>
                     <SuperEditableSpan
@@ -39,6 +39,7 @@ const HW6 = () => {
                         }}
                     />
                 </div>
+
                 <div className={s.buttonsContainer}>
                     <SuperButton id={'hw6-save'} onClick={save}>
                         Save to ls

src/s2-homeworks/hw07/HW7.tsx

@@ -4,6 +4,13 @@ import SuperRadio from './common/c6-SuperRadio/SuperRadio'
 import s2 from '../../s1-main/App.module.css'
 import s from './HW7.module.css'
 
+/*
+* 1 - в файле SuperSelect.tsx дописать логику функции onChangeCallback
+* 2 - в файле SuperSelect.tsx дописать логику функции onChangeCallback
+* 3 - в файле SuperSelect.tsx дописать name, checked, value (узнать для чего в радио name)
+* 4 - сделать стили в соответствии с дизайном
+* */
+
 const arr = [
     { id: 1, value: 'x' },
     { id: 2, value: 'y' },
@@ -12,13 +19,12 @@ const arr = [
 
 const HW7 = () => {
     const [value, onChangeOption] = useState(1) // селект и радио должны работать синхронно
-    console.log(value)
 
     return (
         <div id={'hw7'}>
             <div className={s2.hwTitle}>Homework #7</div>
 
-            {/*should work (должно работать)*/}
+            {/*демонстрация возможностей компонент:*/}
             <div className={s2.hw}>
                 <div className={s.container}>
                     <div>

src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css

@@ -1,19 +1,21 @@
 .select {
-    padding-left: 10px;
+    appearance: none;
     width: 165px;
     height: 24px;
-    cursor: pointer;
+    padding-left: 10px;
-    appearance: none;
+
+    color: inherit;
     background-color: transparent;
     background-image: url('./chevron-down.svg');
     background-position: right center;
     background-repeat: no-repeat;
     border-radius: 2px;
     border: 1px solid #C2C2C2;
-    color: inherit;
+
     font-family: 'Montserrat', sans-serif;
     font-weight: 400;
     font-size: 14px;
+    cursor: pointer;
 }
 
 .select:focus {
@@ -22,7 +24,7 @@
 
 
 .option:hover {
-    box-shadow: 0 0 10px 100px #fed20f inset;
     transition: all 0.2s ease-in-out;
     background: red;
+    box-shadow: 0 0 10px 100px #fed20f inset;
 }

src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css

@@ -1,25 +1,27 @@
 .radio {
-    margin: 0;
     -webkit-appearance: none;
     appearance: none;
-    height: 20px;
-    width: 20px;
-    cursor: pointer;
-    border-radius: 50%;
-    border: 2px solid black;
     display: grid;
     place-content: center;
+    height: 20px;
+    width: 20px;
+    margin: 0;
+
+    border-radius: 50%;
+    border: 2px solid black;
+    cursor: pointer;
 }
 
 .radio::before {
+    z-index: -1;
     content: "";
-    width: 10px;
-    height: 10px;
-    border-radius: 50%;
     transform: scale(0);
     transition: 120ms transform ease-in-out;
+    width: 10px;
+    height: 10px;
+
     background-color: black;
-    z-index: -1;
+    border-radius: 50%;
 }
 
 
@@ -28,11 +30,11 @@
 }
 
 .label {
-    cursor: pointer;
     display: flex;
     align-items: center;
     gap: 13px;
     width: max-content;
+    cursor: pointer;
 }
 
 .options {

src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx

@@ -35,14 +35,13 @@ const SuperRadio: React.FC<SuperRadioPropsType> = ({
     ...restProps
 }) => {
     const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
+        // делают студенты
         onChange?.(e)
         onChangeOption?.(+e.currentTarget.value)
     }
 
-    const finalRadioClassName = `${s.radio} ${className ? className : ''}`
+    const finalRadioClassName = s.radio + (className ? ' ' + className : '')
-    const spanClassName = `${s.span} ${
+    const spanClassName = s.span + (spanProps?.className ? ' ' + spanProps.className : '')
-        spanProps?.className ? spanProps.className : ''
-    }`
 
     const mappedOptions: any[] = options
         ? options.map((o) => (
@@ -55,6 +54,7 @@ const SuperRadio: React.FC<SuperRadioPropsType> = ({
                       name={name}
                       checked={o.id === value}
                       value={o.id}
+
                       onChange={onChangeCallback}
                       {...restProps}
                   />