Skip to content

M
mernStack
Commit 15d7fa43 authored by Venkaiah Naidu Singamchetty's avatar Venkaiah Naidu Singamchetty
Browse files
Options

Merge branch 'Prashanth' into 'master' 

Home, Navbar, Footbar

See merge request !4
parents 2675ece7 89a8bd87
Hide whitespace changes
Inline Side-by-side
Showing with 317 additions and 24 deletions
src/App.tsx
View file @ 15d7fa43
......@@ -10,12 +10,15 @@ import Product from './components/catelog/Product';
import ForgetPasswordForm from './components/ForgetPasswordForm/ForgetPasswordForm';
import { Provider } from 'react-redux';
import store from './reduxstore/store';
import Navbar from './components/Navbar/Navbar';
import Footer from './components/Footer/Footer';
function App() {
return (
<Provider store={store}>
<BrowserRouter>
<Navbar/>
<Routes>
<Route path="/" Component={Home}/>
<Route path="/login" Component={Login} />
......@@ -26,6 +29,7 @@ function App() {
<Route path="/forgot-password" Component={ForgetPasswordForm}/>
</Routes>
<Footer/>
</BrowserRouter>
</Provider>
);
......
src/components/Banner/Hero.css 0 → 100644
View file @ 15d7fa43
.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 @ 15d7fa43
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 @ 15d7fa43
.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 @ 15d7fa43
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 @ 15d7fa43
import React, { memo, useCallback, useEffect, useState } from 'react';
import axios from 'axios';
import { fetchProducts,ProductsStateType } from '../reduxstore/productsSlice';
import { fetchUsers,UsersStateType } from '../reduxstore/usersSlice';
import {useDispatch,useSelector } from 'react-redux';
import { RootState } from '../reduxstore/store';
import { fetchCartItems } from '../reduxstore/cartSlice';
import { updateCartItems ,UpdateCartStateType} from '../reduxstore/updatecartSlice';
// import axios from 'axios';
// import { fetchProducts,ProductsStateType } from '../reduxstore/productsSlice';
// import { fetchUsers,UsersStateType } from '../reduxstore/usersSlice';
// import {useDispatch,useSelector } from 'react-redux';
// import { RootState } from '../reduxstore/store';
// import { fetchCartItems } from '../reduxstore/cartSlice';
// import { updateCartItems ,UpdateCartStateType} from '../reduxstore/updatecartSlice';
import Hero from './Banner/Hero';
const Home = memo(() => {
const dispatch=useDispatch()
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 dispatch=useDispatch()
// 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 testDispatch=useCallback(()=>{
// console.log(users)
// dispatch(updateCartItems({userId:"Prashanth",updateCartlist:Items}))
// },[users])
const testDispatch=useCallback(()=>{
console.log(users)
dispatch(updateCartItems({userId:"Prashanth",updateCartlist:Items}))
},[users])
useEffect(() => {
dispatch(fetchUsers());
dispatch(fetchProducts());
dispatch(fetchCartItems("bhanu"))
}, []);
// useEffect(() => {
// dispatch(fetchUsers());
// dispatch(fetchProducts());
// dispatch(fetchCartItems("bhanu"))
// }, []);
return (
<div>
Home
<button onClick={testDispatch}>CLick</button>
<Hero/>
</div>
);
});
......
src/components/Navbar/Navbar.css 0 → 100644
View file @ 15d7fa43
.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 @ 15d7fa43
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 @ 15d7fa43
......@@ -3,7 +3,7 @@ import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import '../node_modules/bootstrap/dist/js/bootstrap.bundle'
const root = ReactDOM.createRoot(
......
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