HW react-gallery done

.idea/.gitignore

@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
+# Editor-based HTTP Client requests
+/httpRequests/

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/react-gallery.iml" filepath="$PROJECT_DIR$/.idea/react-gallery.iml" />
+    </modules>
+  </component>
+</project>

.idea/react-gallery.iml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

src/App.css

@@ -36,3 +36,27 @@
     transform: rotate(360deg);
   }
 }
+
+img{
+  height: 200px;
+}
+
+.Gallery{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+ul, li{
+  display: flex;
+  flex-direction: row;
+}
+
+li{
+  margin: 10px;
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+}

src/App.js

@@ -1,25 +1,13 @@
 import logo from './logo.svg';
 import './App.css';
+import Gallery from './Gallery';
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    return (
+        <div className="App">
+            <Gallery/>
+        </div>
+    );
 }
 
 export default App;

src/Gallery.js

@@ -0,0 +1,68 @@
+import {useState} from 'react';
+
+const Dots = ({count, active, onChange}) => {
+     return (
+        <div>
+            <ul>
+                {[...new Array(count)].map((item, index) => {
+                    return (
+                        <li
+                            key={index}
+                            style={{backgroundColor: active === index ? 'red' : 'black'}}
+                            onClick={() => onChange(index)}
+                        />
+                    );
+                })}
+            </ul>
+        </div>
+    );
+};
+
+const Gallery = ({
+                     images = ['https://kot-pes.com/wp-content/uploads/2018/12/post_5c249026dde11.jpg',
+                         'https://bigpicture.ru/wp-content/uploads/2019/12/DmrVIH7W4AAU_90-800x533.jpg',
+                         'https://images.pexels.com/photos/45170/kittens-cat-cat-puppy-rush-45170.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+                         'https://images.pexels.com/photos/177809/pexels-photo-177809.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+                     ]
+                 }) => {
+
+    const [index, setIndex] = useState(0);
+    const isDisabledBack = index === images.length - 1;
+    const isDisabledForward = index === 0;
+
+    const forward = () => {
+        if (index <= images.length - 1) {
+            setIndex(index + 1);
+        }
+    };
+    const back = () => {
+        if (index <= images.length - 1) {
+            setIndex(index - 1);
+        }
+    };
+
+    return (
+        <div className="Gallery">
+            <img src={images[index]}/>
+            <Dots
+                count={images.length}
+                active={index}
+                onChange={setIndex}
+            />
+            <button
+                onClick={back}
+                disabled={isDisabledForward}
+            >
+                Назад
+            </button>
+            <button
+                onClick={forward}
+                disabled={isDisabledBack}
+            >
+                Вперед
+            </button>
+
+        </div>
+    );
+};
+export default Gallery;