From 56bd60cb4efcdad60caff92751fb02f9157d691d Mon Sep 17 00:00:00 2001
From: neko <ai73a@yandex.ru>
Date: Tue, 20 Sep 2022 14:10:26 +0300
Subject: [PATCH] final ref hw7

---
 src/s2-homeworks/hw05/pages/Junior.tsx        |  8 +++----
 src/s2-homeworks/hw06/HW6.tsx                 |  3 ++-
 src/s2-homeworks/hw07/HW7.tsx                 | 10 ++++++--
 .../c5-SuperSelect/SuperSelect.module.css     | 12 ++++++----
 .../c6-SuperRadio/SuperRadio.module.css       | 24 ++++++++++---------
 .../hw07/common/c6-SuperRadio/SuperRadio.tsx  |  8 +++----
 6 files changed, 38 insertions(+), 27 deletions(-)

diff --git a/src/s2-homeworks/hw05/pages/Junior.tsx b/src/s2-homeworks/hw05/pages/Junior.tsx
index d895228..540acec 100644
--- a/src/s2-homeworks/hw05/pages/Junior.tsx
+++ b/src/s2-homeworks/hw05/pages/Junior.tsx
@@ -1,14 +1,14 @@
 import React from 'react'
-// import HW6 from '../../hw06/HW6'
-// import HW7 from '../../hw07/HW7'
+import HW6 from '../../hw06/HW6'
+import HW7 from '../../hw07/HW7'
 // import HW8 from '../../hw08/HW8'
 // import HW9 from '../../hw09/HW9'
 
 function Junior() {
     return (
         <div id={'hw5-page-junior'}>
-            {/*<HW6 />*/}
-            {/*<HW7 />*/}
+            <HW6 />
+            <HW7 />
             {/*<HW8 />*/}
             {/*<HW9 />*/}
         </div>
diff --git a/src/s2-homeworks/hw06/HW6.tsx b/src/s2-homeworks/hw06/HW6.tsx
index 2b9f51b..ed0d577 100644
--- a/src/s2-homeworks/hw06/HW6.tsx
+++ b/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
diff --git a/src/s2-homeworks/hw07/HW7.tsx b/src/s2-homeworks/hw07/HW7.tsx
index 431c9d0..c6faed8 100644
--- a/src/s2-homeworks/hw07/HW7.tsx
+++ b/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>
diff --git a/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css b/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
index ef8942a..3659984 100644
--- a/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
+++ b/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;
-    appearance: none;
+    padding-left: 10px;
+
+    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;
 }
diff --git a/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css b/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css
index 59ee55e..524d996 100644
--- a/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css
+++ b/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 {
diff --git a/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx b/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx
index da353aa..f863f97 100644
--- a/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx
+++ b/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 spanClassName = `${s.span} ${
-        spanProps?.className ? spanProps.className : ''
-    }`
+    const finalRadioClassName = s.radio + (className ? ' ' + className : '')
+    const spanClassName = s.span + (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}
                   />