AddToCartButton.jsx 1.96 KB
Newer Older
Giang Tran committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65
import React from 'react'
import { Button, Icon } from '@material-ui/core'
import clsx from 'clsx'

const AddToCartButton = ({
    className,
    color,
    amount,
    totalUnit,
    handleAddProduct,
    handleUpdateCart,
}) => {
    const handleAmountIncrease = () => {
        handleUpdateCart(amount + 1)
    }
    const handleAmountDecrease = () => {
        handleUpdateCart(amount - 1)
    }

    return (
        <div>
            {amount === 0 && (
                <Button
                    className={className}
                    variant="contained"
                    color="primary"
                    onClick={handleAddProduct}
                >
                    <Icon className="mr-2" fontSize="small">
                        shopping_cart
                    </Icon>
                    Add To Cart
                </Button>
            )}
            {amount > 0 && (
                <div className={clsx('flex justify-between w-160', className)}>
                    <Button
                        className="p-2 min-w-32"
                        variant="contained"
                        color="primary"
                        size="small"
                        onClick={handleAmountDecrease}
                    >
                        <Icon fontSize="small">remove</Icon>
                    </Button>
                    <div className="flex-grow flex justify-center items-center bg-paper">
                        {amount}
                    </div>
                    <Button
                        className="p-2 min-w-32"
                        variant="contained"
                        color="primary"
                        size="small"
                        onClick={handleAmountIncrease}
                        disabled={amount === totalUnit}
                    >
                        <Icon fontSize="small">add</Icon>
                    </Button>
                </div>
            )}
        </div>
    )
}

export default AddToCartButton