From cc3bb5a2c57eb0fa8ab12d14e03ea04f848e3ee8 Mon Sep 17 00:00:00 2001 From: Archakov Dennis Date: Tue, 14 Jun 2022 21:23:02 +0300 Subject: [PATCH 1/8] quiz init --- src/App.js | 33 +++++++++--- src/index.scss | 135 +++++++++++++++++++++++++++++++------------------ 2 files changed, 114 insertions(+), 54 deletions(-) diff --git a/src/App.js b/src/App.js index d89b7dcc..08e192d2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,14 +1,35 @@ import './index.scss'; +function Result() { + return ( +
+ +

Вы отгадали 3 ответа из 10

+ +
+ ); +} + +function Game() { + return ( + <> +
+
+
+

Что такое useState?

+ + + ); +} + function App() { return (
-
-

Счетчик:

-

0

- - -
+
); } diff --git a/src/index.scss b/src/index.scss index 4b76cded..239b4db2 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,71 +1,110 @@ +@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap'); + body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', - 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; + font-family: 'Nunito', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: #edf6f9; -} - -.App { + background-color: #6a5be2; display: flex; align-items: center; justify-content: center; height: 100vh; - text-align: center; +} - h1 { - color: #000; - font-size: 7rem; - margin: 0; - margin-bottom: 20px; +.App { + width: 500px; + border-radius: 30px; + padding: 40px; + background-color: #fff; + position: relative; - &.plus { - color: #2a9d8f; + .result { + text-align: center; + + button { + font-weight: bold; + font-family: 'Nunito', sans-serif; + border-radius: 30px; + border: 0; + padding: 15px 30px; + font-size: 20px; + background-color: darken(#ff006e, 3%); + color: #fff; + margin-top: 20px; + cursor: pointer; } - &.minus { - color: #e63946; + + h2 { + margin-bottom: 0; } - } - h2 { - font-size: 2rem; - margin: 0; - color: #556581; + img { + width: 150px; + } } - button { - background: transparent; - border: 2px solid transparent; - text-align: center; - font-size: 22px; - border-radius: 15px; - padding: 10px 25px; - cursor: pointer; - margin: 0 10px; - transition: all 0.05s ease-in-out; + .progress { + height: 10px; + border-radius: 30px; + background-color: rgb(232, 232, 232); + margin-bottom: 25px; - &.minus { - background-color: #e63946; - color: #fff; - box-shadow: 0 4px 0 darken(#e63946, 10%); - border: 1px solid darken(#e63946, 15%); + &__inner { + height: 100%; + border-radius: 30px; + width: 80%; + background: rgb(18, 231, 48); + transition: all 0.3s ease-in-out; + background: linear-gradient(90deg, rgba(18, 231, 48, 1) 0%, rgba(0, 212, 255, 1) 100%); } + } - &.plus { - background-color: #2a9d8f; - color: #fff; - box-shadow: 0 4px 0 darken(#2a9d8f, 10%); - border: 1px solid darken(#2a9d8f, 15%); - } + &:before, + &:after { + content: ''; + display: block; + height: 50px; + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; + position: absolute; + left: 50%; + transform: translateX(-50%); + } - &:hover { - transform: translateY(-2px); - } + &:before { + width: 95%; + bottom: -10px; + background-color: rgba(255, 255, 255, 0.8); + z-index: 0; + } + + &:after { + width: 90%; + bottom: -20px; + background-color: rgba(255, 255, 255, 0.3); + z-index: 1; + } + + h1 { + margin: 0; + } + + ul { + list-style: none; + padding: 0; + + li { + padding: 15px; + border: 2px solid rgba(0, 0, 0, 0.1); + border-radius: 15px; + margin-bottom: 10px; + cursor: pointer; + transition: all 0.1s ease-in-out; - &:active { - transform: translateY(2px); - box-shadow: none; + &:hover { + border: 2px solid rgba(0, 0, 0, 0.3); + } } } } From bf23c5a5d746fade90d2affd892aafe90f53ad75 Mon Sep 17 00:00:00 2001 From: Archakov Dennis Date: Tue, 14 Jun 2022 22:01:47 +0300 Subject: [PATCH 2/8] init photos --- public/data.json | 81 ++++++++++++++++++ src/App.js | 59 ++++++++----- src/index.scss | 215 +++++++++++++++++++++++++++++------------------ 3 files changed, 250 insertions(+), 105 deletions(-) create mode 100644 public/data.json diff --git a/public/data.json b/public/data.json new file mode 100644 index 00000000..9bebedb1 --- /dev/null +++ b/public/data.json @@ -0,0 +1,81 @@ +{ + "categories": [ + { "name": "Все" }, + { "name": "Море" }, + { "name": "Горы" }, + { "name": "Архитектура" }, + { "name": "Города" } + ], + "collections": [ + { + "category": 2, + "name": "Поход в горы", + "photos": [ + "https://images.unsplash.com/photo-1613310023042-ad79320c00ff?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8bW91bmF0aW5zfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1612676239016-41e2c92b8e06?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NXx8bW91bmF0aW5zfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1610809027249-86c649feacd5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bW91bmF0aW5zfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1621682372775-533449e550ed?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8N3x8bW91bmF0aW5zfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" + ] + }, + { + "category": 1, + "name": "Море (июнь)", + "photos": [ + "https://images.unsplash.com/photo-1505118380757-91f5f5632de0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTh8fHNlYSUyMGFlc3RoZXRpY3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1621335223658-0ebd89004d51?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8c2VhJTIwYWVzdGhldGljfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1501436513145-30f24e19fcc8?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fHNlYSUyMGFlc3RoZXRpY3xlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NHx8c2VhJTIwYWVzdGhldGljfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60" + ] + }, + { + "category": 3, + "name": "Поездка в Европу", + "photos": [ + "https://images.unsplash.com/photo-1610010252747-afeb906e2d55?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8YXJjaGljdHVyZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1630335856915-3987afdfdc9a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTF8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1609471374271-0d9b03da0998?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1613390792897-aa0c06a52332?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" + ] + }, + { + "category": 3, + "name": "Идеальная архитектура", + "photos": [ + "https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1538378918848-29dbc0910082?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8YXJjaGljdHVyZXxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1614159869126-0f06a742eecb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTl8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1618840739221-e3adb12c9bf1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjJ8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" + ] + }, + { + "category": 3, + "name": "Красивые здания", + "photos": [ + "https://images.unsplash.com/photo-1616578738046-8d6bbb4ee28e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MjB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1629774631753-88f827bf6447?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1609618486540-8b210e32fe79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDJ8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1608507777998-7b4f2c269120?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NTB8fGFyY2hpY3R1cmV8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" + ] + }, + { + "category": 4, + "name": "Путешествие по миру", + "photos": [ + "https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTN8fGNpdHl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1560840067-ddcaeb7831d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8NDB8fGNpdHl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1531219572328-a0171b4448a3?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mzl8fGNpdHl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1573108724029-4c46571d6490?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MzR8fGNpdHl8ZW58MHx8MHx8&auto=format&fit=crop&w=500&q=60" + ] + }, + { + "category": 2, + "name": "Путешествие куда-то", + "photos": [ + "https://images.unsplash.com/photo-1488646953014-85cb44e25828?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dHJhdmVsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1507608616759-54f48f0af0ee?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Nnx8dHJhdmVsfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1527631746610-bca00a040d60?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTJ8fHRyYXZlbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60", + "https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MTd8fHRyYXZlbHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60" + ] + } + ] +} diff --git a/src/App.js b/src/App.js index 08e192d2..3f47e499 100644 --- a/src/App.js +++ b/src/App.js @@ -1,35 +1,50 @@ +import React from 'react'; import './index.scss'; -function Result() { +function Collection({ name, images }) { return ( -
- -

