diff --git a/minishop/src/App.css b/minishop/src/App.css deleted file mode 100644 index 4ad480a..0000000 --- a/minishop/src/App.css +++ /dev/null @@ -1,40 +0,0 @@ -@import url('https://fonts.googleapis.com/css2?family=Metrophobic&display=swap'); - -.App { - - font-family: 'Metrophobic', sans-serif; - text-align: center; - background-image: url("https://media.istockphoto.com/id/586058260/photo/white-wood-panel-texture-background.jpg?s=612x612&w=0&k=20&c=Hcuxx1LJp6O_EHGQAoeN4BNAQX8pIGuQStAOkpwHCBk="); - -} - -@media (prefers-reduced-motion: no-preference) { - .App-logo { - animation: App-logo-spin infinite 20s linear; - } -} - -.App-header { - background-color: #282c34; - min-height: 100vh; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - font-size: calc(10px + 2vmin); - color: white; -} - -.App-link { - color: #61dafb; -} - -@keyframes App-logo-spin { - from { - transform: rotate(0deg); - } - - to { - transform: rotate(360deg); - } -} \ No newline at end of file diff --git a/minishop/src/App.js b/minishop/src/App.js deleted file mode 100644 index 503cd1c..0000000 --- a/minishop/src/App.js +++ /dev/null @@ -1,23 +0,0 @@ - -import './App.css'; - - - -import Allroute from './Routes/AllRoutes'; -import 'bootstrap/dist/css/bootstrap.min.css'; -import { Box } from '@chakra-ui/react'; -import Footer from './components/Footer/Footer'; -function App() { - - - return ( -
- - - -
- ); -} - -export default App; diff --git a/minishop/src/DemoPagesBySachin/DLogin.jsx b/minishop/src/DemoPagesBySachin/DLogin.jsx deleted file mode 100644 index 6ccc591..0000000 --- a/minishop/src/DemoPagesBySachin/DLogin.jsx +++ /dev/null @@ -1,201 +0,0 @@ -import React, { useContext, useRef, useState } from "react"; -import { - useToast, - Button, - useDisclosure, - Flex, - Heading, - Text, - FormControl, - Input, - Stack, -} from "@chakra-ui/react"; -import { Link, useNavigate } from "react-router-dom"; -import "./Login.css"; -import GoogleButton from "react-google-button"; -// import { AuthContext } from "../Pages/login&signup/AuthContextProvider"; -import { - Modal, - ModalBody, - ModalCloseButton, - ModalContent, - ModalOverlay, -} from "@chakra-ui/modal"; -import {useDispatch, useSelector} from 'react-redux' -import { loginWithGoogle, userLogin } from "../redux/Auth/auth.actions"; -import { useEffect } from "react"; -const userInit = { - email: "", - password: "", -}; - - - -const DLogin = () => { - const {isauth, userData}=useSelector(val=>val.authUser) - const nav = useNavigate() - const dispatch = useDispatch() - const toast = useToast(); - const [user, setUser] = useState(userInit); - const [error, setError] = useState(""); - // const { logout } = useContext(AuthContext); - const emailRef = useRef(null); - // const logoutUser = async () => { - // try { - // await logout(); - // } catch (error) { - // console.log(error.message); - // } - // }; - // const { loginUser, forgotPassword, continueWithGoogle } =useContext(AuthContext); - const { isOpen, onOpen, onClose } = useDisclosure(); - const handleChange = (e) => { - setUser({ ...user, [e.target.type]: e.target.value }); - }; - const handleSubmit = (e) => { - e.preventDefault(); - dispatch(userLogin(user)) - }; - - useEffect(()=>{ - if(isauth === true){ - window.location.href='/' - } // went to the home page after login - },[isauth]) - - const forgotPasswordHandler = async () => { - const email = emailRef.current.value; - if (email) - try { - // await forgotPassword(email); - console.log("RESET mail sent"); - } catch (e) { - setError(e.message); - console.log(e.message); - } - }; - return ( -
-
-
-
-

Login

-
- - Email - -
-
- - Password - -
-
- - Forgot password? - -
-
- - {/* */} -
-
-

Or login with

-
- dispatch(loginWithGoogle())} /> -
-

Have You Not Register Yet?

