Skip to content

Commit

Permalink
adding new pages
Browse files Browse the repository at this point in the history
  • Loading branch information
kiranwankhade committed May 13, 2023
1 parent 444835c commit 1112e85
Show file tree
Hide file tree
Showing 18 changed files with 778 additions and 75 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-router-dom": "^6.4.5",
"react-scripts": "5.0.1",
"react-scripts": "^5.0.1",
"react-slick": "^0.29.0",
"slick-carousel": "^1.8.1",
"web-vitals": "^2.1.4"
Expand Down
4 changes: 4 additions & 0 deletions src/Components/AllRoutes.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ import LoginForm from "../Pages/LoginForm"
import Payment from "../Pages/Payment"

import OTP from "../Pages/OTP"
import LipsCatPage from "../Pages/LipsCatPage";
import FaceCatPage from "../Pages/FaceCatPage";


function AllRoutes() {
Expand All @@ -28,6 +30,8 @@ function AllRoutes() {
<Route path="/otp" element={<OTP/>} />
<Route path="/:id" element={<ItemDetails/>} />
<Route path="/payment" element={<Payment/>} />
<Route path="/lips" element={<LipsCatPage/>} />
<Route path="/face" element={<FaceCatPage/>} />


<Route path="*" element={<NotFound />} />
Expand Down
6 changes: 3 additions & 3 deletions src/Components/Carousal2.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,8 @@
background: white;
border-radius: 8px;
overflow: hidden;

height: 430px;
padding: 2px;
/* height: 430px; */
color: black;
cursor: pointer;
}
Expand All @@ -51,7 +51,7 @@
display: flex;
justify-content: space-between;
/* gap: 10px; */
padding: 5px;
padding: 2px;
}

