feat - add top sellers section

src/assets/icons/Heart.tsx

@@ -0,0 +1,26 @@
+export default function Heart({ className }: { className: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns="http://www.w3.org/2000/svg"
+      width="100%"
+      height="100%"
+      viewBox="0 0 24 24"
+    >
+      <g transform="translate(24 0) scale(-1 1)">
+        <g>
+          <path
+            d="M19.071 13.142L13.414 18.8a2 2 0 0 1-2.828 0l-5.657-5.657A5 5 0 1 1 12 6.072a5 5 0 0 1 7.071 7.07Z"
+            opacity="1"
+          />
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19.071 13.142L13.414 18.8a2 2 0 0 1-2.828 0l-5.657-5.657a5 5 0 0 1 7.07-7.071a5 5 0 0 1 7.072 7.071Z"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+}

src/components/cards/ProductCard.tsx

@@ -1,17 +1,20 @@
 import Image from 'next/image';
 import { MainButton } from '../button/button';
 import Icon from '~/assets/icons/icon';
+import { ProductCardProps } from '~/types/products';
+import { useState } from 'react';
+import Heart from '~/assets/icons/Heart';
 
-interface ProductCardProps {
-  title: string;
-  price: number;
-  nota: string;
-  imageSrc: string;
-}
-
-export function ProductCard({ title, price, imageSrc }: ProductCardProps) {
+export function ProductCard({
+  title,
+  price,
+  offer,
+  imageSrc,
+}: ProductCardProps) {
+  const [favorite, setFavorite] = useState(false);
+  const handleFavorite = () => setFavorite((cur) => !cur);
   return (
-    <div className="p-6 shadow-lg rounded-md overflow-hidden bg-white w-[250px] min-h-[330px] relative space-y-3">
+    <div className="p-6 shadow-md hover:shadow-xl rounded-md overflow-hidden bg-white w-[250px] min-h-[330px] relative space-y-3">
       <Image
         src={imageSrc}
         alt="Cubre Volante"
@@ -25,19 +28,29 @@ export function ProductCard({ title, price, imageSrc }: ProductCardProps) {
           price
         )}`}</p>
         <p className="font-semibold text-primary-lm ">{`${toCurrency(
-          price
+          price - price * offer
         )}`}</p>
       </div>
       <div className="grid place-content-center">
-        <MainButton color="red">
-          <div className=" flex gap-2">
-            Añadir al Carrito
-            <div className="w-6 aspect-square">
-              <Icon icon="CardCredit" />
-            </div>
+        <MainButton color="red" className="flex gap-x-2 py-2 pl-5">
+          Añadir al Carrito
+          <div className="w-6 aspect-square">
+            <Icon icon="CarShoping" />
           </div>
         </MainButton>
       </div>
+      <button
+        onClick={handleFavorite}
+        className="group absolute right-2 top-0 w-8 aspect-square rounded-full bg-white p-0.5 grid place-content-center"
+      >
+        <Heart
+          className={
+            favorite
+              ? 'fill-primary-lm stroke-primary-lm group-hover:stroke-text-lm group-hover:fill-text-lm'
+              : 'fill-none stroke-text-lm group-hover:stroke-primary-lm'
+          }
+        />
+      </button>
     </div>
   );
 }

src/components/carousels/carousel.tsx

@@ -65,7 +65,7 @@ export function Carousel({ children }: CarouselProps) {
       <div className="flex gap-1 relative items-center px-2">
         <button
           onClick={() => previus()}
-          className={`w-10 aspect-square rounded-full p-2 bg-white shadow-lg ${''}`}
+          className={`w-10 aspect-square rounded-full p-2 bg-white hover:scale-105 hover:text-primary-lm shadow hover:shadow-lg ${''}`}
         >
           <BsChevronCompactLeft size="100%" />
         </button>
@@ -90,7 +90,7 @@ export function Carousel({ children }: CarouselProps) {
         </div>
         <button
           onClick={() => next()}
-          className={`w-10 aspect-square rounded-full p-2 bg-white shadow-lg ${''}`}
+          className={`w-10 aspect-square rounded-full p-2 bg-white shadow hover:scale-105 hover:text-primary-lm hover:shadow-lg ${''}`}
         >
           <BsChevronCompactRight size="100%" />
         </button>

src/components/containerCards/containerCards.tsx

@@ -5,7 +5,7 @@ import { Carousel } from '../carousels/carousel';
 import { ProductsProps } from '~/types/products';
 
 export function TopSellers() {
-  const products = productos;
+  const products = productos.slice(0, 10);
 
   return (
     <div className="my-8">
@@ -20,7 +20,7 @@ export function TopSellers() {
               key={id}
               title={title}
               price={price}
-              nota={title}
+              offer={0.1}
               imageSrc={image[0]}
             />
           );

src/types/icons.d.ts

@@ -1 +1 @@
-export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' 
+export type IconTypes = | 'CardCredit' | 'CarShoping' | 'Cash' | 'Facebook' | 'HamburguerClose' | 'HamburguerOpen' | 'Heart' | 'icon' | 'Instagram' | 'Login' | 'MapLocation' | 'Moon' | 'SearchIcon' | 'Shield' | 'Sun' | 'Truck' | 'warranty' | 'Whatsapp' 

src/types/products.d.ts

@@ -19,4 +19,11 @@ type Brand = {
 type Category = {
   id: string;
   name: string;
-};
+};
+
+export interface ProductCardProps {
+  title: string;
+  price: number;
+  offer: number;
+  imageSrc: string;
+}