- -
Register
- -
- - - - - - - - - Reset password - - - You'll get an email with a reset link - - - - - - - - - - - - - -
-
-
- ); -}; -export default DLogin; \ No newline at end of file diff --git a/minishop/src/DemoPagesBySachin/DSign.jsx b/minishop/src/DemoPagesBySachin/DSign.jsx deleted file mode 100644 index de88c02..0000000 --- a/minishop/src/DemoPagesBySachin/DSign.jsx +++ /dev/null @@ -1,88 +0,0 @@ -import React, { useContext, useState } from "react"; -import { useToast, Button } from "@chakra-ui/react"; -import { Link } from "react-router-dom"; -import "./Sign.css"; -import { AuthContext } from "../Pages/login&signup/AuthContextProvider"; -const userInit = { - email: "", - password: "", -}; -const DSign = () => { - const toast = useToast(); - const [user, setUser] = useState(userInit); - const [error, setError] = useState(""); - const { createUser } = useContext(AuthContext); - const handleChange = (e) => { - setUser({ ...user, [e.target.type]: e.target.value }); - }; - const handleSubmit = async (e) => { - e.preventDefault(); - try { - await createUser(user.email, user.password); - } catch (e) { - setError(e.message); - console.log(e.message); - } - }; - return ( -
-
-
-
-

Register

-
- - Name - -
-
- - Email - -
-
- - Password - -
-
-

Already have an account?

- -
Login
- -
-
- -
-
-
-
-
- ); -}; -export default DSign; \ No newline at end of file diff --git a/minishop/src/DemoPagesBySachin/DemoSimiler.jsx b/minishop/src/DemoPagesBySachin/DemoSimiler.jsx deleted file mode 100644 index d0ced2c..0000000 --- a/minishop/src/DemoPagesBySachin/DemoSimiler.jsx +++ /dev/null @@ -1,91 +0,0 @@ -import React from "react"; -import "./Demosimiler.scss"; -import { BsStarFill } from "react-icons/bs"; -import { Button, Text, useToast } from "@chakra-ui/react"; -import axios from "axios"; - - -import Slider from 'react-slick'; -import 'slick-carousel/slick/slick.css'; -import 'slick-carousel/slick/slick-theme.css'; -import { Link, useNavigate } from "react-router-dom"; -import { FaHeart } from "react-icons/fa"; - -const DemoSimiler = ({data}) => { - - const navigate = useNavigate(); - - const settings = { - dots: false, - infinite: false, - speed: 500, - slidesToShow: 4, - slidesToScroll: 4, - initialSlide: 0, - responsive: [ - { - breakpoint: 1024, - settings: { - slidesToShow: 2, - slidesToScroll: 2, - infinite: true, - dots: true, - }, - }, - { - breakpoint: 600, - settings: { - slidesToShow: 2, - slidesToScroll: 2, - initialSlide: 2, - }, - }, - { - breakpoint: 480, - settings: { - slidesToShow: 1, - slidesToScroll: 1, - }, - }, - ], - }; - - - return ( -
- - - { - data?.map((el,index) => ( -
- - name -

{el.brand}

-
-

- Price: ₹ {el.price} -

-
-

- {el.rating}
- -
- -
- - ))} - - - - -
- - ); -}; - -export default DemoSimiler; diff --git a/minishop/src/DemoPagesBySachin/Demosimiler.scss b/minishop/src/DemoPagesBySachin/Demosimiler.scss deleted file mode 100644 index f4ac77b..0000000 --- a/minishop/src/DemoPagesBySachin/Demosimiler.scss +++ /dev/null @@ -1,93 +0,0 @@ - -.slick-prev:before, .slick-next:before { - font-size: 30px; - color: grey; -} -.slick-slide > div { - width: 75%; - margin: auto; - margin: 0 40px; -} -.slick-list { - margin: 0 -10px; -} - - -.proMainDiv{ - width: 90%; - margin: auto; - margin-top: 12px; -} - -.prodiv{ - width: 250px; - margin: auto; - height: 350px; - background-color: white; - padding: 10px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; - border-radius: 10px; - -} -.proName{ - font-weight: bolder; - letter-spacing: 1px; - font-size: 20px; -} - -.prodiv img{ - width: 100%; - height: 70%; - margin: auto; -} - .proPrice { - - font-size: 18px; -} -.proPrice span { - font-weight: bold; - font-size: 20px; - color: rgb(248, 57, 57); -} -.addtocart{ - border: 1px solid teal; - // background-color: rgb(67, 67, 67); - padding: 5px 15px; - // color: rgb(255, 251, 251); - border-radius: 5px; - margin: auto; - font-weight: bold; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - margin-top: 5px; -} -.addtocart:hover{ - border: none; -// color:white; -background: rgb(103,101,102); -background: radial-gradient(circle, rgba(103,101,102,1) 0%, rgba(123,147,175,1) 75%); -} -.divPriceRating{ - display: flex; - flex-direction: row; - justify-content: space-around; - width: 90%; - margin: auto; -} -.divStar{ - display: flex; - flex-direction: row; - justify-content: space-between; - // border: 1px solid red; - gap: 5px; - margin-top: 3px; - text-align: center; - align-content: center; -} - -.divStar p{ - margin-top: 2px; - color: green; -} -.divStar span{ - color:rgb(9, 10, 9) ; -} \ No newline at end of file diff --git a/minishop/src/DemoPagesBySachin/Login.css b/minishop/src/DemoPagesBySachin/Login.css deleted file mode 100644 index fa185d1..0000000 --- a/minishop/src/DemoPagesBySachin/Login.css +++ /dev/null @@ -1,174 +0,0 @@ - - - - - .MainDiv{ - border: 1px solid rgb(249, 249, 249); - -height: 620px; - padding: 70px 0px 0px 0px; -margin: 0; - -box-sizing: border-box; -font-family: "Poppins", sans-serif; - } -.box { - position: relative; - - width: 32%; - border-radius: 10px; - height: 500px; - margin: auto; - box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; - background: linear-gradient(0deg, black, black, rgb(44, 73, 73)); -} - - -.form { - position: absolute; - - margin: auto; - - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - text-align: start; -} -.form h2 { - color: #45f3ff; - font-weight: bold; - text-align: center; - font-size: 40px; - -} -.inputBox { - position: relative; - - width: 320px; - margin: auto; - justify-content: center; - text-align: center; - align-content: center; - margin-top: 10px; -} -.inputBox input { - position: relative; - width: 100%; - - background: transparent; - border: none; - outline: none; - color: #23242a; - font-size: 1em; - letter-spacing: 0.05em; - -} -.inputBox span { - position: absolute; - left: 0; - padding: 20px 0px 10px; - font-size: 1em; - color: #8f8f8f; - pointer-events: none; - letter-spacing: 0.05em; - transition: 0.5s; -} -.inputBox input:valid ~ span, -.inputBox input:focus ~ span { - color: #45f3ff; - transform: translateX(0px) translateY(-34px); - font-size: 0.75em; -} -.inputBox i { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 2px; - background-color: #00eeff; - border-radius: 4px; - transition: 0.5s; - pointer-events: none; - z-index: 9; -} -.inputBox input:valid ~ i, -.inputBox input:focus ~ i { - height: 30px; -} -.forgetPass{ - - color: white; - text-align: start; - margin-top: 20px; -} -.submit { - border: none; - outline: none; - - padding: 7px 25px; - background-color: rgb(206, 204, 201); - margin-top: 20px; - border-radius: 4px; - font-weight: bold; - letter-spacing: 1px; - cursor: pointer; - width: 100%; - margin-left: -250px; - margin: auto; - align-items: start; - align-content: start; -} -.submit:hover { - opacity: 0.5; - -} -.Divsubmit{ - - align-items: start; -text-align: start; -margin-top: 20px; -} -.signDiv { - display: flex; - justify-content: space-between; - - margin-top: 25px; - width: 100%; - align-items: center; - - margin-bottom: 20px; -} -.signDiv p { - font-size: 13px; - letter-spacing: 0.1em; - color: white; -} -.sign { - color: #45f3ff; - font-size: 15px; - - font-weight: lighter; -} - -.sign:hover { - cursor: pointer; - color: red; -} - - - - - - .orDiv{ - - color: rgb(153, 151, 151); - margin-top: 10px; - margin-bottom: 10px; - - text-align: center; - font-weight: bold; - } -.google{ - border: 1px solid red; -} \ No newline at end of file diff --git a/minishop/src/DemoPagesBySachin/Sign.css b/minishop/src/DemoPagesBySachin/Sign.css deleted file mode 100644 index a3af410..0000000 --- a/minishop/src/DemoPagesBySachin/Sign.css +++ /dev/null @@ -1,200 +0,0 @@ -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Poppins", sans-serif; -} -.box { - position: relative; - margin: 10% auto 0; - width: 50%; - height: 450px; - - background: linear-gradient(0deg, black, black, rgb(44, 73, 73)); -} - -.form { - position: absolute; - z-index: 10; - margin: auto; - - border-radius: 8px; - inset: 2px; - padding: 50px 40px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; -} -.form h2 { - color: #45f3ff; - font-weight: 500; - font-size: 25px; - text-align: center; - letter-spacing: 0.1em; -} -.inputBox { - position: relative; - width: 60%; - margin-top: 35px; -} -.inputBox input { - position: relative; - width: 100%; - padding: 20px 10px 10px; - background: transparent; - border: none; - outline: none; - color: #23242a; - font-size: 1em; - letter-spacing: 0.05em; - z-index: 10; -} -.inputBox span { - position: absolute; - left: 0; - padding: 20px 0px 10px; - font-size: 1em; - color: #8f8f8f; - pointer-events: none; - letter-spacing: 0.05em; - transition: 0.5s; -} -.inputBox input:valid ~ span, -.inputBox input:focus ~ span { - color: #45f3ff; - transform: translateX(0px) translateY(-34px); - font-size: 0.75em; -} -.inputBox i { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 2px; - background-color: #00eeff; - border-radius: 4px; - transition: 0.5s; - pointer-events: none; - z-index: 9; -} -.inputBox input:valid ~ i, -.inputBox input:focus ~ i { - height: 30px; -} - -.submit { - border: none; - outline: none; - background-color: #45f3ff; - padding: 11px 25px; - margin-top: 20px; - border-radius: 4px; - font-weight: 700; - cursor: pointer; - width: 100px; - margin-left: -250px; -} -.submit:active { - opacity: 0.5; -} - -.signDiv { - display: flex; - justify-content: space-between; - width: 100%; - margin-top: 25px; - width: 60%; - align-items: center; - -} -.signDiv p { - font-size: 13px; - letter-spacing: 0.1em; - color: white; -} -.sign { - color: #45f3ff; - font-size: 15px; - - font-weight: lighter; -} - -.sign:hover { - cursor: pointer; - color: red; -} - -.signDiv1 { - display: flex; - justify-content: space-between; - width: 100%; - - margin-top: 10px; -} -.signDiv1 p { - font-size: 13px; - letter-spacing: 0.1em; - color: white; -} -.sign1 { - color: #45f3ff; - font-size: 15px; - - font-weight: lighter; -} - -.sign1:hover { - cursor: pointer; - color: red; -} - -.inputBox1 { - position: relative; - width: 300px; - margin-top: 20px; -} -.inputBox1 input { - position: relative; - width: 100%; - padding: 5px 20px 10px; - background: transparent; - border: none; - outline: none; - color: #23242a; - font-size: 1em; - letter-spacing: 0.05em; - z-index: 10; -} -.inputBox1 span { - position: absolute; - left: 0; - padding: 5px 0px 10px; - font-size: 1em; - color: #8f8f8f; - pointer-events: none; - letter-spacing: 0.05em; - transition: 0.5s; -} -.inputBox1 input:valid ~ span, -.inputBox1 input:focus ~ span { - color: #45f3ff; - transform: translateX(0px) translateY(-20px); - font-size: 0.75em; -} -.inputBox1 i { - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 2px; - background-color: #00eeff; - border-radius: 4px; - transition: 0.5s; - pointer-events: none; - z-index: 9; -} -.inputBox1 input:valid ~ i, -.inputBox1 input:focus ~ i { - height: 30px; -} diff --git a/minishop/src/Global.scss b/minishop/src/Global.scss deleted file mode 100644 index 789a225..0000000 --- a/minishop/src/Global.scss +++ /dev/null @@ -1,7 +0,0 @@ -$mainColor: #15023a; -$width: 768px; -@mixin mobile { - @media (max-width: #{$width}) { - @content - } -} \ No newline at end of file diff --git a/minishop/src/Pages/Cart/Cart.jsx b/minishop/src/Pages/Cart/Cart.jsx deleted file mode 100644 index 06e8ce4..0000000 --- a/minishop/src/Pages/Cart/Cart.jsx +++ /dev/null @@ -1,312 +0,0 @@ -import { - Button, - Flex, - Heading, - Input, - InputGroup, - InputRightElement, - Modal, - ModalBody, - ModalCloseButton, - ModalContent, - ModalFooter, - ModalHeader, - ModalOverlay, - Spinner, - Table, - Tbody, - Td, - Th, - Thead, - Tr, - useDisclosure, - useToast, -} from "@chakra-ui/react"; -import React, { useEffect, useState } from "react"; -import { useDispatch, useSelector } from "react-redux"; -import { - cartActions, - cartValue, - deleteCartItem, - updateCarts, -} from "../../redux/Cart/Cart.actions"; -import "./Cart.scss"; -import { FaShippingFast } from "react-icons/fa"; -import { AiFillDelete } from "react-icons/ai"; -import { SlMinus, SlPlus } from "react-icons/sl"; -import { RiDeleteBinLine } from "react-icons/ri"; -import { TbDiscount2 } from "react-icons/tb"; -import { Link } from "react-router-dom"; -import Payment from "../checkout/Payment"; -import Navbar from "../../components/Navbar/Navbar"; -import { getUser, userCartUpdate } from "../../redux/AddUser/User.actions"; -const Cart = () => { - const { isOpen, onOpen, onClose } = useDisclosure(); - const handelOnSubtmi=()=>{ - onClose() - } - const {loading , error, cartData,totalPrice} = useSelector((store) => store.cart); - // console.log('totalPriceSelector:', totalPrice); - - -// console.log( "CartData", cartData) - - const dispatch = useDispatch(); - const { isauth, userData } = useSelector((val) => val.authUser); - const changePrice = (str) => { - let res = str.replace(/\D/g, ""); - return parseInt(res); - }; - - const [totalCartPrice,setTotalCartPrice] = useState(totalPrice); - const updatePrice = () => { - setTotalCartPrice( - cartData.reduce( - (acc, el) => acc + changePrice(el.price) * el.qty, - 0 - ) - - ); - } - useEffect(() => { - dispatch(cartActions(userData.name)) - - updatePrice() - // } -}, [cartData.length, dispatch, totalPrice, userData.name]); - -const toast = useToast(); - //------Offer Function-------------------------------------------------------------------- // - const [apply,setApply] = useState(""); - const offerClick = () => { - // console.log('val:', totalCartPrice) - // console.log("Apply text",apply); - if(apply === "VS50"){ - setTotalCartPrice(cartData.reduce( - (acc, el) => acc + changePrice(el.price) * el.qty *50/100, - 0 - )); - setApply(""); - toast({ - title: "Applied Successfully", - description: "You have added VS50", - variant: "subtle", - status:'success', - position: 'top-right', - duration: 3000, - isClosable: true, - }); - }else if(apply !== "VS50"){ - toast({ - title: "Not Valid", - description: "You have to add VS50", - variant: "subtle", - status:'error', - position: 'top-right', - duration: 3000, - isClosable: true, - }); - } - } - - - - //------Price Details hide Function-------------------------------------------------------------------- // - const paymentFun = () => { - dispatch(cartValue(totalCartPrice)); - } - //------Quantity Increase Function-------------------------------------------------------------------- // - const quantityIncre = async(el) => { - let currUser = await dispatch(getUser(userData.id)) - - let updatedCart = currUser.cart.map(e=>{ - if(e.id===el.id){ - e.qty=e.qty+1; - return e - }else{ - return e - } - }) - dispatch(updateCarts({...currUser, cart:updatedCart })) - - .then(()=> { - dispatch(cartActions()); - }); - } - //------Quantity Decrease Function----------------------------------------------------------------------- // - const quantityDecre = async(el,min) => { - dispatch(userCartUpdate({...el, min})) - .then(()=> { - dispatch(cartActions()); - }); - } - // Loading And Error - // if(loading) return

Loading...

; - // if(error) return

Error...

; - return ( - <> - -
-
-
-
-

My Cart:[{cartData.length}]

- {/*

Total Ammount:₹{totalCartPrice}

*/} -
- {cartData.map((e, id) => ( -
-
-
- {e.price} -
-
-

- {e.name.length < 25 - ? e.name - : `${e.name.slice(0, 25)}...`}{" "} -

-

Price: ₹{e.price}

-

- Rating: {e.raitng ? e.raitng : "4.3"} -

-
-
-
-
- - - -
-
- -
-
-
- ))} -
-
-
-

PRICE DETAILS

-
-
-
-

Total Ammount

-

₹{totalCartPrice}

-
-
-

GST

-

18%

-
-
-

Delivery Charges

-

Free

-
-
-
-

- Congrats! :smiley: You can use Coupan code for Intresting Offers!{" "} -

-
- - setApply(e.target.value)} - /> - - - - - - - -
-
-

You can Apply only one Once

-
-
-
- - - - - - - - - - -

Woow! You Can use "VS50"

- - - - - - -
-
-
-
- - ); -}; - -export default Cart \ No newline at end of file diff --git a/minishop/src/Pages/Cart/Cart.scss b/minishop/src/Pages/Cart/Cart.scss deleted file mode 100644 index 19e239d..0000000 --- a/minishop/src/Pages/Cart/Cart.scss +++ /dev/null @@ -1,244 +0,0 @@ -@import "../../Global.scss"; -.CartMainDiv{ - // border: 1px solid red; - width: 100%; - height: 100vh; -} -.BothDiv{ - display: flex; - flex-direction: row; - gap: 30px; - padding: 20px; - @include mobile{ - flex-direction: column; - align-items: center; - } -} -.firstDiv{ -// border: 1px solid red; -width: 60%; -overflow-y: scroll; -height: 100vh; -background-color: white; -box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -border-top-right-radius: 20px; -@include mobile{ - width: 100%; - align-items: center; - } -} -.CartDetails{ - // border: 1px solid red; - background-color: white; - text-align: start; - font-size: 20px; - // font-weight: bold; - padding: 0px 20px; - border-top-right-radius: 20px; - display: flex; - flex-direction: row; - justify-content: space-between; - font-weight: bold; - color: gray; - border: 1px solid rgb(75, 73, 73); - @include mobile{ - font-size: 18px; - } -} -.cartProDiv{ - // border: 1px dotted rgb(139, 138, 138); - border-bottom:1px dotted grey; - width: 100%; - height: 120px; - display: flex; - flex-direction: row; - justify-content: flex-start; - gap: 30px; -margin-bottom: 10px; -padding: 10px; -@include mobile{ - flex-direction: column; - height: 200px; - } -// box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; -} -.CartImgDeatils{ - display: flex; - width: 60%; - // border: 1px solid red; - justify-content: space-between; - gap: 20px; - flex-direction: row; - @include mobile{ - // flex-direction: column; - width: 100%; - } -} -.CartImgDiv{ - height: 100%; - width: 30%; -// background-color: white; -// box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; - // border: 2px solid rgb(15, 77, 148); -} -.CartImgDiv img{ - height: 100px; - margin: auto; - @include mobile{ - height: 90px; - margin: auto; - } -} -.ProDivDetail{ - // border: 1px solid green; - width: 70%; - text-align: start; - justify-content: start; -} -.Prodivname{ - font-weight: bold; - font-size: 20px; - color: rgb(51, 50, 50); -} -.Prodivprice{ - font-size: 18; - color: red; - font-weight: bold; -} -.Prodivrating{ - color: gray ; -} -.QRdiv{ -width: 35%; -// border: 1px solid green; -margin: auto; -display: flex; -justify-content: space-around; -@include mobile{ - width:100%; - // border: 1px solid green; - justify-content: space-evenly; - } -} -.Qdiv{ - // border: 1px solid red; - display: flex; -// width: 40%; -gap: 5px; -justify-content: space-around; -@include mobile{ - margin: auto; - } -} - .Qdiv Button{ - border: 1px solid gray; - // padding: 2px 2px; - border-radius: 4px; - height: 30px; - width: 10px; - font-weight: bolder; - font-size: 20px; - @include mobile{ - font-size: 18px; - height: 25px; - width: 10px; - } - } - .Qdiv Button:hover{ - background-color: rgb(222, 220, 220); - } - .delBTN:hover{ - background-color: rgb(224, 223, 223); - } - .secondDiv{ - // border: 1px solid rgb(102, 255, 0); - width: 40%; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - height: 500px; - box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; background-color: rgb(255, 255, 255); - display: flex; - flex-direction: column; - @include mobile{ - width: 100%; - } -} -.secHeading{ - // border: 1px solid gray; - // background-color: rgb(247, 247, 247); -} -.secHeading p{ -font-weight: bolder; -font-size: 20px; -padding: 5px; -letter-spacing: 1px; -} -.secAmountDiv{ - border: 1px dotted rgb(214, 213, 213); - display: flex; - flex-direction: column; - height: 110px; - justify-content: space-between; - padding: 10px 20px; -} -.secPriceDiv{ - // border: 1px solid green; - display: flex; - flex-direction: row; - justify-content: space-between; -} -.secPriceDiv p{ -font-size: 17px; -font-weight: bold; -letter-spacing: 1px; -} -.secCoopan -{ - // border: 1px solid red; - height: 150px; - margin-top: 20px; - display: flex; - flex-direction: column; -} -.secCoopanInput{ - // border: 2px solid green; - display: flex; - flex-direction: row; - justify-content: space-around; -} - .secCoopan p{ - color: rgb(255, 6, 6) ; - font-size: 15px; - } - .secCoopanCode p{ - color: black; - } - .secCoopanCode h3{ - font-size: 15px; -// border: 1px solid red; -margin: auto; -text-align: center; -color: gray; - } - .Checkout{ - border: 1px solid #DC3545; - text-align: center; - background-color: #DF3C4C; - width: 60%; - border-radius:5px; - color: white; - height: 40px; - justify-content: center; - align-content: center; - font-weight: bold; - letter-spacing: 1px ; - align-items: center; - } - .Checkout:hover{ - background-color: #D82A3B; - } - .tap{ - width: 40px; - text-align: end; - margin: auto; - } \ No newline at end of file diff --git a/minishop/src/Pages/Cart/CartComponent.jsx b/minishop/src/Pages/Cart/CartComponent.jsx deleted file mode 100644 index 035288d..0000000 --- a/minishop/src/Pages/Cart/CartComponent.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useState,useRef } from 'react' -import {SlMinus ,SlPlus} from "react-icons/sl" -import {FaShippingFast} from "react-icons/fa" - -const CartComponent = ({price,qty,id,cartData}) => { - const [detailIcon,setDetailIcon] = useState(true); - - const detailsHide = () => { - const targetDiv = document.getElementById("details"); - - // cartData.map((ele) => { - - // if(id === ele.id){ - // if (targetDiv.style.display !== "none"){ - // targetDiv.style.display = "none"; - // setDetailIcon(false); - // }else{ - // targetDiv.style.display = "block"; - // setDetailIcon(true) - // } - // } - // }) - - - // const targetDiv = document.getElementById("cartdetails"); - if (targetDiv.style.display !== "none"){ - targetDiv.style.display = "none"; - setDetailIcon(false); - }else{ - targetDiv.style.display = "block"; - setDetailIcon(true) - } - -} - - return ( -
-
-
-

Rs. {qty *(price + 152)}


-
-
-
-
-
-
-

Price:

-

Rs. {qty *(price)}

-
- -
-

Tax:

-

Rs. 152

-
- -
-

Final Price:

-

Rs. {qty *(price + 152)}

-
-
-
-
-
Free shipping
-
-
- ) -} - -export default CartComponent; \ No newline at end of file diff --git a/minishop/src/Pages/Home/Carousel.jsx b/minishop/src/Pages/Home/Carousel.jsx deleted file mode 100644 index 33d8c15..0000000 --- a/minishop/src/Pages/Home/Carousel.jsx +++ /dev/null @@ -1,84 +0,0 @@ -import Slider from "react-slick"; -import "slick-carousel/slick/slick.css"; -import "slick-carousel/slick/slick-theme.css"; -import { SimpleGrid, Skeleton } from "@chakra-ui/react"; -import "./Home.css"; -import HomeProducts from "./HomeProducts"; - -export const Carousel = ({dots, - infinite, - slidesToShow, - slidesToScroll, - autoplay, - autoplaySpeed, - pauseOnHover,Img})=> { - - var settings = { - dots:dots, - infinite:infinite, - slidesToShow:slidesToShow, - slidesToScroll:slidesToScroll, - autoplay:autoplay, - autoplaySpeed:autoplaySpeed, - pauseOnHover:pauseOnHover, - arrows:false - }; - - return ( -
- - {Img && Img.map((el,i)=>( -
- {i} -
- ))} - - -
- ); - } - -//-------------------------------------------- SingleCarousel ------------------------------------------// - - export const SingleCarousel = ({dots, - infinite, - slidesToShow, - slidesToScroll, - Speed,Img})=> { - - var settings = { - dots:dots, - infinite:infinite, Speed:Speed, - slidesToShow:slidesToShow, - slidesToScroll:slidesToScroll, - }; - - return ( -
- - - -
- ); - } - - - export const Loaderskeleton = ()=>{ - return ( - - - - - - - - - - - - - - - - ) - } \ No newline at end of file diff --git a/minishop/src/Pages/Home/Home.css b/minishop/src/Pages/Home/Home.css deleted file mode 100644 index ea4d23c..0000000 --- a/minishop/src/Pages/Home/Home.css +++ /dev/null @@ -1,152 +0,0 @@ - - /* .slick-prev:before, .slick-next:before { - font-size: 30px; - color: grey; -} -.slick-slide > div { - border: 1px solid red; - width: 100%; - - -} -.slick-list { - margin: 0 -10px; -} */ - - -body { - margin: 0; - pad: 0; - /* border: 1px solid red; */ - box-sizing: border-box; -} -.container { - max-width: 100%; - display: flex; - gap: 50px; - flex-wrap: wrap; - justify-content: center; -} - -.cord { - position: relative; - margin: 20px 0; - width: 250px; - height: 300px; - background-color: #fff; - transform-style: preserve-3d; - transform: perspective(2000px); - transition: 1s; - border-top-right-radius: 25px; - box-shadow: inset 300px 0 50px rgba(0, 0, 0, 0.5); - /* border: 1px solid red; */ -} -.firstName{ - /* border: 1px solid red; */ - background-color: white; - color: black; - font-weight: bolder; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -} -.cord:hover { - z-index: 1000; - transform: perspective(2000px) rotate(-5deg); - box-shadow: inset 20px 0 50px rgba(0, 0, 0, 0.5); -} -.cord .imgBox { - position: relative; - width: 100%; - height: 100%; - /* border: 1px solid #000; */ - /* box-shadow: rgba(1, 0, 0, 0 ) 0px 4px 0px -1px, - rgba(0, 0, 0, 0 ) 0px 2px 0px -1px; */ - box-shadow: rgba(14, 30, 37, 0.12) 6px 0px 0px 0px, rgba(14, 30, 37, 0.32) 0px 0px 0px px; - transform-origin: left; - box-sizing: border-box; - background-color: rgb(255, 255, 255); - /* background-image: url("https://cdn.pixabay.com/photo/2016/11/03/14/06/wood-1794340__340.jpg"); */ - padding: 20px; - z-index: 1; - transition: 1s; - border-top-right-radius: 25px; -} -.cord .imgBox img { - position: absolute; - top: 0; - cursor: pointer; - left: 0; - border-top-right-radius: 25px; - width: 100%; - height: 100%; -padding: 10px; -/* border: 1px solid red; */ - /* object-fit: cover; */ -} - -.cord:hover .imgBox { - transform: rotateY(-135deg); -} -.details { - position: absolute; - top: 0; - left: 0; - display: flex; - flex-direction: column; - padding: 60px 10px 10px 10px; - width: 100%; - border-top-right-radius: 25px; - height: 90%; - margin: auto; - object-fit: cover; - justify-content: space-around; - align-items: center; - /* backgroundIMG-https://cdn.pixabay.com/photo/2016/10/22/01/54/wood-1759566__340.jpg */ - /* background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTplfV2TcDIiFBpJQrq6671D6nwt0NQvTBYEQ&usqp=CAU"); */ -} -.details h3 { - color: rgb(0, 0, 0); - font-size: 30px; - font-weight: bolder; - margin: auto; -} -.details h5 { - color: rgb(242, 47, 8); - font-size: 20px; - font-weight: bolder; - margin: auto; -} -.heart { - font-size: 28px; - color: red; - cursor: pointer; - margin-top: 1px; - margin-left: 30px; - /* border: 1px solid red; */ -} -.heart:hover { - color: rgb(209, 4, 4); -} -.viweBtn { - /* color: white; */ - padding: 5px; - color: black; - background: rgb(103,101,102); - background: radial-gradient(circle, rgba(103,101,102,1) 0%, rgba(155,173,196,1) 0%, rgba(138,161,189,1) 33%, rgba(143,170,203,1) 45%, rgba(148,181,219,1) 68%, rgba(123,147,175,1) 86%, rgba(123,147,175,1) 89%); - margin-top: 100px; - border-radius: 5px; - width: 100px; - margin: auto; - font-weight: bolder; - letter-spacing: 1px; -} -.viweBtn:hover{ - /* color: white; */ - background: rgb(103,101,102); - background: radial-gradient(circle, rgba(103,101,102,1) 0%, rgba(123,147,175,1) 75%); -} -.nameHeart { - display: flex; - - justify-content: center; - align-items: center; -} diff --git a/minishop/src/Pages/Home/Home.jsx b/minishop/src/Pages/Home/Home.jsx deleted file mode 100644 index 4daabb1..0000000 --- a/minishop/src/Pages/Home/Home.jsx +++ /dev/null @@ -1,186 +0,0 @@ -import { Box, Heading, IconButton, Image, useBreakpointValue } from "@chakra-ui/react"; -import { useEffect ,useState} from "react"; - import React from "react"; - import "slick-carousel/slick/slick.css"; - import "slick-carousel/slick/slick-theme.css"; -import HomeProducts from "./HomeProducts"; -import "./Home.css"; -import { Carousel } from "./Carousel"; -import { Loaderskeleton } from "./Carousel"; - -import DemoSimiler from "../../DemoPagesBySachin/DemoSimiler"; - -// import { BiChevronLeft, BiChevronRight } from "react-icons/bi"; -// import Slider from "react-slick"; - - - -import HomeCarouselDemo from './HomeCarouselDemo'; -import Navbar from "../../components/Navbar/Navbar"; - - -function Home() { - const [data, setData] = useState([]); - const [loading, setLoading] = useState(false); - - const getHomeData =async () => { - setLoading(true); - try { - const res = await fetch("https://lackadaisical-volcano-larch.glitch.me/data"); - const HomeData = await res.json(); - setData(HomeData); - setLoading(false); - } catch (error) { - console.log("e", error); - setLoading(false); - } -} - useEffect(() => { - getHomeData() - document.title = 'Virtual Shop' - - }, []); - - - - - - return ( - <> - - - - - {/* - - 1 - - */} - - {/* Carousal by kiran */} - - - - -{/*--------------------------------- carousel ---------------------------------------*/} - {/* */} - {/*--------------------------------- carousel ---------------------------------------*/} - {loading ? : - T-Shirt - item.Categories === "t_shirt")}/> - } - - - item.Categories === "shoes")} /> - -{/*--------------------------------- carousel ---------------------------------------*/} - - < Image src="https://thegenuineleather.com/wp-content/uploads/2022/10/MEN-LEATHER-JACKET.webp" m='auto' alt='1'/> - - - - -{/*--------------------------------- carousel ---------------------------------------*/} -{loading ? : - Jacket - item.Categories === "Jacket")}/> - } - - - - - - {loading ? : - Bags - item.Categories === "bags")} /> - } - - - item.Categories === "t_shirt")} /> - - - - 3 - - {loading ? : - Watch - item.Categories === "watch")}/> - } - - - 4 - - {loading ? : - Headphones - item.Categories === "Headphones")}/> - } - - {loading ? : - Mobiles - item.Categories === "mobile")}/> - } - - {loading ? : - Shoes - item.Categories === "shoes")}/> - } - - - - - - ); -} - -export default Home; - - - -const imagesTop = ['https://s3.thingpic.com/images/WZ/1ChLD86XEtKdLmpiQHdW1nhF.jpeg', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/2000x650_f60dcd57-3f35-4f38-a32f-3f9666996225_1400x.jpg?v=1673538078', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/WSC-Desktop_dad0fc88-3fc8-4ed8-becb-b7901e4b37f4_1400x.jpg?v=1673853393', -'https://s3.thingpic.com/images/WZ/1ChLD86XEtKdLmpiQHdW1nhF.jpeg', -'https://s3.thingpic.com/images/WZ/1ChLD86XEtKdLmpiQHdW1nhF.jpeg', -'https://s3.thingpic.com/images/WZ/1ChLD86XEtKdLmpiQHdW1nhF.jpeg' -] - -const slider2 = ['https://cdn.shopify.com/s/files/1/0057/8938/4802/files/AB1000_445x.jpg?v=1671007984', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/stone_1_445x.png?v=1670244742', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/carousel_banner_445x.png?v=1671097960', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/AB1000_445x.jpg?v=1671007984', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/stone_1_445x.png?v=1670244742', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/carousel_banner_445x.png?v=1671097960', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/AB1000_445x.jpg?v=1671007984', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/stone_1_445x.png?v=1670244742', -'https://cdn.shopify.com/s/files/1/0057/8938/4802/files/carousel_banner_445x.png?v=1671097960', - - -]; - - - diff --git a/minishop/src/Pages/Home/HomeCarouselDemo.css b/minishop/src/Pages/Home/HomeCarouselDemo.css deleted file mode 100644 index 24e300d..0000000 --- a/minishop/src/Pages/Home/HomeCarouselDemo.css +++ /dev/null @@ -1,153 +0,0 @@ -.header { - position: fixed; - top: 0; - left: 0; - background-color: black; - width: 100%; - display: flex; - /* justify-content: space-around; */ - justify-content: flex-start; - align-items: center; - z-index: 100; - } - .page{ - color: red; - } - .logo { - height: auto; - width: 150px; - position: relative; - margin-right: 150px; - border-radius: 10px; - /* box-shadow: rgba(16, 16, 16, 0.4) 5px 5px, rgba(14, 14, 14, 0.3) 10px 10px, rgba(5, 5, 5, 0.2) 15px 15px, rgba(2, 2, 2, 0.1) 20px 20px, rgba(0, 0, 0, 0.05) 25px 25px; */ - } - .navigate { - display: flex; - margin-left: 10%; - box-shadow: rgba(0, 0, 0, 0.56) 0px 22px 70px 4px; - } - .navigate li { - list-style: none; - margin: 0 10px; - } - .navigate p { - color: #fff; - text-decoration: none; - font-weight: 500; - letter-spacing: 1px; - } - .navigate p:hover { - color: red; - cursor: pointer; - } - .search { - position: relative; - width: 550px; - height: 40px; - margin-right: 0%; - margin-left: 10px; - margin-right: 150px; - } - .search input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - color: #fff; - background: transparent; - border: 1px solid rgba(255, 255, 2555, 0.5); - outline: none; - border-radius: 4px; - pad: 0 10px 0 45px; - } - .search input::placeholder { - color: #fff; - } - .banner { - position: relative; - width: 100%; - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - padding: 0 100px; - } - .bg { - position: absolute; - width: 500%; - height: 100%; - object-fit: cover; - } - .hello{ - width: 100%; - /* border: 1px solid rgb(38, 0, 255); */ - height: 100px; - display: grid; - color: white; - justify-content: baseline; - align-items: center; - gap: 30px; - background-color: rgb(47, 52, 52); - } - .slidP{ - /* border: 1px solid red; */ - padding: 10px; - } - .slidP p{ - letter-spacing: 1px; - cursor: pointer; - border-radius: 5px; - padding: 5px; - color: black; - text-decoration: none; - } - .slidP p:hover{ - color: black; - font-weight: bold; - /* box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px; */ - } - .slideIMG{ - height: 20px; - width: 20px; - /* border: 1px solid red; */ - justify-content: center; - align-content: center; - margin-right: 60px; - margin-top: 7px; - margin-left: -50px; - } - .cartitem { - display: flex; - justify-content: space-between; - align-items: center; - margin: 0 20px; - color:black; - margin-bottom: 20px; - } - .cartItemImg { - border-radius: 50%; - width: 50px; - height: 50px; - object-fit: cover; - } - .cartItemDetail { - display: flex; - flex: 1; - color: black; - padding: 0 20px; - flex-direction: column; - } - .del{ - color:black; - } - .del:hover{ - color: red; - } - .text { - display: block; - width: 100px; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } \ No newline at end of file diff --git a/minishop/src/Pages/Home/HomeCarouselDemo.jsx b/minishop/src/Pages/Home/HomeCarouselDemo.jsx deleted file mode 100644 index ecc5f95..0000000 --- a/minishop/src/Pages/Home/HomeCarouselDemo.jsx +++ /dev/null @@ -1,55 +0,0 @@ -import Carousel from "react-bootstrap/Carousel"; -import { useToast, Button } from "@chakra-ui/react"; - -import "./HomeCarouselDemo.css" - -function HomeCarouselDemo() { - const toast = useToast(); - return ( - <> - - - First slide - - {/*

First slide label

-

Nulla vitae elit libero, a pharetra augue mollis interdum.

*/} - - - - Second slide - - {/*

Second slide label

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

*/} - - - - Third slide - - {/*

Third slide label

-

- Praesent commodo cursus magna, vel scelerisque nisl consectetur. -

*/} - - - - - - ); -} - -export default HomeCarouselDemo; \ No newline at end of file diff --git a/minishop/src/Pages/Home/HomeProducts.jsx b/minishop/src/Pages/Home/HomeProducts.jsx deleted file mode 100644 index 9261f6d..0000000 --- a/minishop/src/Pages/Home/HomeProducts.jsx +++ /dev/null @@ -1,62 +0,0 @@ -import { BsHeart } from "react-icons/bs"; -import { Link } from "react-router-dom"; - -export default function HomeProducts(data) { - - return ( -
- {data.data.map((el, i) => { - if(i<8){ - return ( -
- -
- - -
-

- {el.name.length < 18 ? el.name : `${el.name.slice(0, 18)}`} -

- -
-
-

- {el.name.length < 8 ? el.name : `${el.name.slice(0, 8)}`} -

-

-
-
-
Price:{el.price}
-
Rating:{el.rating}
-
- -
- - - - -
-
-
- ) - } - })} -
- - ); - } - - - // ( - // {el.price} - //

