adding cart color on click

romualdo-ah · Jan 21, 2022 · 33c918a · 33c918a
1 parent 30292cc
commit 33c918a
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 10 deletions.
diff --git a/components/Product/ProductCardCatalog/index.tsx b/components/Product/ProductCardCatalog/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import Link from 'next/link';
 import { productProp } from '../../../interfaces';
 import { Product } from '../index';
-import { OnCart } from '../OnCart';
+import { SaveOnCart } from '../SaveOnCart';
 import {Share} from '../Share';
 import { ProductImage } from '../ProductImage';
 
@@ -15,7 +15,7 @@ export function ProductCard({ product }: productProp) {
 			<ProductImage product={product} styles='h-full rounded-t-md'/>
 			<div className='flex flex-row items-center w-full justify-end'>
 			<Share product={product}/>
-			<OnCart product={product} />
+			<SaveOnCart product={product} />
 			</div>
 			</div>
 

diff --git a/components/Product/OnCart/index.tsx → components/Product/SaveOnCart/index.tsx b/components/Product/OnCart/index.tsx → components/Product/SaveOnCart/index.tsx
@@ -3,11 +3,11 @@ import { productProp } from '../../../interfaces';
 import {useCart} from '../../../hooks/useCart';
 import {RiShoppingCart2Fill,RiShoppingCart2Line} from 'react-icons/ri';
 
-export const OnCart=({product}:productProp)=>{
+export const SaveOnCart=({product}:productProp)=>{
 
     const { cart, removeProduct, addProduct } = useCart();
 	const [ liked, setLiked ] = useState(false);
-
+	const [animated,setAnimated]=useState(false);
 
     useEffect(
 		() => {
@@ -27,19 +27,32 @@ export const OnCart=({product}:productProp)=>{
 			setLiked(false);
 		} else {
 			addProduct(product.id);
+			handleAnimation();
 			setLiked(true);
 		}
 	};
 
+	const handleAnimation = () => {
+		setAnimated(true);
+		console.log('animated');
+		setTimeout(() => {
+			setAnimated(false);
+			console.log('animated off');
+		}
+		, 200);
+
+	};
+
+
     return (
         <div
 				onClick={handleToogleLike}
 				className=" right-0 m-2 w-8 h-8 flex justify-center items-center self-end"
 			>
 				{liked ? (
-					<RiShoppingCart2Fill className=" text-gray-500 w-5 h-5" />
+					<RiShoppingCart2Fill className={`text-blue-300 w-5 h-5 ${animated && "text-blue-500"}`} />
 				) : (
-					<RiShoppingCart2Line  className="text-gray-400 w-5 h-5 focus:pointer-events-auto" />
+					<RiShoppingCart2Line  className={`text-gray-400 w-5 h-5 focus:pointer-events-auto `} />
 				)}
 			</div>
     )

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -5,11 +5,13 @@ module.exports = {
 			fontFamily: {
 				// 'varela-round': [ 'Varela Round', 'sans-serif' ],
 				montserrat: [ 'Montserrat', 'sans-serif' ]
+			},
+			keyframes: {
+				'bounce-short': {
+					'0%, 100%': { transform: 'rotate(-3deg)' },
+					'50%': { transform: 'rotate(3deg)' }
+				}
 			}
-			// backdropFilter: {
-			// 	none: 'none',
-			// 	blur: 'blur(10px)'
-			// }
 		}
 	},
 	plugins: [ require('@tailwindcss/line-clamp'), require('tailwindcss-filters') ]