laktionov-as/react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Перенесли весь код в компоненты

Browse Source
This commit is contained in:
isHardCoded
2025-07-07 13:13:41 +03:00
parent 371bccf190
commit 195fbaf556
4 changed files with 105 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.jsx
+2 -93
View File
@@ -1,98 +1,7 @@
import styles from './App.module.scss'
import React from 'react'
/* HEADER ICONS */
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'
/* PRODUCT CARD ICONS */
import WishIcon from './assets/icons/wish.svg'
const Header = () => {
return (
<header className={styles.header}>
<h2>Exclusive</h2>
<nav>
<ul>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Sign Up</a>
</li>
</ul>
</nav>
<div className={styles.search}>
<input type='text' placeholder='What are you looking for?' />
<img src={LoopIcon} alt='' />
</div>
<div className={styles.buttons}>
<button>
<img src={WishlistIcon} alt='' />
</button>
<button>
<img src={CartIcon} alt='' />
</button>
<button>
<img src={UserIcon} alt='' />
</button>
</div>
</header>
)
}
const ProductCard = ({ name, price, imageUrl }) => {
return (
<div className={styles.product}>
<div className={styles.image}>
<img src={imageUrl} alt='' />
<div className={styles.buttons}>
<button>
<img src={WishIcon} alt='' />
</button>
</div>
</div>
<div className={styles.content}>
<h4>{name}</h4>
<div className={styles.stats}>
<span>${price}</span>
</div>
</div>
</div>
)
}
const ProductList = () => {
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 (
<ul className={styles.list}>
{products.map(product => (
<li>
<ProductCard {...product} />
</li>
))}
</ul>
)
}
import Header from './components/header'
import ProductList from './components/list'
const App = () => {
return (
src/components/card/index.jsx
+26
View File
@@ -0,0 +1,26 @@
import styles from './index.module.scss'
import WishIcon from '../../assets/icons/wish.svg'
const ProductCard = ({ name, price, imageUrl }) => {
return (
<div className={styles.product}>
<div className={styles.image}>
<img src={imageUrl} alt='' />
<div className={styles.buttons}>
<button>
<img src={WishIcon} alt='' />
</button>
</div>
</div>
<div className={styles.content}>
<h4>{name}</h4>
<div className={styles.stats}>
<span>${price}</span>
</div>
</div>
</div>
)
}
export default ProductCard
src/components/header/index.jsx
+47
View File
@@ -0,0 +1,47 @@
import styles from './index.module.scss'
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 (
<header className={styles.header}>
<h2>Exclusive</h2>
<nav>
<ul>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Contact</a>
</li>
<li>
<a href='#'>About</a>
</li>
<li>
<a href='#'>Sign Up</a>
</li>
</ul>
</nav>
<div className={styles.search}>
<input type='text' placeholder='What are you looking for?' />
<img src={LoopIcon} alt='' />
</div>
<div className={styles.buttons}>
<button>
<img src={WishlistIcon} alt='' />
</button>
<button>
<img src={CartIcon} alt='' />
</button>
<button>
<img src={UserIcon} alt='' />
</button>
</div>
</header>
)
}
export default Header
src/components/list/index.jsx
+30
View File
@@ -0,0 +1,30 @@
import React from 'react'
import styles from './index.module.scss'
import ProductCard from '../card'
const ProductList = () => {
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 (
<ul className={styles.list}>
{products.map(product => (
<li>
<ProductCard {...product} />
</li>
))}
</ul>
)
}
export default ProductList