Вы отгадали 3 ответа из 10

- -
- ); -} - -function Game() { - return ( - <> -
-
+
+ Item +
+ Item + Item + Item
-

Что такое useState?

-
    -
  • Это функция для хранения данных компонента
    • -
  • Это глобальный стейт
    • -
  • Это когда на ты никому не нужен
    • -
- +

{name}

+
); } function App() { return (
- +

Моя коллекция фотографий

+
+
    +
  • Все
    • +
  • Горы
    • +
  • Море
    • +
  • Архитектура
    • +
  • Города
    • +
+ +
+
+ +
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
); } diff --git a/src/index.scss b/src/index.scss index 239b4db2..4fce14e6 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,110 +1,159 @@ -@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&display=swap'); body { margin: 0; - font-family: 'Nunito', sans-serif; + font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, + Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: #6a5be2; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; + background-color: #eff0f1; +} + +* { + box-sizing: border-box; } .App { - width: 500px; - border-radius: 30px; - padding: 40px; - background-color: #fff; - position: relative; - - .result { - text-align: center; - - button { - font-weight: bold; - font-family: 'Nunito', sans-serif; - border-radius: 30px; - border: 0; - padding: 15px 30px; - font-size: 20px; - background-color: darken(#ff006e, 3%); - color: #fff; - margin-top: 20px; - cursor: pointer; - } + padding: 50px; + width: 100%; + max-width: 1200px; +} + +h1 { + font-family: 'Merriweather', serif; +} - h2 { - margin-bottom: 0; +.tags { + list-style: none; + padding: 0; + + li { + display: inline-block; + padding: 12px 18px; + background-color: #fff; + border-radius: 10px; + margin-right: 10px; + cursor: pointer; + font-weight: 500; + font-size: 18px; + border: 1px solid transparent; + transition: all 0.15s ease-in-out; + + &:hover { + border-color: #000; } - img { - width: 150px; + &.active { + background-color: #000; + color: #fff; } } +} - .progress { - height: 10px; - border-radius: 30px; - background-color: rgb(232, 232, 232); - margin-bottom: 25px; - - &__inner { - height: 100%; - border-radius: 30px; - width: 80%; - background: rgb(18, 231, 48); - transition: all 0.3s ease-in-out; - background: linear-gradient(90deg, rgba(18, 231, 48, 1) 0%, rgba(0, 212, 255, 1) 100%); - } +.content { + display: grid; + grid-template-columns: repeat(3, 1fr); + grid-column-gap: 30px; + grid-row-gap: 30px; + margin-top: 40px; + + @media (max-width: 1000px) { + grid-template-columns: repeat(2, 1fr); + } + + @media (max-width: 600px) { + grid-template-columns: repeat(1, 1fr); + } +} + +.collection { + max-width: 470px; + background-color: #fff; + padding: 30px; + border-radius: 30px; + box-shadow: 0 3px 0 rgba(0, 0, 0, 0.05); + cursor: pointer; + transition: all 0.15s ease-in-out; + + h4 { + margin: 0; + margin-top: 15px; + font-size: 20px; + font-family: 'Merriweather', serif; } - &:before, - &:after { - content: ''; - display: block; - height: 50px; - border-bottom-left-radius: 30px; - border-bottom-right-radius: 30px; - position: absolute; - left: 50%; - transform: translateX(-50%); + &:hover { + box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); + transform: translateY(-5px); } - &:before { - width: 95%; - bottom: -10px; - background-color: rgba(255, 255, 255, 0.8); - z-index: 0; + @media (max-width: 1000px) { + width: 100%; } - &:after { - width: 90%; - bottom: -20px; - background-color: rgba(255, 255, 255, 0.3); - z-index: 1; + img { + object-fit: cover; } - h1 { - margin: 0; + &__big { + height: 250px; + width: 100%; + border-radius: 20px; + margin-bottom: 15px; + } + + &__bottom { + display: flex; + justify-content: space-between; + } + + &__mini { + width: 31%; + height: 80px; + border-radius: 20px; + } +} + +.top { + display: flex; + align-items: center; + flex-wrap: wrap; +} + +.search-input { + font-size: 16px; + width: 250px; + height: 50px; + padding: 0 15px; + border-radius: 10px; + border: 1px solid rgba(0, 0, 0, 0.2); + outline: none; + transition: all 0.15s ease-in-out; + + &:focus { + border: 1px solid rgba(0, 0, 0, 0.4); } +} + +.pagination { + list-style: none; + padding: 0; + margin: 0; + margin-top: 40px; - ul { - list-style: none; - padding: 0; - - li { - padding: 15px; - border: 2px solid rgba(0, 0, 0, 0.1); - border-radius: 15px; - margin-bottom: 10px; - cursor: pointer; - transition: all 0.1s ease-in-out; - - &:hover { - border: 2px solid rgba(0, 0, 0, 0.3); - } + li { + display: inline-block; + padding: 10px 17px; + background-color: white; + font-size: 18px; + border-radius: 10px; + margin-right: 15px; + border: 1px solid rgba(0, 0, 0, 0.1); + cursor: pointer; + + &.active { + background-color: black; + color: #fff; } } } From dff3784d746b88d28f73d7779381c9d45dadfa4d Mon Sep 17 00:00:00 2001 From: Ali Adigezalli <91879193+Mulwor@users.noreply.github.com> Date: Thu, 13 Oct 2022 16:49:34 +0300 Subject: [PATCH 3/8] request from backened and create new component --- .idea/Beginner-projects.iml | 12 +++ .idea/inspectionProfiles/Project_Default.xml | 6 ++ .idea/modules.xml | 8 ++ .idea/vcs.xml | 6 ++ .idea/workspace.xml | 72 ++++++++++++++++ src/App.js | 86 ++++++++++---------- src/Collection.jsx | 15 ++++ 7 files changed, 160 insertions(+), 45 deletions(-) create mode 100644 .idea/Beginner-projects.iml create mode 100644 .idea/inspectionProfiles/Project_Default.xml create mode 100644 .idea/modules.xml create mode 100644 .idea/vcs.xml create mode 100644 .idea/workspace.xml create mode 100644 src/Collection.jsx diff --git a/.idea/Beginner-projects.iml b/.idea/Beginner-projects.iml new file mode 100644 index 00000000..0c8867d7 --- /dev/null +++ b/.idea/Beginner-projects.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 00000000..03d9549e --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,6 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..b75f9fa5 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..94a25f7f --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 00000000..3f92c956 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,72 @@ + + + + + + + + + + + + + + + + { + "keyToString": { + "RunOnceActivity.OpenProjectViewOnStart": "true", + "RunOnceActivity.ShowReadmeOnStart": "true", + "WebServerToolWindowFactoryState": "false", + "node.js.detected.package.eslint": "true", + "node.js.selected.package.eslint": "(autodetect)", + "nodejs_package_manager_path": "npm", + "ts.external.directory.path": "C:\\Program Files\\JetBrains\\WebStorm 2022.1.3\\plugins\\JavaScriptLanguage\\jsLanguageServicesImpl\\external", + "vue.rearranger.settings.migration": "true" + } +} + + + + + 1665518432385 + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/App.js b/src/App.js index 3f47e499..daf64dd9 100644 --- a/src/App.js +++ b/src/App.js @@ -1,52 +1,48 @@ import React from 'react'; import './index.scss'; - -function Collection({ name, images }) { - return ( -
- Item -
- Item - Item - Item -
-