.card-bottom>button{
Expand Down
24 changes: 3 additions & 21 deletions src/Components/Carousal2.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import axios from 'axios';

import {useToast,Text } from "@chakra-ui/react"
import { Link, useNavigate } from 'react-router-dom';
import StarRatings from './StarRatings';



Expand Down Expand Up @@ -71,22 +72,6 @@ function Carousal2({data}) {
// let wishList = localStorage.setItem("Wish-List",JSON.stringify(data))||[];

const likeFuc = () => {
// if(id){
// setLike(true);
// }else{
// setLike(false)
// }

// wishList.push(item);

// if(like == true){
// document.getElementById('heartButton').innerHTML = <FaHeart/>
// }else{
// document.getElementById('heartButton').innerHTML = <FaRegHeart/>
// }

// console.log("wishlist",wishList);
// localStorage.setItem("Wish-List",JSON.stringify(wishList));
toast({
// colorScheme:'yellow',
title: 'Added to wishlist',
Expand All @@ -106,16 +91,12 @@ function Carousal2({data}) {

const addtoCart = () => {
toast({
// colorScheme:'yellow',
title: 'Added to Cart',
description: "We've added this item to Cart",
variant:'subtle',
duration: 3000,
isClosable: true,

})

// alert("We've added this item to Cart")
}

const handleAddCart = (item) => {
Expand All @@ -138,8 +119,9 @@ function Carousal2({data}) {
alt={item.name}
onError={handleErrorImage}
/>
<Text width={"90%"} margin="auto" noOfLines={2} marginTop={10} isTruncated='true'>{item.name}</Text>
<Text width={"90%"} margin="auto" noOfLines={1} marginTop={10} isTruncated='true'>{item.name}</Text>
<Text marginTop={5} fontSize={25} fontWeight={600} color='#fc2779'>₹ {item.price}</Text>
<Text><StarRatings value={item.ratings} /></Text>
</div></Link>
<div className="card-bottom">
<button style={{display:'flex',gap:'10px', alignItems:'center',justifyContent:'center'}} onClick={()=> {
Expand Down
10 changes: 7 additions & 3 deletions src/Components/Footer1.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,23 +10,27 @@ Divider
} from "@chakra-ui/react"
import { doc } from "prettier"

import {FaAngleRight,FaFacebookF,FaTumblr,FaYoutube,FaTwitter,FaInstagram,FaPinterest} from "react-icons/fa"
import {FaAngleRight,FaFacebookF,FaTumblr,FaYoutube,FaTwitter,FaInstagram,FaPinterest, FaAngleDown} from "react-icons/fa"

import {ImMail4} from "react-icons/im"
import { Link } from "react-router-dom"

import logo from '../BlushMeLogo.png'
import { useState } from "react"


export default function Footer1(){
const [angle,setAngle] = useState(false);

const handleReadMore = () =>{
const targetDiv = document.getElementById("hideDiv");
// document.getElementById("hideDiv").style.display = "block"
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none";
setAngle(false)
} else {
targetDiv.style.display = "block";
setAngle(true)
}
}

Expand All @@ -47,8 +51,8 @@ export default function Footer1(){
<>
<Divider borderColor={'grey.900'} width='90%' margin='auto' marginTop='15px'/>
<div style={{display:'flex', alignItems:'center' , justifyItems:'flex-start' ,width:'90%',margin:'auto',marginTop:'20px'}} >
<h1 style={{fontSize:'18px', fontWeight:'600'}}>READ MORE ABOUT SUGAR COSMETICS</h1>
<button style={{fontSize:'20px', marginLeft:'10px',color:'#fb3380', cursor:'pointer'}} onClick={handleReadMore}><FaAngleRight/></button>

<button style={{display:"flex", alignItems:'center',fontSize:'20px', marginLeft:'10px',color:'#fb3380', cursor:'pointer'}} onClick={handleReadMore}><span style={{fontSize:'18px', fontWeight:'600'}}>READ MORE ABOUT SUGAR COSMETICS</span>{angle ? <FaAngleDown/>:<FaAngleRight/>}</button>
</div>
<div id="hideDiv" style={hideDiv}>
<p style={{textAlign:'justify'}}> Enhance your beauty looks with SUGAR COSMETICS
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Navbar1.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@ import { useState,useEffect } from 'react';
<div style={{display:"flex", flexDirection:"row", alignItems:"center", gap:"10px"}}>
<Icon style={linkStyle} as={FaUserCircle} />
{
firstName==="" ? <Link to='/login' style={linkStyle}>
firstName==="" ? <Link to='/loginForm' style={linkStyle}>
Login/Registration
</Link> : <Text style={linkStyle}>{firstName}</Text>
}
Expand Down
5 changes: 3 additions & 2 deletions src/Components/Navbar2.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -234,6 +234,7 @@ import {
);
};

// eslint-disable-next-line no-sparse-arrays
const NAV_ITEMS = [
{
label: 'MAKEUP',
Expand All @@ -249,7 +250,7 @@ import {
'VALUE SETS',
'GIFTING'
],
href: '#',
href: '/lips',
},
{
label: 'FACE',
Expand All @@ -264,7 +265,7 @@ import {
'FACE PALETTES',
'VALUE SETS',
],
href: '#',
href: '/face',
},
{
label: 'EYES',
Expand Down
34 changes: 34 additions & 0 deletions src/Components/StarRatings.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from "react";

const Star = ({ marked, starId }) => {
return (
<span data-star-id={starId} className="star" >
{marked ? '\u2605' : '\u2606'}
</span>
);
};
const StarRatings = ({ value }) =>{

const [rating, setRating] = React.useState(parseInt(value) || 0);
const [selection, setSelection] = React.useState(0);

// const hoverOver = event => {
// let val = 0;
// if (event && event.target && event.target.getAttribute('data-star-id'))
// val = event.target.getAttribute('data-star-id');
// setSelection(val);
// };
return (
<div>
{Array.from({ length: 5 }, (v, i) => (
<Star
starId={i + 1}
key={`star_${i + 1}`}
marked={selection ? selection >= i + 1 : rating >= i + 1}
/>
))}
</div>
);
};

export default StarRatings;
12 changes: 6 additions & 6 deletions src/Pages/Cart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@ import { Box, Flex, Grid, GridItem,
}


const handleRemove = (id) => {
const handleRemove = async(id) => {
return axios.delete(`https://busy-peplum-fawn.cyclic.app/cart/${id}`);
}

Expand Down Expand Up @@ -146,18 +146,18 @@ import { Box, Flex, Grid, GridItem,
<Text width={"80%"} fontSize={25} margin='auto' > Cart is Empty </Text>
<Link to={'/'}><Button width={"10%"} margin='auto' display={'block'} marginBottom={8} marginTop={8} bg={'black'} color='white' padding={2} _hover={'#00000'}> GO HOME</Button></Link>
</div> :
<Flex gap='5' width={"95%"} margin='auto'>
<div style={{width:'100%' , margin:'auto',display:'grid' , gridTemplateColumns:'repeat(3,1fr)' , gap:'5px',marginTop:'30px' ,marginBottom:'20px',flex:'6'}}>
<Flex gap='8' width={"95%"} margin='auto'>
<div style={{width:'100%' , margin:'auto',display:'grid' , gridTemplateColumns:'repeat(2,1fr)' , gap:'5px',marginTop:'30px' ,marginBottom:'20px',flex:'6'}}>
{
items.map((el)=> (
<div style={{width:'100%' , boxShadow:" rgba(0, 0, 0, 0.35) 0px 5px 15px"}}>
<div style={{width:'100%' , margin:'10px 0px', boxShadow:" rgba(0, 0, 0, 0.35) 0px 5px 15px"}}>
<div >
<img
style={{display:'block', margin:'auto',width:'120px'}}
style={{display:'block', margin:'auto',width:'120px',height:'120px'}}
src={el.image}
alt="cartImage"
/>
<Text width={"60%"} margin="auto" noOfLines={3} marginTop={1} isTruncated='true'>{el.name}</Text>
<Text width={"60%"} margin="auto" noOfLines={2} marginTop={1} isTruncated='true'>{el.name}</Text>
<Text marginTop={5} fontSize={25} fontWeight={600} color='#fc2779'>₹ {el.price}</Text>
</div>
<div style={{width:'80%',margin:'auto'}}>
Expand Down
Loading

0 comments on commit 1112e85

Please sign in to comment.