Skip to content

Commit

Permalink
Merge pull request #61 from Disha-Hati/issue7_QuantityButton
Browse files Browse the repository at this point in the history 
Fixed Quantity Button
  • Loading branch information
@pooranjoyb
pooranjoyb authored May 14, 2024
2 parents 92f7588 + bfe7e98 commit f408d10
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 80 deletions.
71 changes: 4 additions & 67 deletions src/pages/Cart/Cart.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,26 +1,15 @@
import { useEffect, useState } from "react";
import { useEffect } from "react";

// components
import Head from "../../components/Head";
import Button from "../../components/Button";
import QuantityButton from "./QuantityButton";

function Cart() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);

const [quantity,setQuantity]=useState(0);

const setDecrease=()=>{
quantity > 1?setQuantity(quantity-1):setQuantity(1);
}

const setIncrease=()=>{
setQuantity(quantity+1);
//quantity <stock ? setQuantity(quantity+1):setQuantity(stock)->When there's stock of items
}


return (
<>
<div className=" mx-auto max-w-screen-xl px-4 pt-8 sm:py-12 flex justify-between items-center">
Expand Down Expand Up @@ -87,33 +76,7 @@ function Cart() {
</span>
</div>
<div className="w-auto px-4 md:w-1/6 lg:w-2/12 ">
<div className="inline-flex items-center px-4 font-semibold text-gray-500 border border-gray-200 rounded-md dark:border-gray-700 ">
<button onClick={()=>setDecrease()} className="py-2 hover:text-gray-700 dark:text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-dash"
viewBox="0 0 16 16"
>
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"></path>
</svg>
</button>
<div className="w-12 px-2 py-4 text-center border-0 rounded-md dark:bg-gray-800 bg-gray-50 dark:text-gray-400 md:text-right">{quantity}</div>
<button onClick={()=>setIncrease()} className="py-2 hover:text-gray-700 dark:text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-plus"
viewBox="0 0 16 16"
>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
</svg>
</button>
</div>
<QuantityButton/>
</div>
<div className="w-auto px-4 text-right md:w-1/6 lg:w-2/12 ">
<p className="text-lg font-bold text-blue-500 dark:text-gray-400">
Expand Down Expand Up @@ -152,33 +115,7 @@ function Cart() {
</span>
</div>
<div className="w-auto px-4 md:w-1/6 lg:w-2/12 ">
<div className="inline-flex items-center px-4 font-semibold text-gray-500 border border-gray-200 rounded-md dark:border-gray-700 ">
<button onClick={() => setDecrease()} className="py-2 hover:text-gray-700 dark:text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-dash"
viewBox="0 0 16 16"
>
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"></path>
</svg>
</button>
<div className="w-12 px-2 py-4 text-center border-0 rounded-md dark:bg-gray-800 bg-gray-50 dark:text-gray-400 md:text-right">{quantity}</div>
<button onClick={()=>setIncrease()} className="py-2 hover:text-gray-700 dark:text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-plus"
viewBox="0 0 16 16"
>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
</svg>
</button>
</div>
<QuantityButton/>
</div>
<div className="w-auto px-4 text-right md:w-1/6 lg:w-2/12 ">
<p className="text-lg font-bold text-blue-500 dark:text-gray-400">
Expand Down
47 changes: 47 additions & 0 deletions src/pages/Cart/QuantityButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { useState } from 'react'


const QuantityButton = () => {
const [quantity, setQuantity] = useState(0);

const setIncrease = () => {
setQuantity((prevQuantity) => prevQuantity + 1);
};

const setDecrease = () => {
if (quantity > 0) {
setQuantity((prevQuantity) => prevQuantity - 1);
}
};
return (
<div className="inline-flex items-center px-4 font-semibold text-gray-500 border border-gray-200 rounded-md dark:border-gray-700 ">
<button onClick={() => setDecrease()} className="py-2 hover:text-gray-700 dark:text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-dash"
viewBox="0 0 16 16"
>
<path d="M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8z"></path>
</svg>
</button>
<div className="w-12 px-2 py-4 text-center border-0 rounded-md dark:bg-gray-800 bg-gray-50 dark:text-gray-400 md:text-right">{quantity}</div>
<button onClick={()=>setIncrease()} className="py-2 hover:text-gray-700 dark:text-gray-400">
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
className="bi bi-plus"
viewBox="0 0 16 16"
>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"></path>
</svg>
</button>
</div>
)
}

export default QuantityButton
15 changes: 2 additions & 13 deletions src/pages/Shop/ProductDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import 'react-toastify/dist/ReactToastify.css';
// components
import Head from "../../components/Head";
import Button from "../../components/Button";
import QuantityButton from "../Cart/QuantityButton";

interface Data {
name: string;
Expand Down Expand Up @@ -140,19 +141,7 @@ function ProductDetail() {
<div className="w-32 mb-8 ">
<label htmlFor=""
className="w-full text-xl font-semibold text-gray-700 dark:text-gray-400">Quantity</label>
<div className="relative flex flex-row w-full h-10 mt-4 bg-transparent rounded-lg">
<button
className="w-20 h-full text-gray-600 bg-gray-300 rounded-l outline-none cursor-pointer dark:hover:bg-gray-700 dark:text-gray-400 hover:text-gray-700 dark:bg-gray-900 hover:bg-gray-400">
<span className="m-auto text-2xl font-thin">-</span>
</button>
<input type="number"
className="flex items-center w-full font-semibold text-center text-gray-700 placeholder-gray-700 bg-gray-300 outline-none dark:text-gray-400 dark:placeholder-gray-400 dark:bg-gray-900 focus:outline-none text-md hover:text-black"
placeholder="1" />
<button
className="w-20 h-full text-gray-600 bg-gray-300 rounded-r outline-none cursor-pointer dark:hover:bg-gray-700 dark:text-gray-400 dark:bg-gray-900 hover:text-gray-700 hover:bg-gray-400">
<span className="m-auto text-2xl font-thin">+</span>
</button>
</div>
<QuantityButton/>
</div>
<div className="flex flex-wrap items-center gap-10 ">

Expand Down

0 comments on commit f408d10

Please sign in to comment.