{name}

-
- ); -} +import {Collection} from "./Collection"; function App() { - return ( -
-

Моя коллекция фотографий

-
-
    -
  • Все
    • -
  • Горы
    • -
  • Море
    • -
  • Архитектура
    • -
  • Города
    • -
- -
-
- -
-
    -
  • 1
    • -
  • 2
    • -
  • 3
    • -
-
- ); + const [collections, setCollections] = React.useState() + + React.useEffect(() => { + fetch('https://634812fbdb76843976b9b35d.mockapi.io/Collections') + .then((res) => res.json()) + .then((json) => { + setCollections(json) + }) + .catch((err) => { + console.warn(err); + alert("Ошибка при получение данных") + }) + }, []) + + + return ( +
+

Моя коллекция фотографий

+
+
    +
  • Все
    • +
  • Горы
    • +
  • Море
    • +
  • Архитектура
    • +
  • Города
    • +
+ +
+
+ {collections.map((obj, index) => ( + + ))} +
+
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
+
+ ); } export default App; diff --git a/src/Collection.jsx b/src/Collection.jsx new file mode 100644 index 00000000..d1b62045 --- /dev/null +++ b/src/Collection.jsx @@ -0,0 +1,15 @@ +import React from "react"; + +export function Collection({name, images}) { + return ( +
+ Item +
+ Item + Item + Item +
+

{name}

+
+ ); +} From 7807d778c3dbba6d0aba9e8f4cc26c1bac1fa67e Mon Sep 17 00:00:00 2001 From: Ali Adigezalli <91879193+Mulwor@users.noreply.github.com> Date: Thu, 13 Oct 2022 16:55:30 +0300 Subject: [PATCH 4/8] feat: controlled input and search-bar --- .gitignore | 2 ++ .idea/workspace.xml | 7 ++----- src/App.js | 19 ++++++++++++++----- 3 files changed, 18 insertions(+), 10 deletions(-) diff --git a/.gitignore b/.gitignore index 4d29575d..5339fb1c 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,5 @@ npm-debug.log* yarn-debug.log* yarn-error.log* + +/.idea \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 3f92c956..70ffc991 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -1,10 +1,7 @@ - - - - + diff --git a/src/App.js b/src/App.js index daf64dd9..b3e688b4 100644 --- a/src/App.js +++ b/src/App.js @@ -3,7 +3,8 @@ import './index.scss'; import {Collection} from "./Collection"; function App() { - const [collections, setCollections] = React.useState() + const [searchValue, setSearchValue] = React.useState("") + const [collections, setCollections] = React.useState([]) React.useEffect(() => { fetch('https://634812fbdb76843976b9b35d.mockapi.io/Collections') @@ -29,12 +30,20 @@ function App() {
  • Архитектура
  • Города
    • - + setSearchValue(e.target.value)} + className="search-input" + placeholder="Поиск по названию"/>
    - {collections.map((obj, index) => ( - - ))} + {collections + .filter(obj => { + return obj.name.toLowerCase().includes(searchValue.toLowerCase()) + }) + .map((obj, index) => ( + + ))}