{el.name.length < 8 ? el.name : `${el.name.slice(0, 8)}`}

- // - // Price: {el.price} - // Ratting: {el.rating} - // - // - // View Details - // - // - // - // ) \ No newline at end of file diff --git a/minishop/src/Pages/Loading/Loading.jsx b/minishop/src/Pages/Loading/Loading.jsx deleted file mode 100644 index c01f335..0000000 --- a/minishop/src/Pages/Loading/Loading.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react' -const Loading = () => { - return ( -
- Loading...... -
- ) -} -export default Loading; \ No newline at end of file diff --git a/minishop/src/Pages/Order/Order.jsx b/minishop/src/Pages/Order/Order.jsx deleted file mode 100644 index ca011a8..0000000 --- a/minishop/src/Pages/Order/Order.jsx +++ /dev/null @@ -1,88 +0,0 @@ -import { Button, Heading, Spinner, Text } from '@chakra-ui/react'; -import React, { useEffect } from 'react' -import { AiFillDelete, AiOutlineHome } from 'react-icons/ai'; -import { useDispatch, useSelector } from 'react-redux'; -import { cancelOrder, orderActions } from '../../redux/Order/Order.actions'; - -import {FcShipped} from "react-icons/fc" -import { getOrderAPI } from '../../redux/Order/Order.api'; -import { Link } from 'react-router-dom'; -import { TbTruckDelivery } from 'react-icons/tb'; - -import "./Order.scss" -import Navbar from '../../components/Navbar/Navbar'; - -const Order = () => { - - const {loading , error, orderData} = useSelector((store) => store.order); - console.log('orderData:', orderData); - const dispatch = useDispatch(); - useEffect(() => { - dispatch(orderActions()) - - }, [ orderData.length]); - - let today = new Date() - let date = today.getDate() + '-' + parseInt(today.getMonth() + 1) + '-' + today.getFullYear() - // console.log('date:', date) - - return ( - <> - -
-
-
-

My Orders:[{orderData.length}]

- -

- -

- -
- {orderData.map((e, id) => ( -
-
-
- {e.price} -
-
-

- {e.name.length < 25 ? e.name : `${e.name.slice(0, 25)}...`}{" "} -

-

Price: ₹{e.price}

-
-
-
-
- {" "} - {" "} -
-

Delivery by {date}

-
-
-
- -
-
-
- ))} -
-
- - ); -} - -export default Order \ No newline at end of file diff --git a/minishop/src/Pages/Order/Order.scss b/minishop/src/Pages/Order/Order.scss deleted file mode 100644 index 5e28b73..0000000 --- a/minishop/src/Pages/Order/Order.scss +++ /dev/null @@ -1,112 +0,0 @@ -@import "../../Global.scss"; -.CartMainDiv{ - // border: 1px solid red; - width: 100%; - height: 100vh; -} -.firstDivOrder{ -// border: 1px solid red; -width: 95%; -margin: auto; -overflow-y: scroll; -height: 100vh; -background-color: white; -box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -border-top-left-radius: 20px; -@include mobile{ - width: 100%; - align-items: center; - } -} -.CartDetailsOrder{ - // border: 1px solid red; - background-color: white; - box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; - text-align: start; - font-size: 20px; - // font-weight: bold; - padding: 0px 20px; - border-top-left-radius: 20px; - display: flex; - flex-direction: row; - justify-content: space-around; - font-weight: bold; - color: gray; - border: 1px solid rgb(75, 73, 73); - @include mobile{ - font-size: 18px; - } -} -.cartProDivOrder{ - // border: 1px dotted rgb(139, 138, 138); - border-bottom:1px dotted grey; - width: 100%; - height: 120px; - display: flex; - flex-direction: row; - justify-content: flex-start; - gap: 30px; -margin-bottom: 10px; -padding: 10px; -@include mobile{ - flex-direction: column; - height: 200px; - } -// box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; -} -.CartImgDeatilsOrder{ - display: flex; - width: 100%; - // border: 1px solid red; - justify-content: space-between; - gap: 20px; - flex-direction: row; - @include mobile{ - // flex-direction: column; - width: 100%; - } -} -.CartImgDivOrder{ - height: 100%; - width: 30%; -// background-color: white; -// box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; - // border: 2px solid rgb(15, 77, 148); -} -.CartImgDivOrder img{ - height: 100px; - margin: auto; - @include mobile{ - height: 90px; - margin: auto; - } -} -.ProDivDetailOrder{ - // border: 1px solid green; - width: 70%; - text-align: start; - justify-content: start; -} -.ProdivnameOrder{ - font-weight: bold; - font-size: 20px; - color: rgb(51, 50, 50); -} -.ProdivpriceOrder{ - font-size: 18; - color: rgb(246, 58, 58); - font-weight: bold; -} - .deliveryDivOrder{ - // border: 1px solid red; - width: 30%; - display: flex; - gap: 10px; - } - .deliveryDivOrder h5{ - font-size: 25px; - } - .deliveryDivOrder p{ - font-size: 15px; - // font-weight: b; - } \ No newline at end of file diff --git a/minishop/src/Pages/SingleProduct/SinglePage.jsx b/minishop/src/Pages/SingleProduct/SinglePage.jsx deleted file mode 100644 index 9c54a89..0000000 --- a/minishop/src/Pages/SingleProduct/SinglePage.jsx +++ /dev/null @@ -1,196 +0,0 @@ -import { useEffect, useState } from "react"; -import { BsHeart } from "react-icons/bs"; -import { Link, useParams } from "react-router-dom" -import { useDispatch, useSelector } from "react-redux"; -import { getSingleProduct } from "../../redux/SingleProducts/SingleProduct.actions"; -import axios from "axios"; -import { BsStarFill } from "react-icons/bs"; -import Loading from"../Loading/Loading" -import { Button, Heading, useToast } from "@chakra-ui/react"; -import "./SinglePage.scss"; -import { BsFillHeartFill } from "react-icons/bs"; -import DemoSimiler from "../../DemoPagesBySachin/DemoSimiler"; -import { cartActions } from "../../redux/Cart/Cart.actions"; -import Navbar from "../../components/Navbar/Navbar"; -import { getUser, updateUser, userCartUpdate } from "../../redux/AddUser/User.actions"; - -const SinglePage = () => { - const { id } = useParams(); - const [img, setImg] = useState(1); - let rat = 4.3; - let des = - "A product description is a form of marketing copy used to describe and explain the benefits of your product. In other words, it provides all the information and details of your product on your ecommerce site. These product details can be one sentence, a short paragraph or bulleted. They can be serious, funny or quirky."; - const {loading , error, itemDetail } = useSelector((store) => store.singleProduct); - const dispatch = useDispatch(); -const {cartData}=useSelector((store)=>store.cart) -// const {cartData}=useSelector((store)=>store.cart) - const [similarData, setSimilarData] = useState([]); - - //authentication cart - const { isauth, userData } = useSelector((val) => val.authUser); - - const getSimilarData =async () => { - try { - const res = await fetch("https://lackadaisical-volcano-larch.glitch.me/data"); - const data = await res.json(); - setSimilarData(data); - } catch (error) { - console.log("e", error); - } - } - useEffect(() => { - dispatch(getSingleProduct(id)) - getSimilarData(); - dispatch(cartActions()) - }, [dispatch, id, img]); - - const toast = useToast(); - const likeFuc = (itemDetail) => { - toast({ - title: "Added to wishlist", - description: "We've added this item to wishlist", - variant: "subtle", - position:'top-right', - duration: 3000, - isClosable: true, - }); - return axios.post(`https://busy-peplum-fawn.cyclic.app/wishList`, itemDetail); - }; - - const addToCart = async(itemDetail) => { - let currUser = await dispatch(getUser(userData.id)) - currUser.cart.push(itemDetail) - dispatch(userCartUpdate(currUser)).then(()=>{ - toast({ - title: "Added to Cart", - description: "We've added this item to Cart", - variant: "subtle", - position:'top-right', - duration: 3000, - isClosable: true, - }) - }); - }; - - if(loading){ - - }; - - return ( - <> - -
-
-
-
- {itemDetail.name} -
-
-
- {" "} - setImg(0)} - src={itemDetail?.image?(itemDetail.image?.[0]):("https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/200w.gif?cid=6c09b9528g3llcf2o3218mjzzpt270ckvllpe9aew6nax25k&rid=200w.gif&ct=g")} - alt={itemDetail.name} - /> -
-
- {" "} - setImg(1)} - src={itemDetail?.image?(itemDetail.image?.[1]):("https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/200w.gif?cid=6c09b9528g3llcf2o3218mjzzpt270ckvllpe9aew6nax25k&rid=200w.gif&ct=g")} - alt={itemDetail.name} - /> -
-
- {" "} - setImg(2)} - src={itemDetail?.image?(itemDetail.image?.[2]):("https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/200w.gif?cid=6c09b9528g3llcf2o3218mjzzpt270ckvllpe9aew6nax25k&rid=200w.gif&ct=g")} - alt={itemDetail.name} - /> -
-
- {" "} - setImg(3)} - src={itemDetail?.image?(itemDetail.image?.[3]):("https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/200w.gif?cid=6c09b9528g3llcf2o3218mjzzpt270ckvllpe9aew6nax25k&rid=200w.gif&ct=g")} - alt={itemDetail.name} - /> -
-
-
-
-

