diff --git a/index.html b/index.html index 496d1c0..0031fa6 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,12 @@ + + + Vite + React diff --git a/src/App.jsx b/src/App.jsx index a9b55c5..852cdfb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,100 +1,55 @@ import styles from './App.module.scss' -import { FaRegUser } from 'react-icons/fa' -import React from 'react' -function Header() { - const handleChange = event => { - const newValue = event.target.value - console.log('Новое значение:', newValue) - } +import CartIcon from './assets/icons/cart.svg' +import UserIcon from './assets/icons/user.svg' +import WishlistIcon from './assets/icons/wishlist.svg' +import LoopIcon from './assets/icons/loop.svg' +const Header = () => { return (
-
-

Store

- +

Exclusive

+ +
+ +
-
- - +
+ + +
) } -function Product({ name, brand, price, imageUrl }) { - const [isLiked, setIsLiked] = React.useState(false) - - const toggleLike = () => { - setIsLiked(!isLiked) - } - - function handleAddClick() { - console.log('Working!') - } - +const App = () => { return ( -
- -
-
-

{name}

-
- - -
-
-

{brand}

-

${price}

-
+
+
) } -function App() { - const [products, setProducts] = React.useState([]) - - const getProducts = async () => { - const response = await fetch('http://localhost:8000/products') - const data = await response.json() - setProducts(data) - } - - React.useEffect(() => { - getProducts() - }, []) - - return ( - <> -
-
-
-
- -
- - ) -} - export default App diff --git a/src/App.module.scss b/src/App.module.scss index 94683dc..c8c8a34 100644 --- a/src/App.module.scss +++ b/src/App.module.scss @@ -1,135 +1,64 @@ @use './assets/styles/variables' as *; +.container { + max-width: 1200px; + margin: 0 auto; +} + +/* HEADER */ + .header { display: flex; justify-content: space-between; align-items: center; + border-bottom: 1px solid gainsboro; + padding: 30px 0; - padding: 20px; - background-color: white; - - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - - div { - &:first-child { - display: flex; - align-items: center; - gap: 20px; - - h2 { - color: $primary-color; - } - - input { - border-radius: 5px; - outline: none; - font-size: 16px; - border: 1px solid gainsboro; - padding: 5px 10px; - - &:focus { - border: 1px solid $primary-color; - } - } - } - - &:last-child { - display: flex; - align-items: center; - gap: 10px; - - button { - outline: 0; - border: 0; - border-radius: 5px; - padding: 5px 15px; - font-size: 16px; - background-color: $primary-color; - color: $white-color; - font-weight: 600; - cursor: pointer; - - &:hover { - background-color: $seconday-color; - } - } - } - } -} - -.container { - max-width: 1220px; - margin: 0 auto; -} - -.list { - display: flex; - justify-content: space-between; - flex-wrap: wrap; - border-radius: 10px; - margin-top: 100px; /* временно */ - padding: 20px; - background-color: white; - list-style: none; -} - -.product { - display: flex; - flex-direction: column; - width: 350px; - gap: 20px; - border-radius: 10px; -} - -.content { - display: flex; - flex-direction: column; - gap: 10px; -} - -.title { - display: flex; - justify-content: space-between; - align-items: center; - - h4 { - font-size: 18px; + h2 { + font-size: 24px; } - .actions { + ul { + list-style: none; + display: flex; + gap: 48px; + + a { + color: black; + text-decoration: none; + font-size: 16px; + cursor: pointer; + } + } + + .search { display: flex; align-items: center; - gap: 5px; + background-color: #f5f5f5; + padding: 7px 12px; + gap: 35px; + + input { + outline: 0; + border: 0; + background-color: #f5f5f5; + font-size: 12px; + } + + img { + cursor: pointer; + } + } + + .buttons { + display: flex; + gap: 16px; button { - border: 1px solid $primary-color; - background-color: $white-color; - color: $primary-color; - border-radius: 5px; + background: none; outline: 0; - - font-size: 20px; - padding: 5px 10px; - + border: 0; cursor: pointer; - - &:hover { - background-color: $seconday-color; - color: $white-color; - } } } } - -img { - border-radius: 10px; -} - -.description { - color: gray; -} - -.price { - font-weight: bold; -} diff --git a/src/assets/icons/cart.svg b/src/assets/icons/cart.svg new file mode 100644 index 0000000..cb051ca --- /dev/null +++ b/src/assets/icons/cart.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/loop.svg b/src/assets/icons/loop.svg new file mode 100644 index 0000000..77862ef --- /dev/null +++ b/src/assets/icons/loop.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/user.svg b/src/assets/icons/user.svg new file mode 100644 index 0000000..5b9803a --- /dev/null +++ b/src/assets/icons/user.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/wishlist.svg b/src/assets/icons/wishlist.svg new file mode 100644 index 0000000..8eab1b8 --- /dev/null +++ b/src/assets/icons/wishlist.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/styles/_variables.scss b/src/assets/styles/_variables.scss index cdedb11..95ae2a3 100644 --- a/src/assets/styles/_variables.scss +++ b/src/assets/styles/_variables.scss @@ -1,5 +1,4 @@ $white-color: white; $black-color: black; -$primary-color: #3258e3; -$seconday-color: #4432e3; +$primary-color: #db4444;