Skip to content

Commit a875552

Browse files
androyt1androyt1
committed
first commit
1 parent abcd88c commit a875552

File tree

13 files changed

+228
-36
lines changed

13 files changed

+228
-36
lines changed

‎.netlify/state.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"siteId": "0144421e-3579-4d7e-9218-83741d8e0fc6"
3+
}

‎package-lock.json

+49
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+6
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"@testing-library/jest-dom": "^5.16.4",
77
"@testing-library/react": "^13.3.0",
88
"@testing-library/user-event": "^13.5.0",
9+
"axios": "^0.27.2",
910
"react": "^18.2.0",
1011
"react-dom": "^18.2.0",
1112
"react-scripts": "5.0.1",
@@ -34,5 +35,10 @@
3435
"last 1 firefox version",
3536
"last 1 safari version"
3637
]
38+
},
39+
"devDependencies": {
40+
"autoprefixer": "^10.4.7",
41+
"postcss": "^8.4.14",
42+
"tailwindcss": "^3.1.6"
3743
}
3844
}

‎postcss.config.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
}

‎public/_redirects

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/* /index.html 200

‎src/App.js

+11-21
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,15 @@
1-
import logo from './logo.svg';
2-
import './App.css';
3-
4-
function App() {
1+
import React from 'react'
2+
import Footer from './components/Footer'
3+
import Navbar from './components/Navbar'
4+
import Home from './pages/Home'
5+
const App = () => {
56
return (
6-
<div className="App">
7-
<header className="App-header">
8-
<img src={logo} className="App-logo" alt="logo" />
9-
<p>
10-
Edit <code>src/App.js</code> and save to reload.
11-
</p>
12-
<a
13-
className="App-link"
14-
href="https://reactjs.org"
15-
target="_blank"
16-
rel="noopener noreferrer"
17-
>
18-
Learn React
19-
</a>
20-
</header>
7+
<div className='max-w-[1300px] mx-auto'>
8+
<Navbar/>
9+
<Home/>
10+
<Footer/>
2111
</div>
22-
);
12+
)
2313
}
2414

25-
export default App;
15+
export default App

‎src/components/Footer.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import React from 'react'
2+
3+
const Footer = () => {
4+
return (
5+
<div className='w-full h-[55px] bg-slate-200'>
6+
7+
</div>
8+
)
9+
}
10+
11+
export default Footer

‎src/components/Navbar.js

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import React from 'react'
2+
3+
const Navbar = () => {
4+
return (
5+
<nav className='w-full h-[55px] bg-slate-200 flex justify-between items-center px-3'>
6+
<h4 className='text-xl font-semibold'>Brand</h4>
7+
<ul>
8+
<li className='inline-block text-sm ml-4'>Home</li>
9+
<li className='inline-block text-sm ml-4'>Shop</li>
10+
</ul>
11+
</nav>
12+
)
13+
}
14+
15+
export default Navbar

‎src/index.css

+3-13
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
1-
body {
2-
margin: 0;
3-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4-
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5-
sans-serif;
6-
-webkit-font-smoothing: antialiased;
7-
-moz-osx-font-smoothing: grayscale;
8-
}
9-
10-
code {
11-
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12-
monospace;
13-
}
1+
@tailwind base;
2+
@tailwind components;
3+
@tailwind utilities;

‎src/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,9 @@ import reportWebVitals from './reportWebVitals';
66

77
const root = ReactDOM.createRoot(document.getElementById('root'));
88
root.render(
9-
<React.StrictMode>
9+
1010
<App />
11-
</React.StrictMode>
11+
1212
);
1313

1414
// If you want to start measuring performance in your app, pass a function

‎src/pages/Home.js

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import {useEffect,useState,useCallback} from 'react'
2+
import { getProducts,getCategories} from '../util/api'
3+
4+
const Home = () => {
5+
6+
const[products,setProducts]=useState([])
7+
const[results,setResults]=useState([])
8+
const[categories,setCategories]=useState([])
9+
const[search,setSearch]=useState('')
10+
11+
useEffect(()=>{
12+
getProducts()
13+
.then(json=>{
14+
setProducts(json)
15+
setResults(json)
16+
})
17+
},[])
18+
19+
useEffect(()=>{
20+
getCategories()
21+
.then(json=>{
22+
setCategories(json)
23+
})
24+
},[])
25+
26+
const handleFilter=useCallback(()=>{
27+
let stuff= results.filter(product=>product.title.toLowerCase().includes(search.toLowerCase()))
28+
setProducts(stuff)
29+
},[results,search])
30+
31+
const loadProductByCategory=(category)=>{
32+
let stuff=results.filter(product=>product.category===category)
33+
setProducts(stuff)
34+
}
35+
36+
const loadProductByPrice=(x,y)=>{
37+
let stuff=results.filter(product=>product.price >=x && product.price <=y)
38+
setProducts(stuff)
39+
}
40+
41+
const loadAllProducts=()=>{
42+
setProducts(results)
43+
}
44+
45+
useEffect(()=>{
46+
handleFilter()
47+
},[search, handleFilter])
48+
49+
50+
return (
51+
<div className='w-full min-h-[calc(100vh-55px)] bg-slate-300'>
52+
53+
<div className='w-full flex justify-around items-center'>
54+
<button className='py-1 px-6 text-xs font-semibold bg-slate-200' onClick={loadAllProducts}>All</button>
55+
56+
{
57+
categories && categories.map((category,index)=>(
58+
<button className='py-1 px-6 text-xs font-semibold bg-slate-200' key={index} onClick={()=>loadProductByCategory(category)}>{category}</button>
59+
))
60+
}
61+
</div>
62+
<div className='w-full flex justify-center items-center pt-4'>
63+
<input type="search" name="search" value={search} placeholder='Search Products' className='w-[50%] py-1 px-1 focus:outline-blue-300' onChange={(e)=>setSearch(e.target.value)} />
64+
</div>
65+
66+
<div className='w-full flex justify-around items-center my-3'>
67+
<button className='py-1 px-4 rounded-md border-2 border-slate-50 text-xs' onClick={()=>loadProductByPrice(0,50)}>0-50</button>
68+
<button className='py-1 px-4 rounded-md border-2 border-slate-50 text-xs' onClick={()=>loadProductByPrice(51,100)}>51-100</button>
69+
<button className='py-1 px-4 rounded-md border-2 border-slate-50 text-xs' onClick={()=>loadProductByPrice(101,150)}>101-150</button>
70+
<button className='py-1 px-4 rounded-md border-2 border-slate-50 text-xs' onClick={()=>loadProductByPrice(151,200)}>151-200</button>
71+
<button className='py-1 px-4 rounded-md border-2 border-slate-50 text-xs' onClick={()=>loadProductByPrice(201,250)}>201-250</button>
72+
<button className='py-1 px-4 rounded-md border-2 border-slate-50 text-xs' onClick={()=>loadProductByPrice(251,500)}>251-500</button>
73+
<button className='py-1 px-4 rounded-md border-2 border-slate-50 text-xs' onClick={()=>loadProductByPrice(501,1000)}>501-1000</button>
74+
</div>
75+
{
76+
products.length < 1 && <div className='w-full bg-slate-800 flex justify-center items-center py-3'><span className=' font-semibold text-center text-slate-50'>No Product(s) Found</span></div>
77+
}
78+
<div className='w-full grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 px-3 py-3 gap-x-3 gap-y-8 place-items-center'>
79+
{
80+
products && products.map(product=>(
81+
<div key={product.id} className='w-full shadow-md shadow-slate-900 p-2 bg-white flex flex-col justify-center items-center'>
82+
<span className='block font-semibold text-md'>{product.title.substring(0,20)}</span>
83+
<img src={product.image} alt={product.title} className='h-[150px] object-cover' />
84+
<span className='text-xs font-semibold border-2 border-slate-300 py-1 px-1 mt-1'>${product.price}</span>
85+
</div>
86+
))
87+
}
88+
</div>
89+
90+
</div>
91+
)
92+
}
93+
94+
export default Home

‎src/util/api.js

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import axios from 'axios'
2+
3+
export const api= axios.create({
4+
baseURL:'https://fakestoreapi.com'
5+
})
6+
7+
8+
export const getProducts=async ()=>{
9+
const res=await api.get('/products')
10+
return res.data
11+
}
12+
13+
14+
export const getCategories=async ()=>{
15+
const res=await api.get('/products/categories')
16+
return res.data
17+
}

‎tailwind.config.js

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
"./src/**/*.{js,jsx,ts,tsx}",
5+
],
6+
theme: {
7+
extend: {},
8+
},
9+
plugins: [],
10+
}

0 commit comments

Comments
 (0)