{itemDetail?.Categories}

-

{itemDetail?.name}

-

- {" "} - Price: ₹{itemDetail?.price} ₹{itemDetail?.og_price} -

-

Offer: {itemDetail?.saving}

-
- {" "} -

- {itemDetail?.rating ? itemDetail?.rating : rat} -

- - - -
-

- {itemDetail?.discription ? itemDetail?.discription : - <> -

- {des} -

- - } -

-
- - {itemDetail.show?( -
- { - cartData.some((p) => p.id === itemDetail.id) ? ( - - ) : ( - - )} -
- ) :( )} -
-
-
-
-
- banner -
- similar products -
- item.Categories === itemDetail.Categories)}/> -
-
- {/* banner */} -
-
- banner -
- {/* recmended product footer*/} -
-

- India's fastest growing audio & wearables brand. The most incredible - range of wireless earphones, earbuds, headphones, smart watches, and - home audio. From workouts to adventures, boAt will get you sailing! -

-
-
- - ); -}; - -export default SinglePage; \ No newline at end of file diff --git a/minishop/src/Pages/SingleProduct/SinglePage.scss b/minishop/src/Pages/SingleProduct/SinglePage.scss deleted file mode 100644 index b06bd98..0000000 --- a/minishop/src/Pages/SingleProduct/SinglePage.scss +++ /dev/null @@ -1,264 +0,0 @@ -@import "../../Global.scss"; -.maindiv{ - width: 100%; - height: auto; - // border: 1px solid red; - display: flex; - gap: 30px; - padding: 2%; - @include mobile{ - flex-direction: column; - align-items: center; - } -} -.imgDiv{ - width: 40%; - height: 90%; - margin: auto; - // border: 2px solid rgb(49, 0, 128); - display: flex; - flex-direction: column; - justify-content: space-around; - @include mobile{ - width: 100%; - flex-direction: column; - align-items: center; - } -} - .imagess{ - display: flex; - flex-direction: row; - justify-content: space-around; - width:80% ; - margin: auto; - height: 20%; - justify-content: center; - /* border: 2px solid rgb(128, 255, 0); */ - border-radius: 5px; - /* margin: auto; */ - /* background-color: rgb(255, 255, 255); */ - gap: 5px; - align-content: center; - /* box-shadow: rgba(255, 254, 254, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */ - padding: 5px; - margin-top: 40px; - @include mobile{ - width: 100%; - } - } - .curimg{ - /* border: 2px solid rgb(238, 13, 13); */ - width: 80%; - height: 400px; - // object-fit: cover; - overflow: hidden; - border-radius: 10px; - margin-top: -0px; - display: flex; - background-color: white; - padding: 10px 10px 10px 10px; - justify-content: center; - align-items: center; -// border: 2px solid rgb(255, 0, 8); - text-align: center; - margin: auto; - /* background-color: rgb(255, 255, 255); */ - @include mobile{ - width: 95%; - height: 380px; - flex-direction: column; - align-items: center; - } - } - .curimg img{ - justify-content: center; -// align-content: center; - align-items: center; -// height: 100%; -// border: 1px solid red; - width: 100%; - border-top-left-radius: 50px; -// box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px; } - } - .imagess div{ - /* border: 1px solid red; */ - width: 100%; - justify-content: center; - height: 90%; - margin: auto; - } - .imagess div img{ - width: 100%; - height: 100px; - cursor: pointer; - border-top-left-radius: 10px; - /* box-shadow: rgba(0, 0, 0, 0.2) 0px 18px 50px -10px; */ - /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */ - /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */ - margin: auto; - } - .name{ - font-weight: bolder; -font-size: 20px; -color: rgb(247, 55, 55); - } - .detailsdiv{ - width: 60%; - height: 80%; - margin: auto; - /* border: 1px solid green; */ - display: flex; - flex-direction: column; - text-align: start; - padding: 1%; - @include mobile{ - width: 95%; - flex-direction: column; - align-items: start; - } -} -.catog{ - font-weight: bold; - font-size: 30px; - text-transform: uppercase; -} -.rating{ - font-size: 16px; - font-weight: bold; -} -.discription{ - font-size: 17px; - letter-spacing: 1px; - margin-top: 14px; -} -.btnWC{ - display: flex; - width: 40%; -// border: 1px solid red; - margin-top: 40px; - justify-content: space-between; - align-items: start; - @include mobile{ - width: 100%; - margin-top: 20px; - align-items: center; - // margin: auto; - // border: 1px solid red; - } -} -.wish{ - border: 1px solid rgb(164, 163, 163); - padding: 5px 10px; - /* background-color: rgb(126, 125, 125); */ - border-radius: 5px; - padding:5px 15px; -} -.wish div{ - display: flex; - flex-direction: row; - gap: 10px; - justify-content: space-around; - align-content: center; - align-items: center; - font-weight: bold; -} -.wish div span{ - color: white; -} -.wish div span:hover{ - color: red; -} -.wish { - background-color: rgb(247, 48, 48); - color: white; - text-align: center; - letter-spacing: 1px; -} -.cart{ - /* border: 1px solid red; */ - padding: 5px 15px; - border-radius: 5px; - background-color: rgb(22, 88, 108); - border: 1px solid black; - color: white; - font-weight: bold; -} -.cart:hover{ - background-color: rgb(1,75,97); -} -.wish:hover{ - color: black; - background-color: rgb(234, 234, 231); -} - .price{ - font-size: 20px; - font-weight: bold; -} -.price span{ - text-decoration: line-through; - color: rgb(119, 113, 113); -} -.offer{ - color: green; -} -.ratingDiv{ - display: flex; - justify-content: space-around; - width: 50px; - align-content: center; - color: green; -} -.ratingDiv span{ - margin-top: 4px; - font-size: 15px; -} -.recFooter p{ - color: rgb(134, 132, 132); - background-color: black; - padding: 10px 20px; - // margin-top: 20px; - margin-bottom: -60px; - text-align: center; - @include mobile{ - font-size: 15px; - padding: 10px 10px 10px 10px; - text-align: center; - } -} -.bannner{ - width: 100%; - margin: auto; - // margin-top: -10px; - // background-color: white; -} -.bannner img{ - width: 100%; - // height: 180px; - cursor: pointer; - box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 20px, rgba(0, 0, 0, 0.22) 0px 10px 10px;} - .similar{ - color: rgb(33, 32, 32); - // margin-top: 10px; - // border: 1px solid red; - text-align: start; - padding: 10px 80px; - text-transform: uppercase; - text-decoration: underline; - @include mobile{ - font-size: 20px; - padding: 10px 20px; - text-decoration: none; - text-align: center; - } - } - .bannner2{ - width: 100%; - margin: auto; - } - .bannner2 img{ - width: 100%; - // height: 180px; - cursor: pointer; - margin-top: 20px; - box-shadow: rgba(0, 0, 0, 0.25)58px 14px 28px, rgba(10, 0, 0, 0.22) 10px 10px 10px; -} \ No newline at end of file diff --git a/minishop/src/Pages/Wishlist/Wishlist.jsx b/minishop/src/Pages/Wishlist/Wishlist.jsx deleted file mode 100644 index c5cf2f0..0000000 --- a/minishop/src/Pages/Wishlist/Wishlist.jsx +++ /dev/null @@ -1,126 +0,0 @@ -import { Button, useToast } from '@chakra-ui/react'; -import axios from 'axios'; -import React, { useEffect } from 'react' -import { AiFillDelete, AiOutlineHome } from 'react-icons/ai'; -// import { BsStarFill } from 'react-icons/bs'; -import { useDispatch, useSelector } from 'react-redux'; -import { Link, useNavigate } from 'react-router-dom'; -import Navbar from '../../components/Navbar/Navbar'; -import { removeWishlistData, wishlistGetData } from '../../redux/Wishlist/Wishlist.actions'; - -import "./Wishlist.scss" - -const Wishlist = () => { - - const {loading , error, wishData} = useSelector((store) => store.wishlist); - const toast = useToast(); - const navigate = useNavigate(); - - - console.log('cartData:', wishData) - const dispatch = useDispatch(); - useEffect(() => { - dispatch(wishlistGetData()) - - }, [ wishData.length]); - - const addToCart = (itemDetail) => { - toast({ - // colorScheme:'yellow', - title: "Added to Cart", - description: "We've added this item to Cart", - variant: "subtle", - duration: 3000, - isClosable: true, - }); - return axios.post(`https://lackadaisical-volcano-larch.glitch.me/cart`,{...itemDetail,qty:1}); - }; - - const removeWishFun = (id) => { - dispatch(removeWishlistData(id)).then(()=> dispatch(wishlistGetData())); - } - - return ( - <> - -
-
-
-

My WishList:({wishData.length})

- -

- -

- -
- {wishData.map((e, id) => ( -
-
-
- {e.price} -
-
- {e.show ? ( -

In Stock

- ) : ( -

Out Of Stock

- )} -

- {e.name.length < 25 ? e.name : `${e.name.slice(0, 25)}...`}{" "} -

-
-

Price: ₹{e.price}

-

- {e.og_price} -

-

- 17% off -

-
-

- Rating: {e.raitng ? e.raitng : "4.3"} -

-
-
-
-
- {e.show ? ( - - ) : ( - - )} -
-
- -
-
-
- ))} -
-
- - ) -} - -export default Wishlist \ No newline at end of file diff --git a/minishop/src/Pages/Wishlist/Wishlist.scss b/minishop/src/Pages/Wishlist/Wishlist.scss deleted file mode 100644 index f2e2a0e..0000000 --- a/minishop/src/Pages/Wishlist/Wishlist.scss +++ /dev/null @@ -1,166 +0,0 @@ -@import "../../Global.scss"; -.CartMainDiv{ - // border: 1px solid red; - width: 100%; - height: 150vh; - padding: 100px; - @include mobile{ - padding:5px; - } -} -.firstDivWish{ -// border: 1px solid red; - border-radius: 10px; -width: 60%; -overflow-y: scroll; -height: 80vh; -background-color: white; -box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; -margin: auto; -@include mobile{ - width: 100%; - align-items: center; - } -} -.CartDetailsWish{ - // border: 1px solid red; - background-color: white; - text-align: start; - font-size: 20px; - // font-weight: bold; - padding: 0px 20px; - box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset; - display: flex; - flex-direction: row; - justify-content: space-between; - font-weight: bold; - color: gray; - // border: 1px solid rgb(75, 73, 73); - @include mobile{ - font-size: 18px; - } -} -.cartProDivWish{ - // border: 1px dotted rgb(139, 138, 138); - border-bottom:1px dotted grey; - width: 100%; - height: 120px; - display: flex; - flex-direction: row; - justify-content: flex-start; - gap: 30px; -margin-bottom: 10px; -padding: 10px; -@include mobile{ - flex-direction: column; - height: 200px; - } -// box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; -} -.CartImgDeatilsWish{ - display: flex; - width: 60%; - // border: 1px solid red; - justify-content: space-between; - gap: 20px; - flex-direction: row; - @include mobile{ - // flex-direction: column; - width: 100%; - } -} -.CartImgDivWish{ - height: 100%; - width: 30%; -// background-color: white; -// box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; - // border: 2px solid rgb(15, 77, 148); -} -.CartImgDivWish img{ - height: 100px; - margin: auto; - @include mobile{ - height: 90px; - margin: auto; - } -} -.ProDivDetailWish{ - // border: 1px solid green; - width: 70%; - text-align: start; - justify-content: start; -} -.ProdivnameWish{ - font-weight: bold; - font-size: 15px; - color: rgb(220,53,69) -} -.ProdivpriceWish{ - display: flex; - flex-direction: row; -// border: 1px solid red; - gap: 8px; -} -.ProdivpriceWish h4{ - font-weight: bold; - font-size: 15px; -} -.StockWish{ - color: green; - font-size: 15px; - font-weight: bold; -} -.OutStockWish{ - color:red; - font-weight: bold; -} -.ProdivratingWish{ - color: gray ; -font-size: 14px; -} -.QRdivDiv{ -width: 35%; -// border: 1px solid green; -margin: auto; -display: flex; -justify-content: space-around; -@include mobile{ - width:100%; - // border: 1px solid green; - justify-content: space-evenly; - } -} -.QdivWish{ - // border: 1px solid red; - display: flex; -// width: 40%; -gap: 5px; -justify-content: space-around; -@include mobile{ - margin: auto; - } -} - .QdivWish Button{ - border: 1px solid gray; - letter-spacing: -0.2px; - border-radius: 4px; - height: 30px; - color: rgb(220,53,69); -// background-color: rgb(220,53,69); - font-size: 20px; - @include mobile{ - } - } - .QdivWish Button:hover{ - background-color: rgb(222, 220, 220); - } - .delBTNWish:hover{ - background-color: rgb(245, 243, 243); - color: red; - } - .delBTNWish{ - color: gray; - } - .Explor{ - color: rgb(108, 108, 226); - } \ No newline at end of file diff --git a/minishop/src/Pages/checkout/Address.jsx b/minishop/src/Pages/checkout/Address.jsx deleted file mode 100644 index 39505a4..0000000 --- a/minishop/src/Pages/checkout/Address.jsx +++ /dev/null @@ -1,112 +0,0 @@ -import { Heading } from "@chakra-ui/layout"; -import React, { useState } from "react"; -import { Link, Navigate } from "react-router-dom"; -import "./Payment.css"; - -const initAdress = { - house: "", - colony: "", - city: "", - state: "", - country: "", - pincode: "", - landmark: "", - phone: "", -}; - -const Address = () => { - const [address, setAddress] = useState(initAdress); - - const handleChange = (e) => { - setAddress({ ...address, [e.target.placeholder]: e.target.value }); - }; - - const handleSubmit = (e) => { - e.preventDefault(); - ; - }; - - console.log(address); - return ( -
- Delivery Address -
-
- - -
- -
- - -
- -
- - -
- - - - -
-
- ); -}; - -export default Address; diff --git a/minishop/src/Pages/checkout/Payment.css b/minishop/src/Pages/checkout/Payment.css deleted file mode 100644 index ba76e1a..0000000 --- a/minishop/src/Pages/checkout/Payment.css +++ /dev/null @@ -1,183 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap"); - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - font-family: "Roboto", Arial, Helvetica, sans-serif; -} - -/* body { - min-height: 100vh; - display: flex; - justify-content: center; - align-items: center; - padding: 2rem; - background: #eee; - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} */ - -.container { - margin-top: 300px; - /* max-width: 1200px; */ - margin: auto; - /* min-height: 100vh; */ - display: flex; - justify-content: center; - align-items: center; - padding: 2rem; - /* background: #eee; */ - background-size: cover; - background-position: center; - background-repeat: no-repeat; -} - -#form { - background: #fff; - max-width: 500px; - max-height: 100%; - display: flex; - justify-content: center; - flex-direction: column; - padding: 1rem; - border-radius: 10px; - box-shadow: 3px 3px 40px #545454e8; - position: relative; -} - -#form input, -#form select { - margin: 1rem 0; - padding: 0.75rem 0.25rem; - outline: none; - border: 1px solid #ccc; - border-radius: 5px; - position: relative; - width: 100%; -} - -#form h4 { - color: #555; - font-size: 0.9rem; -} - -.mt { - margin-top: 8rem; -} - -#form .input-container { - position: relative; - font-size: 1rem; - color: #333; -} - -#form .input-grp { - display: grid; - grid-template-columns: 1fr 1fr 1fr; - grid-gap: 0.5rem; -} - -#form button { - width: 100%; - padding: 1rem 0.5rem; - margin-top: 1.5rem; - outline: none; - border: none; - border-radius: 7px; - background-color: #060a24; - color: #fff; - letter-spacing: 1px; - font-size: 1.25rem; - cursor: pointer; - position: relative; - z-index: 9; -} - -#form button:before { - content: ""; - position: absolute; - top: 0; - left: 0; - height: 100%; - width: 0; - background-color: #3b2dd2fa; - z-index: -1; -} - -#form button:hover:before { - width: 100%; - transition: 0.2s all; -} - -#card { - height: 200px; - width: 100%; - max-width: 385px; - position: absolute; - top: -100px; - left: 50%; - transform: translateX(-50%); - border-radius: 15px; - padding: 1rem; - display: flex; - flex-direction: column; - justify-content: center; - background-image: url("https://images.pexels.com/photos/924824/pexels-photo-924824.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"); - background-size: cover; - background-position: center; - color: #eee; - filter: drop-shadow(1px 3px 10px #222); - - animation: fadeIn 0.2s linear 1; -} - -@keyframes fadeIn { - from { - top: -150px; - opacity: 0; - } - - to { - opacity: 1; - } -} - -#card .header { - display: flex; - justify-content: space-between; - height: 0px; -} - -#card .sticker { - width: 50px; - height: 40px; - background-image: url("https://images.pexels.com/photos/728471/pexels-photo-728471.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"); - background-position: center; - background-size: cover; - object-fit: contain; - border-radius: 5px; -} - -#card .logo { - margin-top: 8rem; - margin-left: 18rem; - max-width: 60px; -} - -#card .body { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - height: 60%; -} - -#card .footer { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - height: 75px; -} \ No newline at end of file diff --git a/minishop/src/Pages/checkout/Payment.jsx b/minishop/src/Pages/checkout/Payment.jsx deleted file mode 100644 index b821c80..0000000 --- a/minishop/src/Pages/checkout/Payment.jsx +++ /dev/null @@ -1,254 +0,0 @@ - -import { - - Button, - - Modal, - ModalBody, - ModalCloseButton, - ModalContent, - ModalFooter, - ModalHeader, - ModalOverlay, - - useDisclosure, - -} from "@chakra-ui/react"; -import { Box, Heading, Spacer, Text, useToast } from "@chakra-ui/react"; -// import Cleave from "cleave.js"; -import React, { useState } from "react"; -import { useSelector } from "react-redux"; -import { useNavigate } from "react-router-dom"; -import "./Payment.css"; - -const initDetails = { - creditCardNum: "", - cardHolder: "", - expireMonth: "January", - expireYear: "2024", -}; - -const Payment = () => { - const totalAmount = useSelector((store) => store.cart.totalPrice); - const [details, setDetails] = useState(initDetails); - const toast = useToast(); - const navigate = useNavigate(); - const { isOpen, onOpen, onClose } = useDisclosure(); - const handleChange = (e) => { - setDetails({ ...details, [e.target.name]: e.target.value }); - console.log(e.target.value); - }; - - const handleSubmit = (e) => { - e.preventDefault(); - // toast({ - // title: "Order Placed", - // description: "Your Order Will Be Delivered in 5-6 Days", - // status: "success", - // duration: 6000, - // isClosable: true, - // }); - // navigate("/"); - onOpen(); - }; - - return ( -
- Enter you Credit Card details - Total Amount will be deduct ₹ {totalAmount} - - -
-
-
-
-
-
- Card logo -
-
-
-

