Skip to content

Commit 6a64843

Browse files
CodeMonitor-labCodeMonitor-lab
committed
Creating Context initials
1 parent 40ed285 commit 6a64843

18 files changed

+770
-62
lines changed

‎React-Context/package-lock.json

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

‎React-Context/package.json

+4-1
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,15 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@tailwindcss/vite": "^4.1.3",
1314
"react": "^19.0.0",
1415
"react-dom": "^19.0.0",
15-
"react-router-dom": "^7.5.0"
16+
"react-router-dom": "^7.5.0",
17+
"tailwindcss": "^4.1.3"
1618
},
1719
"devDependencies": {
1820
"@eslint/js": "^9.21.0",
21+
"@faker-js/faker": "^9.6.0",
1922
"@types/react": "^19.0.10",
2023
"@types/react-dom": "^19.0.4",
2124
"@vitejs/plugin-react": "^4.3.4",

‎React-Context/src/App.css

+2
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,6 @@
22
margin: 0;
33
padding: 0;
44
box-sizing: border-box;
5+
text-decoration: none;
6+
list-style: none;
57
}

‎React-Context/src/App.jsx

+15-4
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
2+
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
43
import './App.css'
5-
import {} from './context/index'
4+
import Header from './components/Header'
5+
import Cart from './components/Cart'
6+
import Home from './pages/Home'
7+
import Login from './pages/Login'
68

79
function App() {
810

911
return (
1012
<>
11-
<h1>App</h1>
13+
<Router>
14+
<Header/>
15+
16+
<Routes>
17+
<Route path='/' element={<Home/>} />
18+
<Route path='/cart' element={<Cart/>} />
19+
<Route path='/login' element={<Login/>} />
20+
</Routes>
21+
22+
</Router>
1223
</>
1324
)
1425
}

‎React-Context/src/components/Cart.jsx

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import React from 'react'
2+
3+
const Cart = () => {
4+
return (
5+
<div>Cart</div>
6+
)
7+
}
8+
9+
export default Cart

‎React-Context/src/components/Header.jsx

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react'
2+
import Styles from './Styles/Header.module.css'
3+
import { Link } from 'react-router-dom'
4+
5+
const Header = () => {
6+
return (
7+
<main className={Styles.Header_Container}>
8+
<nav>
9+
<ul className={Styles.Header_list}>
10+
<Link to='/' ><li>Home</li></Link>
11+
<Link to='/cart' ><li>Cart</li></Link>
12+
<Link to='/login' ><li>Login</li></Link>
13+
</ul>
14+
</nav>
15+
</main>
16+
)
17+
}
18+
19+
export default Header

‎React-Context/src/components/ProductCards.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React, { useState } from 'react'
2+
import Styles from './Styles/ProductCards.module.css'
3+
4+
const ProductCards = ({ id,name,img,price,prod}) => {
5+
6+
const [cart ,setCart] = useState([]);
7+
8+
return (
9+
<>
10+
<main className={Styles.Container_prod}>
11+
<section className={Styles.product_section}>
12+
<img src={img} alt="" loading='lazy' />
13+
<article className={Styles.product_article}>
14+
<h2>{name}</h2>
15+
<p>{price}</p>
16+
{cart.includes(prod) ? (<button onClick={(()=>{setCart(cart.filter((c)=> c.id !== prod.id))})} className={Styles.Add_Cart}>Remove from Cart</button>)
17+
: (<button onClick={(()=>{setCart([setCart[cart,prod]])})} className={Styles.Add_Cart}>Add to Cart</button>)
18+
}
19+
</article>
20+
</section>
21+
</main>
22+
</>
23+
)
24+
}
25+
26+
export default ProductCards

‎React-Context/src/components/Styles/Cart.module.css

Whitespace-only changes.

‎React-Context/src/components/Styles/Header.module.css

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
.Header_Container{
2+
background-color: khaki;
3+
width: 100%;
4+
height:3rem;
5+
display: flex;
6+
justify-content: center;
7+
align-items: center;
8+
}
9+
.Header_Container nav ul{
10+
display: flex;
11+
gap: 2rem;
12+
}
13+
.Header_Container li{
14+
font-size: 1.2rem;
15+
font-family: sans-serif;
16+
font-weight: bold;
17+
color: #000;
18+
cursor: pointer;
19+
20+
&:hover{
21+
color:darkcyan;
22+
}
23+
}

