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/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..6a18d104 --- /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/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 d89b7dcc..33f9d80c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,16 +1,81 @@ +import React from 'react'; import './index.scss'; +import {Collection} from "./Collection"; + +const carts = [ + { "name": "Все" }, + { "name": "Море" }, + { "name": "Горы" }, + { "name": "Архитектура" }, + { "name": "Города" } +] function App() { - return ( -
-
-

Счетчик:

-

0

- - -
-
- ); + const [categoryId, setCategoryId] = React.useState(0) + const [searchValue, setSearchValue] = React.useState("") + const [collections, setCollections] = React.useState([]) + const [isLoading, setIsLoading] = React.useState(0) + // добавление пагинации + const [page,setPage] = React.useState(1) + + React.useEffect(() => { + setIsLoading(true) + const category = categoryId ? `category=${categoryId}` : '' + + fetch(`https://634812fbdb76843976b9b35d.mockapi.io/Collections?page=${page}&limit=3&${category}`,) + .then((res) => res.json()) + .then((json) => { + setCollections(json) + }) + .catch((err) => { + console.warn(err); + alert("Ошибка при получение данных") + }) + .finally(() => setIsLoading(false)) + }, [categoryId, page]) + + + return ( +
+

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

+
+ + setSearchValue(e.target.value)} + className="search-input" + placeholder="Поиск по названию"/> +
+
+ { isLoading + ?

Загрузка ...

+ : (collections + .filter(obj => { + return obj.name.toLowerCase().includes(searchValue.toLowerCase()) + }) + .map((obj, index) => ( + + ))) + } +
+ +
+ ); } 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}

+
+ ); +} diff --git a/src/index.scss b/src/index.scss index 4b76cded..4fce14e6 100644 --- a/src/index.scss +++ b/src/index.scss @@ -1,71 +1,159 @@ +@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;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: 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: #edf6f9; + background-color: #eff0f1; +} + +* { + box-sizing: border-box; } .App { - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - text-align: center; + padding: 50px; + width: 100%; + max-width: 1200px; +} - h1 { - color: #000; - font-size: 7rem; - margin: 0; - margin-bottom: 20px; +h1 { + font-family: 'Merriweather', serif; +} + +.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; - &.plus { - color: #2a9d8f; + &:hover { + border-color: #000; } - &.minus { - color: #e63946; + + &.active { + background-color: #000; + color: #fff; } } +} - h2 { - font-size: 2rem; +.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; - color: #556581; + margin-top: 15px; + font-size: 20px; + font-family: 'Merriweather', serif; } - 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; + &:hover { + box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1); + transform: translateY(-5px); + } - &.minus { - background-color: #e63946; - color: #fff; - box-shadow: 0 4px 0 darken(#e63946, 10%); - border: 1px solid darken(#e63946, 15%); - } + @media (max-width: 1000px) { + width: 100%; + } - &.plus { - background-color: #2a9d8f; - color: #fff; - box-shadow: 0 4px 0 darken(#2a9d8f, 10%); - border: 1px solid darken(#2a9d8f, 15%); - } + img { + object-fit: cover; + } - &:hover { - transform: translateY(-2px); - } + &__big { + height: 250px; + width: 100%; + border-radius: 20px; + margin-bottom: 15px; + } - &:active { - transform: translateY(2px); - box-shadow: none; + &__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; + + 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; } } }