Merge pull request #184 from Actualiza-Tu-Carro/147-viewdetail

cambios para la viewDetail

package.json

@@ -46,4 +46,4 @@
     "@storybook/testing-library": "^0.2.0",
     "file-loader": "^6.2.0"
   }
-}
+}

src/app/productNotFound/page.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import { MainButton } from '../../components/button/button';
+
+interface NotFoundProps {}
+
+const NotFound: FC<NotFoundProps> = ({}) => {
+  return (
+    <div className="flex flex-col items-center h-screen w-screen gap-9 p-12">
+      <h1 className="text-center">
+        La página que estás buscando no parece existir
+      </h1>
+      <div className="text-center">
+      <Image
+        src="https://i.postimg.cc/NjdR1VMt/product-No-Found.png"
+        alt="404"
+        width={500}
+        height={500}
+        className="mx-auto max-w-4xl object-cover mb-8"
+      />
+        <p className="text-lg">
+          Te invitamos a ponerte en contacto con nosotros para que podamos
+          verificar la disponibilidad a través de nuestros proveedores y
+          recomendarte la mejor solución. Estaremos encantados de ayudarte a
+          encontrar lo que necesitas.
+        </p>
+      </div>
+      <MainButton
+        variant="tertiary"
+        className="bg-primary-lm text-white border font-bold"
+      >
+        <Link href="/contact">CONTACTANOS</Link>
+      </MainButton>
+    </div>
+  );
+};
+
+export default NotFound;

src/app/products/[id]/page.tsx

@@ -1,44 +1,51 @@
+/* eslint-disable react/jsx-no-comment-textnodes */
+/* eslint-disable react/jsx-key */
 "use client";
 import { useState } from "react";
 import { usePathname } from "next/navigation";
-
+import { TopSellers } from '~/components/containerCards/containerCards';
 import { ContainerPage } from "~/app/container_page";
 import { Carousel } from "~/components/carousels/carousel";
 import { productos } from "~/mockData/mockProducts";
+import Breadcrumb from "~/components/breadcrumb/index";
 import BuyDetail from '~/components/buyDetail';
-import Close from "~/assets/icons/Close";
 
 
+/* este es un nuevo moc donde se agrega la descripcion del producto, */
+import { product } from '~/mockData/mocProductsD';
+
+import Close from '~/assets/icons/Close';
+
 export default function Dinamica() {
     const Pathname = usePathname();
     const RouteName = Pathname.split("/").pop() || "";
 
     // MockProducts como las imágenes de un mismo producto *hasta conseguir las imágenes correspondientes de un mismo producto.
     // Max: 10 images/product
     const productImagesSliced = productos.slice(0, 10);
+
     // Array of URL's:
     const productImages = productImagesSliced.map((product): string[] => product.image);
 
-
     // STATES:
     // La imagen principal.
     const [mainImage, setMainImage] = useState<string>(productImages[0][0]);
+
     // El modal para la imagen.
     const [isModalVisible, setIsModalVisible] = useState<boolean>(false);
 
-
     // FUNCTIONS:
     const toggleModalVisibility = () => {
-        setIsModalVisible((prev) => !prev)
+        setIsModalVisible((prev) => !prev);
     };
 
-
     // COMPONENT:
     return (
         <ContainerPage>
+            <Breadcrumb />
             <div className="flex flex-col items-center w-full bg-background-lm dark:bg-background-dm ms:flex-row ms:justify-center">
                 <div className="flex flex-col items-center w-[75%] ms:flex-row ms:justify-center">
-                {/* IMAGES */}
+                    {/* IMAGES */}
                     <div className="flex flex-col items-center min-w-[250px] max-w-[500px]">
                         <div
                             className="min-w-full mb-2 hover:cursor-pointer"
@@ -70,23 +77,37 @@ export default function Dinamica() {
                                     buttonSquared: true
                                 }}
                             >
-                                {
-                                    productImagesSliced.map((product, idx) => (
-                                        <img
-                                            key={idx}
-                                            src={product.image[0]}
-                                        />
-                                    ))
-                                }
+                                {productImagesSliced.map((product, idx) => (
+                                    <img
+                                        key={idx}
+                                        src={product.image[0]}
+                                    />
+                                ))}
                             </Carousel>
                         </div>
                     </div>
                     {/* DETAILS */}
                     <div className="flex flex-col w-1/2">
                         <BuyDetail />
+                        </div>
                     </div>
                 </div>
-            </div>
-        </ContainerPage>
-    );
-};
+            {/* Descripcion Detail */}
+        <div className="h-auto bg-background-lm dark:bg-background-dm flex justify-center pt-5">
+        <div className="ms:w-[90%] md:w-[90%] lg:w-[64%] xl:w-[64%] w-[90%]">
+          <div className="bg-primary-lm justify-center items-center flex w-52 h-10 rounded-ss-[10px] rounded-se-[10px]">
+            <h1 className="text-2xl items-center text-white">Descripción</h1>
+          </div>
+          <hr className="w-full bg-background-dm border-background-dm dark:bg-background-lm dark:border-background-lm h-[2px]" />
+          <div className=" pl-2 pr-2 pt-5 pb-7">
+          <p className="text-background-dm dark:text-background-lm text-2x">
+            {/* para agregar un salto de línea en el renderizado, divido el contenido de la descripción del producto en líneas separadas utilizando el carácter de salto de línea ("\n") */}
+          {product[0].description.split ("\n").map (function (item) { return ( <span> {item} <br /> </span> ); })}
+            </p>
+          </div>
+        </div>
+      </div>
+      <TopSellers />
+    </ContainerPage>
+  );
+}