‎React-Context/src/components/Styles/ProductCards.module.css

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.Container_prod{
2+
width: 100%;
3+
}
4+
5+
.product_section{
6+
border: 2px solid #000;
7+
padding: 0.5rem;
8+
border-radius: 1rem;
9+
}
10+
.product_article{
11+
background: darkcyan;
12+
padding:1rem;
13+
border-radius: 0.3rem;
14+
color: #fff;
15+
}
16+
.product_section img{
17+
border: none;
18+
width: 100%;
19+
height: 300px;
20+
background-size: cover;
21+
background-position: center;
22+
border-radius: 0.3rem;
23+
}
24+
.product_article button{
25+
width: 100%;
26+
padding: 1rem;
27+
margin-top: 1rem;
28+
cursor: pointer;
29+
}

‎React-Context/src/components/common/Counter.jsx

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React, { useState } from 'react'
2+
import CounterProvider from '../../context/CounterContext'
3+
4+
5+
const Counter = () => {
6+
const [value,setValue] = useState()
7+
8+
return (
9+
<>
10+
<main style={{textAlign:'center',padding:'2rem',margin:'2rem'}} >
11+
<div style={{display:'flex',justifyContent:'center',gap:"2rem"}}>
12+
<section style={{display:'flex',gap:"0.5rem",padding:'1rem'}}>
13+
<button type="submit">Increment</button>
14+
<button type="submit">Increment</button>
15+
<button type="submit">Increment</button>
16+
</section>
17+
<section style={{display:'flex',gap:"1rem"}}>
18+
<button type="submit">Decrement</button>
19+
<button type="submit">Decrement</button>
20+
<button type="submit">Decrement</button>
21+
</section>
22+
</div>
23+
<button style={{padding:"1rem",margin:'2rem',color:'darkblue',fontWeight:'bold'}} > Counter Value : 0</button>
24+
</main>
25+
</>
26+
)
27+
}
28+
29+
export default Counter

‎React-Context/src/context/CounterContext.jsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React, { createContext, useContext, useState } from 'react'
2+
3+
const CounterContext = createContext();
4+
5+
const useCount = ()=>{
6+
return useContext(CounterContext)
7+
}
8+
9+
const AuthProvider = ()=>{
10+
const [count,setCount] = useState('');
11+
12+
13+
14+
const value = {
15+
count,
16+
setCount,
17+
}
18+
19+
return<AuthProvider.Provider value= {value} >
20+
21+
</AuthProvider.Provider>
22+
}
23+
24+
export default AuthProvider

‎React-Context/src/context/index.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
export {AuthContext,useAuth} from './Auth/AuthContext'
1+
export {AuthContext,useAuth} from './Auth/AuthContext'
2+
export {CounterContext} from './CounterContext'

‎React-Context/src/index.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "tailwindcss";

‎React-Context/src/pages/Home.jsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React, { useState } from 'react'
2+
import { faker } from '@faker-js/faker'
3+
import Styles from '../styles/Home.module.css'
4+
import ProductCards from '../components/ProductCards'
5+
6+
faker.seed(100);
7+
8+
const Home = () => {
9+
10+
const productsArray = [...Array(105)].map(() => {
11+
return {
12+
id: faker.string.uuid(),
13+
name: faker.commerce.productName(),
14+
price: faker.commerce.price(),
15+
image: faker.image.personPortrait(),
16+
}
17+
})
18+
19+
const [products] = useState(productsArray);
20+
console.log(products);
21+
22+
return (
23+
<>
24+
<main className={Styles.Product_container}>
25+
{products.map((prod) => (
26+
<div className={Styles.products}>
27+
<ProductCards img={prod.image} name={prod.name} price={prod.price.substring(0,5)} />
28+
</div>
29+
))}
30+
</main>
31+
32+
</>
33+
)
34+
}
35+
36+
export default Home

‎React-Context/src/pages/Login.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from 'react'
2+
import Counter from '../components/common/Counter'
3+
4+
const Login = () => {
5+
return (
6+
<>
7+
<div className='font-black text-2xl border-2' >Login page </div>
8+
<Counter/>
9+
</>
10+
)
11+
}
12+
13+
export default Login

‎React-Context/src/styles/Home.module.css

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.Product_container{
2+
display: grid;
3+
grid-template-columns: repeat(3,1fr);
4+
padding: 2rem;
5+
grid-gap: 1rem 2rem;
6+
}
7+
.products{
8+
9+
}

‎React-Context/vite.config.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
import { defineConfig } from 'vite'
22
import react from '@vitejs/plugin-react'
3+
import tailwindcss from '@tailwindcss/vite'
34

45
// https://vite.dev/config/
56
export default defineConfig({
6-
plugins: [react()],
7+
plugins: [react(),tailwindcss()],
78
})
9+
10+

0 commit comments

Comments
 (0)