added hw Gallery PhoneBook MySelect

src/App.js

@@ -1,6 +1,7 @@
 import logo from './logo.svg';
 import './App.scss';
 import { useState, useEffect, useRef } from "react";
+import GaleryPhoneBookMyselect from './GaleryPhoneBookMyselect';
 
 const Spoiler = ({ header = "+", open, children }) => {
 
@@ -137,7 +138,7 @@ const TimerContainer = ({ seconds, refresh, render: T }) => {
         <T seconds={time} />
     )
 }
-const SecondsTimer = ({ seconds }) => <h2>{seconds.toFixed(1)}</h2>
+
 
 
 const TimerLCD = ({ time = 5 }) => {
@@ -306,7 +307,8 @@ function App() {
             <TimerControlLCD ms={1560} render={Watch} />
             <hr />
             <strong>TimerControl + TimerContainer:</strong>
-            <TimerC  />
+            <TimerC />
+            <GaleryPhoneBookMyselect />
         </div >
     );
 }

src/App.scss

@@ -8,3 +8,10 @@
         top: 0;
     }
 }
+.App {
+    img {
+        width: 300px;
+        height: 350px;
+        object-fit: cover;
+    }
+}

src/GaleryPhoneBookMyselect.jsx

@@ -0,0 +1,212 @@
+import './App.scss';
+import { useEffect, useState, useRef } from 'react';
+const Gallery = ({
+    images = ['https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRfPxhYP11YXh5TFQGvaDhv6rXE_01r9se7z15a4ezI2VTWjSLgwriAuSeoFj0kQWrhEdQ&usqp=CAU', 'https://proprikol.ru/wp-content/uploads/2020/05/prikolnye-kartinki-na-zastavku-1.jpg',
+        'https://avatarko.ru/img/kartinka/33/multfilm_lyagushka_32117.jpg',
+        'https://avatarko.ru/img/kartinka/1/Crazy_Frog.jpg',
+        'https://klike.net/uploads/posts/2019-06/1560329641_2.jpg',
+        'https://vjoy.cc/wp-content/uploads/2019/06/5-37.jpg'], refresh, render: D
+}) => {
+    const [count, setCount] = useState(0)
+    const caruselImg = () => {
+    }
+    useEffect(() => {
+        const timeid = setTimeout(() => {
+            count !== images.length - 1 ? setCount(count => count + 1) : setCount(0)
+        }, refresh);
+        return () => clearTimeout(timeid)
+    }, [count])
+    return (
+        <>
+            <img src={`${images[count]}`} onClick={() => caruselImg()} />
+            <D count={images.length} active={count} onClick={setCount} />
+        </>
+    )
+}
+
+
+const Dots = ({ count, active, onClick }) => {
+    let arr = []
+    for (let i = 0; i < count; i++) {
+        arr.push(i)
+    }
+    return <div>
+        {arr.map((a, i) =>
+            <button key={i} style={{ backgroundColor: a === active ? "#98acec" : "transparent" }}
+                onClick={() => onClick(a)}>{a + 1}</button>
+        )}
+    </div>
+}
+
+const countries = {
+    "AF": "Afghanistan",
+    "AX": "Aland Islands",
+    "AL": "Albania",
+    "DZ": "Algeria",
+    "AS": "American Samoa",
+    "AD": "Andorra",
+    "AO": "Angola",
+    "GA": "Gabon",
+    "GM": "Gambia",
+    "GE": "Georgia",
+    "DE": "Germany",
+    "GH": "Ghana",
+    "GI": "Gibraltar",
+    "GR": "Greece",
+    "GL": "Greenland",
+    "GD": "Grenada",
+    "GP": "Guadeloupe",
+    "GU": "Guam",
+    "GT": "Guatemala",
+    "GG": "Guernsey",
+    "GN": "Guinea",
+    "GW": "Guinea-Bissau",
+    "GY": "Guyana",
+    "HT": "Haiti",
+    "HM": "Heard Island & Mcdonald Islands",
+    "VA": "Holy See (Vatican City State)",
+    "HN": "Honduras",
+    "HK": "Hong Kong",
+    "HU": "Hungary",
+    "IS": "Iceland",
+    "IN": "India",
+    "ID": "Indonesia",
+    "IR": "Iran, Islamic Republic Of",
+    "IQ": "Iraq",
+    "IE": "Ireland",
+    "IM": "Isle Of Man",
+    "IL": "Israel",
+    "IT": "Italy",
+    "JM": "Jamaica",
+    "JP": "Japan",
+    "JE": "Jersey",
+    "TZ": "Tanzania",
+    "TH": "Thailand",
+    "TL": "Timor-Leste",
+    "TG": "Togo",
+    "TK": "Tokelau",
+    "TO": "Tonga",
+    "TT": "Trinidad And Tobago",
+    "TN": "Tunisia",
+    "TR": "Turkey",
+    "TM": "Turkmenistan",
+    "TC": "Turks And Caicos Islands",
+    "TV": "Tuvalu",
+    "UG": "Uganda",
+    "UA": "Ukraine",
+    "AE": "United Arab Emirates",
+    "GB": "United Kingdom",
+    "US": "United States",
+    "UM": "United States Outlying Islands",
+    "UY": "Uruguay",
+    "UZ": "Uzbekistan",
+    "VU": "Vanuatu",
+    "VE": "Venezuela",
+    "VN": "Vietnam",
+    "VG": "Virgin Islands, British",
+    "VI": "Virgin Islands, U.S.",
+    "WF": "Wallis And Futuna",
+    "EH": "Western Sahara",
+    "YE": "Yemen",
+    "ZM": "Zambia",
+    "ZW": "Zimbabwe"
+}
+const MySelect = ({ options = countries, value, onChange }) => {
+    const arrCountry = Object.entries(options)
+    return (
+        <select value={value} onChange={e => onChange(e.target.value)} >
+            {arrCountry.map(([v, t], i) =>
+                <option key={i}
+                    selected={v === value ? true : false}
+                    value={v}>
+                    {t}
+                </option>)}
+        </select>
+    )
+}
+
+const PhoneBookEtry = ({ data = { name: '', phone: '' }, onChange, onDelete, onMoveDown, onMoveUp, onAddItem }) => {
+
+    return (
+        <>
+            <button onClick={() => onAddItem()}>+++</button>
+            <input value={data.name} onChange={e => onChange({ ...data, name: e.currentTarget.value })} />
+            <input value={data.phone} onChange={e => onChange({ ...data, phone: e.currentTarget.value })} />
+            <button onClick={() => onMoveUp()}>^</button >
+            <button onClick={() => onMoveDown()}>v</button>
+            <button onClick={() => onDelete()}>X</button>
+            <br />
+        </>
+    )
+}
+
+let defaultPeople = [{ name: 'John', phone: '123' },
+{ name: 'Bob', phone: '103' }]
+
+const PhoneBook = ({ people = defaultPeople, onSave }) => {
+    const [ppl, setPpl] = useState(people)
+    // const [kk, setKK] = useState(people.map(() => Math.random()))
+
+    useEffect(() => {
+        setPpl(people)
+    }, [people])
+
+    const onChange = (newData, i) => setPpl(ppl.map((p, key) => key === i ? { name: newData.name, phone: newData.phone } : p))
+
+    const onDelete = (i) => setPpl([...ppl].filter((p, key) => key !== i && p))
+
+    const onMoveUp = (i) => {
+        let newArr = [...ppl]
+        if (i !== 0) {
+            newArr.splice(i - 1, 2, ppl[i], ppl[i - 1])
+            setPpl(newArr)
+        } else {
+            setPpl(ppl)
+        }
+    }
+
+    const onMoveDown = (i) => {
+        let newArr = [...ppl]
+        if (i !== newArr.length - 1) {
+            newArr.splice(i, 2, ppl[i + 1], ppl[i])
+            setPpl(newArr)
+        } else {
+            setPpl(ppl)
+        }
+    }
+
+    const onAddItem = (i) => {
+        let newArr = [...ppl]
+        newArr.splice(i, 0, { name: '', phone: '' })
+        setPpl(newArr)
+    }
+    
+    return (
+        <div className="PhoneBook" >
+            <button onClick={() => setPpl([{ name: '', phone: '' }, ...ppl])}>+</button><br />
+            {ppl.map((data, i) => <PhoneBookEtry
+                key={i}
+                data={data}
+                onAddItem={() => onAddItem(i)}
+                onMoveUp={() => onMoveUp(i)}
+                onMoveDown={() => onMoveDown(i)}
+                onChange={data => onChange(data, i)}
+                onDelete={() => onDelete(i)} />)}<br />
+            <button onClick={() => onSave(ppl)}>Save</button>
+        </div>
+    )
+}
+
+function GaleryPhoneBookMyselect() {
+    const [country, setCountry] = useState('UA')
+    console.log(country);
+    return (
+        <div className="App2">
+            <PhoneBook onSave={phone => console.log(phone)} />
+            <Gallery render={Dots} refresh={2500} />
+            <MySelect value={country} onChange={newCountry => setCountry(newCountry)} />
+        </div>
+    );
+}
+
+export default GaleryPhoneBookMyselect;