src/components/breadcrumb/index.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+import { TiHome } from 'react-icons/ti';
+import Link from 'next/link';
+import { useBreadcrumb } from '~/hooks/useBreadcrumb';
+import { CategoryProps } from '../../types/products';
+
+const Breadcrumb = () => {
+  const { breadcrumbCategory } = useBreadcrumb(); // Obtener el estado del breadcrumb del hook useBreadcrumb
+  const [selectedOption, setSelectedOption] = useState(breadcrumbCategory[0]); // Agregar un estado local para la opción seleccionada
+
+  const handleOptionChange = (event) => {
+    const selectedLabel = event.target.value;
+    const selectedOption = breadcrumbCategory.find((item) => item.label === selectedLabel);
+    setSelectedOption(selectedOption);
+  }; // Agregar un manejador de eventos para actualizar el estado con la opción seleccionada
+
+  return (
+    <section className="bg-gray-200 py-2">
+      <div className="container mx-auto flex items-center">
+        <Link href="/">
+          <a className="text-blue-300 mr-2">Volver</a> {/* Crear un enlace a la página de inicio */}
+        </Link>
+        <span className="mr-2">
+          <TiHome className="text-gray-500" /> {/* Renderizar el icono de inicio */}
+        </span>
+        <select
+          className="text-sm text-gray-500"
+          value={selectedOption.label}
+          onChange={handleOptionChange}
+        >
+          {breadcrumbCategory.map((item, index) => (
+            <option key={index} value={item.label}>
+              {item.label}
+            </option>
+          ))}
+        </select>
+      </div>
+    </section>
+  );
+};
+
+export default Breadcrumb;

src/hooks/useBreadcrumb.ts

@@ -0,0 +1,16 @@
+import create from 'zustand';
+
+export const useBreadcrumb = create((set) => ({ // Crear una tienda que administre el estado del componente breadcrumb
+  breadcrumb: [
+    { label: 'Categorias', path: '/category' },
+    { label: 'Repuestos', path: '/repuestos' },
+    { label: 'Exterior', path: '/exterior' },
+    { label: 'Bombillos', path: '/bombillos' },
+    { label: 'Farolas', path: '/farolas' },
+    { label: 'Stops', path: '/stops' },
+    { label: 'Exploradoras', path: '/exploradoras' },
+    { label: 'Audio', path: '/audio' },
+    { label: 'Interior', path: '/interior' },
+  ], // Inicializar el estado del breadcrumb con las categorías
+  setBreadcrumb: (breadcrumb) => set({ breadcrumb }), // Agregar una función para actualizar el estado del breadcrumb
+}));