diff --git a/public/images/audio.webp b/public/images/categories/audio.webp similarity index 100% rename from public/images/audio.webp rename to public/images/categories/audio.webp diff --git a/public/images/bombillos.webp b/public/images/categories/bombillos.webp similarity index 100% rename from public/images/bombillos.webp rename to public/images/categories/bombillos.webp diff --git a/public/images/exploradoras.webp b/public/images/categories/exploradoras.webp similarity index 100% rename from public/images/exploradoras.webp rename to public/images/categories/exploradoras.webp diff --git a/public/images/exterior.webp b/public/images/categories/exterior.webp similarity index 100% rename from public/images/exterior.webp rename to public/images/categories/exterior.webp diff --git a/public/images/farolas.webp b/public/images/categories/farolas.webp similarity index 100% rename from public/images/farolas.webp rename to public/images/categories/farolas.webp diff --git a/public/images/interior.webp b/public/images/categories/interior.webp similarity index 100% rename from public/images/interior.webp rename to public/images/categories/interior.webp diff --git a/public/images/repuestos.webp b/public/images/categories/repuestos.webp similarity index 100% rename from public/images/repuestos.webp rename to public/images/categories/repuestos.webp diff --git a/public/images/stops.webp b/public/images/categories/stops.webp similarity index 100% rename from public/images/stops.webp rename to public/images/categories/stops.webp diff --git a/src/app/page.tsx b/src/app/page.tsx index e6db74e..f7f5d2d 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,9 +1,11 @@ import Banner from "@/components/Banner"; +import Categories from "@/components/Categories"; export default function Home() { return (
+
); } diff --git a/src/components/Categories/CategoryCard.tsx b/src/components/Categories/CategoryCard.tsx new file mode 100644 index 0000000..344d80d --- /dev/null +++ b/src/components/Categories/CategoryCard.tsx @@ -0,0 +1,21 @@ +import Image from "next/image"; +import Link from "next/link"; +import { FC } from "react"; + +interface CategoryCardProps { + image: string; + name: string; +} + +const CategoryCard: FC = ({ image, name }) => { + return ( +
+ + {name} + {name} +
+ +
+ ); +}; +export default CategoryCard; diff --git a/src/components/Categories/index.tsx b/src/components/Categories/index.tsx new file mode 100644 index 0000000..89d4e54 --- /dev/null +++ b/src/components/Categories/index.tsx @@ -0,0 +1,19 @@ +import { FC } from "react"; +import CategoryCard from "./CategoryCard"; + +import { CATEGORIES } from "@/utils/constants"; + +const Categories: FC = () => { + return ( +
+ {CATEGORIES.map((category) => ( + + ))} +
+ ); +}; +export default Categories; diff --git a/src/utils/constants.ts b/src/utils/constants.ts new file mode 100644 index 0000000..3bcff67 --- /dev/null +++ b/src/utils/constants.ts @@ -0,0 +1,42 @@ +export const CATEGORIES = [ + { + id: "74ee7f33-36c0-4446-8eb2-a18c64c2fab3", + image: "/images/categories/audio.webp", + name: "Audio", + }, + { + id: "c75457bc-23c3-46e9-acde-73bf6ff126b4", + image: "/images/categories/bombillos.webp", + name: "Bombillos", + }, + { + id: "6afe0153-7240-4cfc-bda6-09e08dc01031", + image: "/images/categories/exploradoras.webp", + name: "Exploradoras", + }, + { + id: "a0842546-e4bb-4a7a-bee0-0a81512885e3", + image: "/images/categories/exterior.webp", + name: "Exterior", + }, + { + id: "07b25b9c-fafc-4fa4-8621-3a1d7c0488c5", + image: "/images/categories/farolas.webp", + name: "Farolas", + }, + { + id: "ee3c96c4-03d9-40c9-81c0-d94b97aa7178", + image: "/images/categories/interior.webp", + name: "Interior", + }, + { + id: "509af101-457a-4a8d-877d-efcc5d9f6250", + image: "/images/categories/repuestos.webp", + name: "Repuestos", + }, + { + id: "b826f6be-d561-4a2f-b4ca-4f50d8837c06", + image: "/images/categories/stops.webp", + name: "Stops", + }, +];