- {details.creditCardNum} -

-
-
-
-
Card Holder
-

{details.cardHolder}

-
-
-
Expires
-

- {details.expireMonth} / {details.expireYear} -

-
-
-
-
-

Enter card number

- {/* */} - -
- -
-

Card Holder Name

- -
- -
-
-

Expiration Month

- -
-
-

Year

- -
-
-

CVV

- -
-
- - -
-
- - - - - Payment Successful - - - - GIF - - - - - - - - - -
- ); -}; - -export default Payment; diff --git a/minishop/src/Pages/login&signup/AuthContextProvider.jsx b/minishop/src/Pages/login&signup/AuthContextProvider.jsx deleted file mode 100644 index 6a58ba9..0000000 --- a/minishop/src/Pages/login&signup/AuthContextProvider.jsx +++ /dev/null @@ -1,69 +0,0 @@ -import React, { useEffect, useState } from "react"; -import { createContext } from "react"; -import { - signOut, - sendPasswordResetEmail, - createUserWithEmailAndPassword, - signInWithEmailAndPassword, - onAuthStateChanged, - signInWithPopup, -} from "firebase/auth"; -import { auth, provider } from "../../config"; - -export const AuthContext = createContext(); - -const AuthContextProvider = ({ children }) => { - const [user, setUser] = useState({}); - const [isAuth, setIsAuth] = useState(true); - - const createUser = (email, password) => { - return createUserWithEmailAndPassword(auth, email, password); - }; - - const loginUser = (email, password) => { - setIsAuth(true); - return signInWithEmailAndPassword(auth, email, password); - }; - - const logout = () => { - setIsAuth(false); - return signOut(auth); - }; - - const forgotPassword = (email) => { - return sendPasswordResetEmail(auth, email); - }; - - const continueWithGoogle = async () => { - try { - await signInWithPopup(auth, provider); - setIsAuth(true); - } catch (error) { - // console.log(error.message); - } - }; - - useEffect(() => { - const unsubscribe = onAuthStateChanged(auth, (currentUser) => { - // console.log(currentUser); - setUser(currentUser); - }); - return () => { - unsubscribe(); - }; - }, []); - - const value = { - isAuth, - createUser, - logout, - user, - loginUser, - forgotPassword, - continueWithGoogle, - }; - - return {children}; -}; - -export default AuthContextProvider; diff --git a/minishop/src/Pages/login&signup/Login.jsx b/minishop/src/Pages/login&signup/Login.jsx deleted file mode 100644 index 6f9b5b7..0000000 --- a/minishop/src/Pages/login&signup/Login.jsx +++ /dev/null @@ -1,162 +0,0 @@ - -// import { Button } from "@chakra-ui/button"; -// import { FormControl } from "@chakra-ui/form-control"; -// import { useDisclosure } from "@chakra-ui/hooks"; -// import { Input } from "@chakra-ui/input"; -// import { Flex, Heading, Stack, Text } from "@chakra-ui/layout"; -// import { -// Modal, -// ModalBody, -// ModalCloseButton, -// ModalContent, -// ModalOverlay, -// } from "@chakra-ui/modal"; -// import { useContext, useRef, useState } from "react"; -// import { Link } from "react-router-dom"; -// import { AuthContext } from "./AuthContextProvider"; -// import { GoogleButton } from "react-google-button"; - -import { Button } from "@chakra-ui/button"; -import { FormControl } from "@chakra-ui/form-control"; -import { useDisclosure } from "@chakra-ui/hooks"; -import { Input } from "@chakra-ui/input"; - -import { Flex, Heading, Stack, Text } from "@chakra-ui/layout"; -import { - Modal, - ModalBody, - ModalCloseButton, - ModalContent, - ModalOverlay, -} from "@chakra-ui/modal"; -import { useContext, useRef, useState } from "react"; -import { Link } from "react-router-dom"; -import { AuthContext } from "./AuthContextProvider"; -import { GoogleButton } from "react-google-button"; - - -// const userInit = { -// email: "", -// password: "", -// }; - -// const Login = () => { -// const [user, setUser] = useState(userInit); -// const [error, setError] = useState(""); -// const emailRef = useRef(null); - -// const { loginUser, forgotPassword, continueWithGoogle } = -// useContext(AuthContext); - -// const { isOpen, onOpen, onClose } = useDisclosure(); - -// const handleChange = (e) => { -// setUser({ ...user, [e.target.type]: e.target.value }); -// }; - -// const handleSubmit = async (e) => { -// e.preventDefault(); -// try { -// await loginUser(user.email, user.password); -// console.log("Logged In"); -// } catch (e) { -// setError(e.message); -// console.log(e.message); -// } -// }; - -// const forgotPasswordHandler = async () => { -// const email = emailRef.current.value; -// if (email) -// try { -// await forgotPassword(email); -// console.log("RESET mail sent"); -// } catch (e) { -// setError(e.message); -// console.log(e.message); -// } -// }; - -// return ( -//
-//
-//

Login

-//
-//
-// -//
-// -//
-// -//
-// -// -// Forgot password? -// -// -// -// -// -// -// -// -// -// Reset password -// -// -// You'll get an email with a reset link -// -// -// -// -// -// -// -// -// -// -// -// -//
-// ); -// }; - -// export default Login; diff --git a/minishop/src/Pages/login&signup/PrivateRoute.jsx b/minishop/src/Pages/login&signup/PrivateRoute.jsx deleted file mode 100644 index 8e63567..0000000 --- a/minishop/src/Pages/login&signup/PrivateRoute.jsx +++ /dev/null @@ -1,26 +0,0 @@ -import React, { useContext } from "react"; -import { useNavigate } from "react-router-dom"; -import { useToast } from "@chakra-ui/react"; -import { useSelector } from "react-redux"; -import DLogin from "../../DemoPagesBySachin/DLogin"; - -const PrivateRoute = ({ children }) => { - const isauth = useSelector((val) => val.authUser.isauth); - const toast = useToast(); - const nav = useNavigate() - if (isauth) { - return children; - }else{ - toast({ - title: "Login required", - status: "error", - position:'top-right', - description: "Please login first.", - isClosable: true, - }); - nav('/DLogin') - return - } -}; - -export default PrivateRoute; diff --git a/minishop/src/Pages/login&signup/Signup.jsx b/minishop/src/Pages/login&signup/Signup.jsx deleted file mode 100644 index 0ece601..0000000 --- a/minishop/src/Pages/login&signup/Signup.jsx +++ /dev/null @@ -1,55 +0,0 @@ -// import React, { useContext, useState } from "react"; -// import { AuthContext } from "./AuthContextProvider"; - -// const userInit = { -// email: "", -// password: "", -// }; - -// const Signup = () => { -// const [user, setUser] = useState(userInit); -// const [error, setError] = useState(""); -// const { createUser } = useContext(AuthContext); - -// const handleChange = (e) => { -// setUser({ ...user, [e.target.type]: e.target.value }); -// }; - -// const handleSubmit = async (e) => { -// e.preventDefault(); -// try { -// await createUser(user.email, user.password); -// } catch (e) { -// setError(e.message); -// console.log(e.message); -// } -// }; - -// return ( -//
-//
-//

Signup

-//
-//
-// -//
-// -//
-// -//
-//
-// ); -// }; - -// export default Signup; diff --git a/minishop/src/Pages/products/AccordionwithButton.jsx b/minishop/src/Pages/products/AccordionwithButton.jsx deleted file mode 100644 index 18eaf20..0000000 --- a/minishop/src/Pages/products/AccordionwithButton.jsx +++ /dev/null @@ -1,60 +0,0 @@ -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - Box, - Button, - Checkbox, - Flex, - Input, - Stack, - Text, -} from "@chakra-ui/react"; -import React from "react"; - -const AccordionwithButton = ({ - setOrder, - setPrice, - values, - title, - bt1, - bt2, -}) => { - return ( - -

- - - {title} - - - -

- - - - - - - - ); -}; - -export default AccordionwithButton; diff --git a/minishop/src/Pages/products/LeftSideFilter.jsx b/minishop/src/Pages/products/LeftSideFilter.jsx deleted file mode 100644 index 12bd03a..0000000 --- a/minishop/src/Pages/products/LeftSideFilter.jsx +++ /dev/null @@ -1,93 +0,0 @@ -import { - Accordion, - AccordionButton, - AccordionIcon, - AccordionItem, - AccordionPanel, - Box, - Button, - Stack, - Text, - useToast, -} from "@chakra-ui/react"; -import { useState } from "react"; -import AccordionwithButton from "./AccordionwithButton"; -import { FilterSection, PriceFilter } from "./LeftSideFilterComponents"; - -export const LeftSideFilter = ({ setPrice, setOrder }) => { - const init = { - Gender: { Men: false, Women: false, Kids: false }, - Category: { Cloths: false, Shoes: false }, - Size: { Small: false, Medium: false, Large: false }, - Colour: { - Black: false, - White: false, - Green: false, - Red: false, - Mix: false, - }, - }; - - const [priceRange, setPriceRange] = useState({ - minPrice: 0, - maxPrice: Infinity, - }); - const [manageFilter, setManageFilter] = useState(init); - - const toast = useToast(); - - const handleFilterChange = ({ target: { name, value, checked } }) => { - setManageFilter({ - ...manageFilter, - [name]: { - ...manageFilter[name], - [value]: checked, - }, - }); - }; - - const handleFilterApply = (e) => { - // (toast, "Filter Applied Successfully", "success", 1000); - }; - - const handleChange = ({ target: { value, name } }) => { - setPriceRange({ ...priceRange, [name]: value }); - }; - - const handleSubmit = () => { - // (toast, "Price Range Applied Successfully", "success", 1000); - }; - - return ( - - - - { - - } - - - - ); -}; diff --git a/minishop/src/Pages/products/LeftSideFilterComponents.jsx b/minishop/src/Pages/products/LeftSideFilterComponents.jsx deleted file mode 100644 index b40d3b5..0000000 --- a/minishop/src/Pages/products/LeftSideFilterComponents.jsx +++ /dev/null @@ -1,56 +0,0 @@ -import { AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, Box, Button, Checkbox, Flex, Input, Stack, Text } from "@chakra-ui/react"; - - -export const FilterSection = ({ title, item, change, apply }) => { - - return ( - -

- - {title} - - -

- - - - - {item.map((e, i) => ( - { change(e) }} value={e} name={title} key={i}> - {e} - - ))} - - - - - - ); -}; - -export const Filter2Section = ({ title, item, change, apply }) => { - - return ( - -

- - {title} - - -

- - - - - {item.map((e, i) => ( - - ))} - - - - - - ); -}; diff --git a/minishop/src/Pages/products/Products.jsx b/minishop/src/Pages/products/Products.jsx deleted file mode 100644 index 6604e41..0000000 --- a/minishop/src/Pages/products/Products.jsx +++ /dev/null @@ -1,100 +0,0 @@ -import { useEffect, useState } from "react"; -import { useNavigate, useParams } from "react-router-dom"; -import "./Products.scss"; -import React from "react"; -import { BsStarFill } from "react-icons/bs"; -import Navbar from "../../components/Navbar/Navbar"; -import { LeftSideFilter } from "./LeftSideFilter"; -import { SortFilters } from "./SortFilters"; -import { Button } from "@chakra-ui/react"; - -const Products = () => { - const { Categories } = useParams(); - const [value, setValue] = useState([]); - const [sort, setSort] = useState(Categories); - const navigate = useNavigate(); - const [price, setPrice] = useState(""); - const [order, setOrder] = useState(""); - - const getSimilarData = async () => { - try { - const res = await fetch( - `https://lackadaisical-volcano-larch.glitch.me/data/?q=${sort}&_sort=${price}&_order=${order}` - ); - const datas = await res.json(); - console.log(datas); - setValue(datas); - } catch (error) { - console.log("e", error); - } - }; - console.log("line22", Categories); - useEffect(() => { - getSimilarData(); - }, [Categories, sort, price, order]); - - return ( -
- -

Products - {value.length}

- -
-
- -
-
- -
-
-
-
- -
-
- {value?.map((el, index) => ( -
- name -

- {el.brand.length < 8 ? el.brand : `${el.brand.slice(0, 8)}`} -

-
-

- Price: ₹ {el.price} -

-
-

- {" "} - -

- {el.rating} -
-
- -
- ))} -
-
-
- ); -}; - -export default Products; diff --git a/minishop/src/Pages/products/Products.scss b/minishop/src/Pages/products/Products.scss deleted file mode 100644 index 36a77bb..0000000 --- a/minishop/src/Pages/products/Products.scss +++ /dev/null @@ -1,98 +0,0 @@ - -.heading{ - margin-top: 90px; - font-size: 30px; - text-align: start; - padding-left: 30px; - font-weight: bolder; -} -.proMainDiv{ - width: 90%; - margin: auto; - margin-top: 12px; - display: flex; - flex-wrap: wrap; -} -.main_container{ - display: flex; -} -.main_container>:first-child{ - width:350px; - background-color: white; - margin-top: 3rem; - margin-left: 2rem; - height: 400px; - position: sticky; -} -.prodiv{ - width: 250px; - margin: auto; - height: 350px; - background-color: white; - padding: 10px; - box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; - border-radius: 10px; - margin-top: 30px; -} -.proName{ - font-weight: bolder; - letter-spacing: 1px; - font-size: 20px; -} - -.prodiv img{ - width: 100%; - height: 70%; - margin: auto; -} - .proPrice { - - font-size: 18px; -} -.proPrice span { - font-weight: bold; - font-size: 20px; - color: rgb(248, 57, 57); -} -.addtocart{ - border: 1px solid teal; - // background-color: rgb(67, 67, 67); - padding: 5px 15px; - // color: rgb(255, 251, 251); - border-radius: 5px; - margin: auto; - font-weight: bold; - box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; - margin-top: 5px; -} -.addtocart:hover{ - border: none; -// color:white; -background: rgb(103,101,102); -background: radial-gradient(circle, rgba(103,101,102,1) 0%, rgba(123,147,175,1) 75%); -} -.divPriceRating{ - display: flex; - flex-direction: row; - justify-content: space-around; - width: 90%; - margin: auto; -} -.divStar{ - display: flex; - flex-direction: row; - justify-content: space-between; - // border: 1px solid red; - gap: 5px; - margin-top: 3px; - text-align: center; - align-content: center; -} - -.divStar p{ - margin-top: 2px; - color: green; -} -.divStar span{ - color:rgb(9, 10, 9) ; -} \ No newline at end of file diff --git a/minishop/src/Pages/products/SortFilters.jsx b/minishop/src/Pages/products/SortFilters.jsx deleted file mode 100644 index 6ba1f69..0000000 --- a/minishop/src/Pages/products/SortFilters.jsx +++ /dev/null @@ -1,40 +0,0 @@ -import { - Box, - Button, - Menu, - MenuButton, - MenuItem, - MenuList, - useToast, -} from "@chakra-ui/react"; -import { AiOutlineDown } from "react-icons/ai"; - -export const SortFilters = ({ setPrice, setOrder }) => { - const handleChange = (e) => { - setPrice(e.target.value); - setOrder(e.target.name); - }; - - return ( - - - } - > - Sort By - - - Price: Low-High - Price: High-Low - Rating: Low-High - Rating: High-Low - Name: A-Z - Name: Z-A - - - - ); -}; diff --git a/minishop/src/Routes/AllRoutes.jsx b/minishop/src/Routes/AllRoutes.jsx deleted file mode 100644 index bfc166a..0000000 --- a/minishop/src/Routes/AllRoutes.jsx +++ /dev/null @@ -1,107 +0,0 @@ -import { Route, Routes } from "react-router-dom"; -import Home from "../Pages/Home/Home"; -import SinglePage from "../Pages/SingleProduct/SinglePage"; -import Admin from "../admin/adminHome/Admin"; -import AdminLogin from "../admin/adminAuth/AdminLogin"; -import AdminContext from "../admin/adminContext/AdminContext"; -import DSign from "../DemoPagesBySachin/DSign"; -import DLogin from "../DemoPagesBySachin/DLogin"; -import Cart from "../Pages/Cart/Cart"; -import Address from "../Pages/checkout/Address"; -import Payment from "../Pages/checkout/Payment"; -import PrivateRoute from "../Pages/login&signup/PrivateRoute"; -import Order from "../Pages/Order/Order"; -import Wishlist from "../Pages/Wishlist/Wishlist"; - -import AllUsers from "../admin/adminComp/AllUsers"; -import AllSellers from "../admin/adminComp/AllSellers"; -import Products from "../Pages/products/Products"; - - - -function Allroute() { - return ( - <> - - } /> - - {/* } /> - } /> */} - }> - - - - } - /> - - - - } - /> - - - {/* }> */} - } /> - } /> - - } /> - }> - - - }> - - {" "} - - } - > - - {" "} - - } - > - - {" "} - - } - > - -
- - } - /> - } /> - - - - } - /> - {/* demoRoutes........................ */} - } /> - } /> - - - ); -} - -export default Allroute; diff --git a/minishop/src/admin/AddProduct/EditModal.jsx b/minishop/src/admin/AddProduct/EditModal.jsx deleted file mode 100644 index af370dc..0000000 --- a/minishop/src/admin/AddProduct/EditModal.jsx +++ /dev/null @@ -1,81 +0,0 @@ -import React, { useState } from 'react' -import { - Modal, - ModalOverlay, - ModalContent, - ModalHeader, - ModalFooter, - ModalBody, - Button, - ModalCloseButton, - FormControl, - useDisclosure, - Input, - FormLabel, - Textarea, - Text, - Image, - Grid, - } from '@chakra-ui/react' -// import { useState } from 'react' - -const EditModal = ({show,data}) => { - const { isOpen, onOpen, onClose } = useDisclosure() - const initialRef = React.useRef(null) - const finalRef = React.useRef(null) - const [product, setProduct] = useState({}) - - const updateProduct = ()=>{ - onClose() - } - const handleChange = (e)=>{ - setProduct({...product,[e.target.name]:e.target.value }) - } - - return ( - <> - - - - - Add Product - - - - Category * - - - - Product Brand * - - - - Product Name * - - - - - - {data.image?.map((el,id)=>)} - - Product Detail * -