118 modificacioncategorias

src/components/cards/categoryCard.tsx

@@ -1,17 +1,36 @@
+import Link from "next/link";
 import Image from 'next/image';
+import { useEffect, useState } from 'react';
 import { CategoryProps } from '~/types/products';
+import { useProductStore } from '~/store/productStore';
 
-const CardCategory: React.FC<CategoryProps> = ({ name, image }) => {
-  return (
-    <div className="flex w-[10rem] h-[200px] flex-col items-center overflow-hidden m-8">
-      <div className="w-full h-[78%] relative">
-        <Image src={image} alt="Imagen de Categoria" layout="fill" />
-      </div>
-      <div>
-        <h3 className="font-bold text-2xl w-[100%] h-[22%] mt-2">{name}</h3>
-      </div>
-    </div>
-  );
+
+const CardCategory = ({ id, name, image, isHovered, handleCardHovering, handleCardLeave }: any) => {
+
+
+    const updateBody = useProductStore((state) => state.updateBody);
+
+    return (
+        <Link
+            href={"/products"}
+            onClick={() => updateBody("categoryId", id)}
+            className={`
+                relative flex flex-col items-center w-full p-4 overflow-hidden bg-background-lm dark:bg-background-dm outline outline-[#D3D3D3] transition-transform&shadow duration-300
+                ${isHovered === name ? "z-40 cursor-pointer scale-105 outline-[0px] shadow-category-lm dark:shadow-category-dm" : "outline-[.5px]"}`
+            }
+            onMouseEnter={handleCardHovering}
+            onMouseLeave={handleCardLeave}
+        >
+            <div className="z-30 relative w-[60%] aspect-square m-4">
+                <Image src={image} layout="fill" alt="Imagen de Categoria" style={{ transition: "filter cubic-bezier(0.4, 0, 0.2, 1) 150ms", filter: `${isHovered === name ? "brightness(120%)" : "none"}` }} />
+            </div>
+            <h3 className={`
+                z-30 bottom-[5%] left-1/2 text-[clamp(0.5rem,calc(1vw+0.4rem),2.5rem)] ms:text-[clamp(0.5rem,calc(0.5vw+0.7rem),2.5rem)] xxl:text-[clamp(0.5rem,calc(0.25vw+0.75rem),2.5rem)] font-bold uppercase
+                ${isHovered === name ? "text-background-lm dark:text-background-dm" : ""}
+                `}>{name}</h3>
+            <div className={`absolute bottom-0 left-0 w-full bg-background-dm dark:bg-background-lm origin-bottom ${isHovered === name ? "h-full opacity-50" : "h-0 opacity-0"} transition-all duration-700`} />
+        </Link>
+    );
 };
 
-export default CardCategory;
+export default CardCategory;

src/components/containerCards/containerCardsCategory.tsx

@@ -1,53 +1,42 @@
 'use client';
-import React from 'react';
+import { useState, useEffect } from 'react';
 import CardCategory from '../cards/categoryCard';
 import { CategoryProps } from '~/types/products';
 
-const CATEGORIES: CategoryProps[] = [
-  {
-    name: 'Farolas',
-    image: 'https://i.postimg.cc/Gp1QbGmD/Cat04.png',
-  },
-  {
-    name: 'Stops',
-    image: 'https://i.postimg.cc/6qQcDK51/Cat05.png',
-  },
-  {
-    name: 'Audio',
-    image: 'https://i.postimg.cc/02bZn94z/Cat07.png',
-  },
-  {
-    name: 'Exploradoras',
-    image: 'https://i.postimg.cc/gcMN3xg9/Cat06.png',
-  },
-  {
-    name: 'Exterior',
-    image: 'https://i.postimg.cc/8P94nq8t/Cat03.png',
-  },
-  {
-    name: 'Interior',
-    image: 'https://i.postimg.cc/Sx9d0Dkq/Cat08.png',
-  },
-  {
-    name: 'Bombillos',
-    image: 'https://i.postimg.cc/63czjqwv/Cat02.png',
-  },
-  {
-    name: 'Repuestos',
-    image: 'https://i.postimg.cc/rsYjTHDy/Cat01.png',
-  },
-];
-
 const Categories = () => {
-  return (
-    <div>
-      <div className="flex flex-wrap justify-around mt-12">
-        {CATEGORIES.map(({ name, image }, id) => (
-          <CardCategory key={id} name={name} image={image} />
-        ))}
-      </div>
-    </div>
-  );
+
+    const [isHovered, setIsHovered] = useState<string>("");
+
+    const handleCardHovering = (name: any) => {
+        setIsHovered(name);
+    }
+
+    const handleCardLeave = () => {
+        setIsHovered('')
+    }
+
+    const [categories, setCategories] = useState([]);
+
+    useEffect(() => {
+        fetch('http://localhost:3001/categories')
+            .then((response) => response.json())
+            .then((data) => {
+                setCategories(data);
+            });
+    });
+
+    return (
+        <section className="flex flex-col items-center w-full xxl:w-[1920px]">
+            <h2 className="w-full my-4 text-[clamp(1rem,calc(2vw+1rem+0.5vh),3rem)] uppercase text-start leading-normal">Categorías destacadas</h2>
+            <div className="grid grid-cols-2 xs:grid-cols-3 ms:grid-cols-4 md:grid-cols-8 place-items-center mt-12 w-[100%]">
+                {
+                    categories.map(({ name, image }, id) => (
+                        <CardCategory key={id} name={name} image={image} handleCardHovering={() => handleCardHovering(name)} isHovered={isHovered} handleCardLeave={handleCardLeave} />
+                    ))
+                }
+            </div>
+        </section>
+    );
 };
 
-export default Categories;
+export default Categories;

tailwind.config.js

@@ -30,7 +30,7 @@ module.exports = {
   theme: {
     colors: {
       'background-lm': '#f1f1f1',
-      'background-dm': '#13131d',
+      'background-dm': '#121212',
       'primary-lm': '#8C0303',
       'primary-dm': '#444444',
       'secondary-lm': '#F20505',
@@ -65,6 +65,13 @@ module.exports = {
       gap: {
         50: '50px',
       },
+      boxShadow: {
+        'category-lm': '0 2px 6px 0 rgba(0, 0, 0, 0.1), 0 1px 6px 0 rgba(0, 0, 0, 0.1)',
+        'category-dm': '0 2px 6px 0 rgba(255, 255, 255, 0.1), 0 1px 6px 0 rgba(255, 255, 255, 0.1)'
+      },
+      transitionProperty: {
+        'transform&shadow': 'transform, box-shadow'
+      }
     },
     plugins: [],
   },