Skip to content

M
mernStack
Commit 9ee61b1c authored by GithubRepositoryPrashanth's avatar GithubRepositoryPrashanth
Browse files
Options

Home, Navbar, Footbar

parent 14504ec9
Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 23 deletions
package-lock.json
View file @ 9ee61b1c
...@@ -17,6 +17,7 @@ ...@@ -17,6 +17,7 @@
"@types/react": "^18.2.55", "@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19", "@types/react-dom": "^18.2.19",
"axios": "^1.6.7", "axios": "^1.6.7",
"bootstrap": "^5.2.3",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "^4.18.2", "express": "^4.18.2",
"mongodb": "^6.3.0", "mongodb": "^6.3.0",
...@@ -3353,6 +3354,16 @@ ...@@ -3353,6 +3354,16 @@
} }
} }
}, },
"node_modules/@popperjs/core": {
"version": "2.11.8",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
}
},
"node_modules/@reduxjs/toolkit": { "node_modules/@reduxjs/toolkit": {
"version": "2.2.0", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.0.tgz", "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.2.0.tgz",
...@@ -5690,6 +5701,24 @@ ...@@ -5690,6 +5701,24 @@
"resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz", "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
"integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww==" "integrity": "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="
}, },
"node_modules/bootstrap": {
"version": "5.2.3",
"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.2.3.tgz",
"integrity": "sha512-cEKPM+fwb3cT8NzQZYEu4HilJ3anCrWqh3CHAok1p9jXqMPsPTBhU25fBckEJHJ/p+tTxTFTsFQGM+gaHpi3QQ==",
"funding": [
{
"type": "github",
"url": "https://github.com/sponsors/twbs"
},
{
"type": "opencollective",
"url": "https://opencollective.com/bootstrap"
}
],
"peerDependencies": {
"@popperjs/core": "^2.11.6"
}
},
"node_modules/brace-expansion": { "node_modules/brace-expansion": {
"version": "1.1.11", "version": "1.1.11",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz", "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
......
package.json
View file @ 9ee61b1c
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
"@types/react": "^18.2.55", "@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19", "@types/react-dom": "^18.2.19",
"axios": "^1.6.7", "axios": "^1.6.7",
"bootstrap": "^5.2.3",
"cors": "^2.8.5", "cors": "^2.8.5",
"express": "^4.18.2", "express": "^4.18.2",
"mongodb": "^6.3.0", "mongodb": "^6.3.0",
......
src/App.tsx
View file @ 9ee61b1c
...@@ -8,12 +8,15 @@ import Profile from './components/Profile/Profile'; ...@@ -8,12 +8,15 @@ import Profile from './components/Profile/Profile';
import ForgetPasswordForm from './components/ForgetPasswordForm/ForgetPasswordForm'; import ForgetPasswordForm from './components/ForgetPasswordForm/ForgetPasswordForm';
import { Provider } from 'react-redux'; import { Provider } from 'react-redux';
import store from './reduxstore/store'; import store from './reduxstore/store';
import Navbar from './components/Navbar/Navbar';
import Footer from './components/Footer/Footer';
function App() { function App() {
return ( return (
<Provider store={store}> <Provider store={store}>
<BrowserRouter> <BrowserRouter>
<Navbar/>
<Routes> <Routes>
<Route path="/" Component={Home}/> <Route path="/" Component={Home}/>
<Route path="/login" Component={Login} /> <Route path="/login" Component={Login} />
...@@ -23,6 +26,7 @@ function App() { ...@@ -23,6 +26,7 @@ function App() {
<Route path="/forgot-password" Component={ForgetPasswordForm}/> <Route path="/forgot-password" Component={ForgetPasswordForm}/>
</Routes> </Routes>
<Footer/>
</BrowserRouter> </BrowserRouter>
</Provider> </Provider>
); );
......
src/components/Banner/Hero.css 0 → 100644
View file @ 9ee61b1c
.hero{
height: 100vh;
background-image: linear-gradient(180deg,#fde1ff,#e1ffea22 60%);
display: flex;
}
.hero-left{
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
gap: 20px;
padding-left: 180px;
line-height: 1.1;
}
.hero-left p{
font-size: 100px;
font-weight: 700;
color: #171717;;
}
.hand-hand-icon{
display: flex;
align-items: center;
gap:20px;
}
.hand-hand-icon img{
width: 105px;
}
.hero_latest-btn {
display: flex;
justify-content: center;
align-items: center;
gap:15px;
width: 310px;
height: 70px;
border-radius: 75px;
margin-top: 30px;
background: #ff4141;
color: white;
font-size: 500;
}
.hero-right{
flex:1;
display: flex;
align-items: center;
justify-content: center;
}
\ No newline at end of file
src/components/Banner/Hero.tsx 0 → 100644
View file @ 9ee61b1c
import React from 'react';
import './Hero.css'
import hand_icon from "./hand_icon.png"
import arrow_icon from "./arrow.png"
import hero_image from "./hero_image.png"
const Hero = () => {
return (
<div className='hero'>
<div className='hero-left'>
<h2>NEW ARRIVALS ONLY</h2>
<div>
<div className='hand-hand-icon'>
<p>new</p>
<img src={hand_icon} alt=''/>
</div>
<p>Collections</p>
<p>for everyone</p>
</div>
<div className='hero_latest-btn'>
<img src={arrow_icon} alt=""/>
</div>
</div>
<div className='hero-right'>
<img src={hero_image} alt=""/>
</div>
</div>
);
};
export default Hero;
\ No newline at end of file
src/components/Footer/Footer.css 0 → 100644
View file @ 9ee61b1c
.footer{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 50px;
}
.footer-logo{
display: flex;
align-items: center;
gap: 20px;
}
.footer-logo p{
color: #383838;
font-size: 46px;
font-weight: 700;
}
.footer-link{
display: flex;
list-style: none;
gap:50px;
color: #252525;
font-size: 20px;
}
.footer-link li{
cursor: pointer;
}
.footer-social-icon{
display: flex;
gap:20px;
}
.footer-icons-container{
padding: 2px;
padding-bottom: 2px;
background: #fbfbfb;
border: 1px solid #ebebeb;
}
.footer-copyright{
display: flex;
flex-direction: column;
align-items: center;
gap:30px;
width: 100%;
margin-bottom: 30px;
color: #1a1a1a;
font-size: 20px;
}
.footer-copyright hr{
width:80%;
border: none;
border-radius: 10px;
height: 3px;
background: #c7c7c7;
}
\ No newline at end of file
src/components/Footer/Footer.js 0 → 100644
View file @ 9ee61b1c
import React from 'react';
import './Footer.css';
import footer_logo from './logo_big.png' ;
import instagram_icon from "./instagram_icon.png";
import pintester_icon from "./pintester_icon.png";
import whatsapp_icon from "./whatsapp_icon.png";
const Footer = () => {
return (
<div className='footer'>
<div className='footer-logo'>
</div>
<ul className='footer-link'>
<li>Products</li>
<li>About</li>
<li>Contact</li>
</ul>
<div className='footer-social-icon'>
<div className='footer-icons-container'>
<img src={instagram_icon} alt=""/>
</div>
<div className='footer-icons-container'>
<img src={pintester_icon} alt=""/>
</div>
<div className='footer-icons-container'>
<img src={whatsapp_icon} alt=""/>
</div>
</div>
<div className='footer-copyright'>
<hr/>
<p>Copyright @ 2024 - All Right Reserved. Developed by PVP</p>
</div>
</div>
);
};
export default Footer;
\ No newline at end of file
src/components/Home.tsx
View file @ 9ee61b1c
import React, { memo, useCallback, useEffect, useState } from 'react'; import React, { memo, useCallback, useEffect, useState } from 'react';
import axios from 'axios'; // import axios from 'axios';
import { fetchProducts,ProductsStateType } from '../reduxstore/productsSlice'; // import { fetchProducts,ProductsStateType } from '../reduxstore/productsSlice';
import { fetchUsers,UsersStateType } from '../reduxstore/usersSlice'; // import { fetchUsers,UsersStateType } from '../reduxstore/usersSlice';
import {useDispatch,useSelector } from 'react-redux'; // import {useDispatch,useSelector } from 'react-redux';
import { RootState } from '../reduxstore/store'; // import { RootState } from '../reduxstore/store';
import { fetchCartItems } from '../reduxstore/cartSlice'; // import { fetchCartItems } from '../reduxstore/cartSlice';
import { updateCartItems ,UpdateCartStateType} from '../reduxstore/updatecartSlice'; // import { updateCartItems ,UpdateCartStateType} from '../reduxstore/updatecartSlice';
import Hero from './Banner/Hero';
const Home = memo(() => { const Home = memo(() => {
const dispatch=useDispatch() // const dispatch=useDispatch()
const users=useSelector((state:RootState)=> state.cart.cartItems) // const users=useSelector((state:RootState)=> state.cart.cartItems)
const Items=[{"_id":"65cc84a4a897e49b4c752f23","id":1,"title":"Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops","price":109.95,"description":"Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday","category":"men's clothing","image":"https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg","rating":{"rate":3.9,"count":120}},{"_id":"65cc84a4a897e49b4c752f24","id":2,"title":"Mens Casual Premium Slim Fit T-Shirts ","price":22.3,"description":"Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.","category":"men's clothing","image":"https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg","rating":{"rate":4.1,"count":259}},{"_id":"65cc84a4a897e49b4c752f25","id":3,"title":"Mens Cotton Jacket","price":55.99,"description":"great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.","category":"men's clothing","image":"https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg","rating":{"rate":4.7,"count":500}}] // const Items=[{"_id":"65cc84a4a897e49b4c752f23","id":1,"title":"Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops","price":109.95,"description":"Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday","category":"men's clothing","image":"https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg","rating":{"rate":3.9,"count":120}},{"_id":"65cc84a4a897e49b4c752f24","id":2,"title":"Mens Casual Premium Slim Fit T-Shirts ","price":22.3,"description":"Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.","category":"men's clothing","image":"https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg","rating":{"rate":4.1,"count":259}},{"_id":"65cc84a4a897e49b4c752f25","id":3,"title":"Mens Cotton Jacket","price":55.99,"description":"great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.","category":"men's clothing","image":"https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg","rating":{"rate":4.7,"count":500}}]
// const testDispatch=useCallback(()=>{
// console.log(users)
// dispatch(updateCartItems({userId:"Prashanth",updateCartlist:Items}))
// },[users])
const testDispatch=useCallback(()=>{ // useEffect(() => {
console.log(users) // dispatch(fetchUsers());
dispatch(updateCartItems({userId:"Prashanth",updateCartlist:Items})) // dispatch(fetchProducts());
},[users]) // dispatch(fetchCartItems("bhanu"))
// }, []);
useEffect(() => {
dispatch(fetchUsers());
dispatch(fetchProducts());
dispatch(fetchCartItems("bhanu"))
}, []);
return ( return (
<div> <div>
Home <Hero/>
<button onClick={testDispatch}>CLick</button>
</div> </div>
); );
}); });
......
src/components/Navbar/Navbar.css 0 → 100644
View file @ 9ee61b1c
.navbar{
display: flex;
justify-content: space-around;
padding: 16px;
box-shadow: 0 1px 3px -2px black;
}
.nav-logo{
display: flex;
align-items: center;
gap: 10px;
}
.nav-logo p{
color: #171717;
font-size: 38px;
font-weight: 600;
}
.nav-menu{
display: flex;
align-items: center;
list-style-type: none;
gap:50px;
color: #626262;
font-size:20px ;
font-weight: 500;
}
.nav-menu li{
display: flex;
flex-direction: column;
align-items: center;
gap: 3px;
cursor: pointer;
}
.nav-menu hr{
border: none;
width: 80%;
height:3px;
border-radius: 10px;
background-color:#FF4141 ;
}
.nav-login-cart{
display: flex;
align-items: center;
gap:45px
}
.nav-login-cart button{
width: 157px;
height: 58px;
outline: none;
border: 1px solid #7a7a7a;
border-radius: 75px;
color:#515151;
font-size: 20px;
font-weight: 500;
background: white;
cursor: pointer;
}
.nav-login-cart button:active{
background-color: #c0b9b9;
}
.nav-cart-count{
width: 22px;
height: 22px;
display: flex;
justify-content: center;
align-items: center;
margin-top: -35px;
margin-left: -55px;
border-radius: 11px;
font-size: 14px;
background-color:red;
color: white;
}
\ No newline at end of file
src/components/Navbar/Navbar.tsx 0 → 100644
View file @ 9ee61b1c
import React, { useState } from 'react';
import './Navbar.css'
import logo from './logo.png'
import { Link } from 'react-router-dom';
const Navbar = () => {
// const [menu,setMenu]=useState("Shop")
return (
<div className='navbar'>
<div className='nav-logo'>
<img src={logo} alt=""/>
<p>SHOPPER</p>
</div>
{/* <ul className="nav-menu">
<li onClick={()=>setMenu("Shop")} ><Link style={{textDecoration:"none"}} to="/">Shop</Link> {menu==="Shop"?<hr/>:<></>}</li>
<li onClick={()=>setMenu("mens")} ><Link style={{textDecoration:"none"}} to="/mens">Men</Link> {menu==="mens"?<hr/>:<></>}</li>
<li onClick={()=>setMenu("Womens")}><Link style={{textDecoration:"none"}} to="/Womens">Women</Link> {menu==="Womens"?<hr/>:<></>}</li>
<li onClick={()=>setMenu("kids")}><Link style={{textDecoration:"none"}} to="/Kids">Kids</Link> {menu==="kids"?<hr/>:<></>}</li>
</ul> */}
<div className='nav-login-cart'>
<Link to="/login"><button >Login</button> </Link>
<Link to="/register"><button >Register</button> </Link>
</div>
</div>
);
};
export default Navbar;
\ No newline at end of file
src/index.tsx
View file @ 9ee61b1c
...@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client'; ...@@ -3,6 +3,8 @@ import ReactDOM from 'react-dom/client';
import './index.css'; import './index.css';
import App from './App'; import App from './App';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.bundle'
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement document.getElementById('root') as HTMLElement
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment