From 33c918a56cc83e0ee47d8131d26b7d51e7b7426c Mon Sep 17 00:00:00 2001
From: romualdo-ah <romualdoah@gmail.com>
Date: Fri, 21 Jan 2022 17:42:46 -0300
Subject: [PATCH] adding cart color on click

---
 .../Product/ProductCardCatalog/index.tsx      |  4 ++--
 .../Product/{OnCart => SaveOnCart}/index.tsx  | 21 +++++++++++++++----
 tailwind.config.js                            | 10 +++++----
 3 files changed, 25 insertions(+), 10 deletions(-)
 rename components/Product/{OnCart => SaveOnCart}/index.tsx (64%)

diff --git a/components/Product/ProductCardCatalog/index.tsx b/components/Product/ProductCardCatalog/index.tsx
index 2d6ca45..53388f7 100644
--- 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 b/components/Product/SaveOnCart/index.tsx
similarity index 64%
rename from components/Product/OnCart/index.tsx
rename to components/Product/SaveOnCart/index.tsx
index f7a7f55..9755851 100644
--- a/components/Product/OnCart/index.tsx
+++ b/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
index fca8485..20d9124 100644
--- 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') ]