Merge pull request #161 from Actualiza-Tu-Carro/categories-update

Categories update

src/app/page.tsx

@@ -1,11 +1,8 @@
 import MainCarousel from '~/components/carousels/mainCarousel';
-import { brands } from '~/mockData/mockBrands';
 import { TopSellers } from '~/components/containerCards/containerCards';
 import { createIconsTypes } from '~/utils/createIcons';
 import { ContainerPage } from './container_page';
-import CategoryCategory from '~/components/containerCards/containerCardsCategoty';
-import { category } from '~/mockData/mockCategory';
-import BrandCategory from '~/components/containerCards/containerCardsBrands';
+import Categories from '~/components/containerCards/containerCardsCategory';
 import PaymentMethodsList from '~/components/paymentMethod/paymentMethodsList';
 import ReviewsContainer from '~/components/containerCards/containerCardsReviews';
 import reviews from '~/mockData/mockReviwes';
@@ -17,10 +14,9 @@ export default function Home() {
   createIconsTypes();
   return (
     <ContainerPage header={<SecondCarousel />}>
-      <CategoryCategory category={category} />
+      <Categories />
       <TopSellers />
       <BrandCarrousel />
-      <BrandCategory brand={brands} />
       <Banner />
       <ReviewsContainer reviwes={reviews} />
       <PaymentMethodsList />

src/components/cards/categoryCard.tsx

@@ -1,29 +1,17 @@
-import React, { FC } from "react";
-import Image from "next/image";
+import Image from 'next/image';
+import { CategoryProps } from '~/types/products';
 
-interface CardPropsCategory {
-  name: string;
-  imageSrc: string;
-}
-
-const CardCategory: FC<CardPropsCategory> = ({ name, imageSrc }) => {
+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={imageSrc}
-          alt="Imagen de Categoria"
-          layout="fill"
-          objectFit="cover"
-        />
+        <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>
-          <h3 className="font-bold text-2xl w-[100%] h-[22%] mt-2">
-            {name}
-          </h3>
-        </div>
     </div>
   );
 };
 
-export default CardCategory;
+export default CardCategory;

src/components/containerCards/containerCardsCategory.tsx

@@ -0,0 +1,53 @@
+'use client';
+import React 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>
+  );
+};
+
+export default Categories;

src/types/products.d.ts

@@ -26,4 +26,9 @@ export interface ProductCardProps {
   price: number;
   offer: number;
   imageSrc: string;
+}
+
+export type CategoryProps = {
+  image: string;
+  name: string;
 }