Merge branch 'develop' into 181-agregar-dashboard

Dium-dev · Oct 24, 2023 · 3cdad10 · 3cdad10
2 parents 0a5098a + 15cfec5
commit 3cdad10
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 22 deletions.
diff --git a/src/app/container_page.tsx b/src/app/container_page.tsx
@@ -29,7 +29,7 @@ export function ContainerPage({
       <main className="min-h-screen overflow-hidden mx-auto">
         {pathname !== '/' && <Categories />}
         {pathname === '/products' ? (
-          <section className="w-full h-full flex flex-col items-start justify-between p-1 md:p-10 md:gap-x-5 gap-y-6 md:gap-y-0">
+          <section className="w-full h-full flex flex-col items-start justify-between md:gap-x-5 gap-y-6 md:gap-y-0">
             <ContainerProducts />
             <PaginationProducts />
             <TopSellers />

diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx
@@ -5,7 +5,7 @@ import { usePathname } from "next/navigation";
 import { ContainerPage } from "~/app/container_page";
 import { Carousel } from "~/components/carousels/carousel";
 import { productos } from "~/mockData/mockProducts";
-
+import BuyDetail from '~/components/buyDetail';
 import Close from "~/assets/icons/Close";
 
 
@@ -83,10 +83,10 @@ export default function Dinamica() {
                     </div>
                     {/* DETAILS */}
                     <div className="flex flex-col w-1/2">
-                        <h1>PRODUCT DETAILS</h1>
+                        <BuyDetail />
                     </div>
                 </div>
             </div>
         </ContainerPage>
     );
-};
+};
diff --git a/src/components/buyDetail/index.tsx b/src/components/buyDetail/index.tsx
@@ -0,0 +1,78 @@
+import { ProductDetail } from '~/types/products';
+import { Brand } from '~/types/products';
+import { GoDotFill } from 'react-icons/go';
+import { AiFillHeart } from 'react-icons/ai';
+import { AiOutlineShopping } from 'react-icons/ai';
+import { AiOutlineShoppingCart } from 'react-icons/ai';
+import Link from 'next/link';
+import { FC, useEffect, useState } from 'react';
+export const BuyDetail: FC<ProductDetail> = (product) => {
+  const [brand, setBrand] = useState('');
+
+  useEffect(() => {
+    const fetchBrand = async () => {
+      const response = await fetch('http://localhost:3001/brands');
+      const brands = await response.json();
+      const brandFiltered = brands.find(
+        (brand: Brand) => brand.id === product.brandId
+      );
+
+      setBrand(brandFiltered.name);
+    };
+
+    fetchBrand();
+  }, [product.brandId]);
+
+  return (
+    <div className="w-full h-[79%] my-auto ms:w-5/6 flex flex-col justify-between">
+      <div className="flex w-full justify-between">
+        <p className="flex items-center text-secondary-lm">
+          {product.stock > 0 ? (
+            <GoDotFill color={'green'} />
+          ) : (
+            <GoDotFill color={'red'} />
+          )}
+          {product.stock > 0 ? 'Con stock' : 'Sin stock'}
+        </p>
+        <p className="flex items-center gap-x-1 font-medium">
+          Agregar a favoritos <AiFillHeart color={'red'} />
+        </p>
+      </div>
+      <p className="text-bold text-2xl font-black">{product.title}</p>
+      <div className="w-full font-medium">
+        <p className="text-primary-lm">Marca:</p>
+        <p>{brand}</p>
+      </div>
+      <div className="w-full font-medium">
+        <p className="text-primary-lm">Tiempo de entrega:</p>
+        <p>10 / 15 Días hábiles</p>
+      </div>
+      <div className="w-full">
+        <p className="line-through text-xl text-primary-dm font-extralight">
+          ${product.price - product.price * 0.1}
+        </p>
+        <p className="text-2xl text-secondary-lm font-black">
+          ${product.price}
+        </p>
+      </div>
+      <div className="w-full flex justify-between">
+        <button className="w-[49%] bg-secondary-lm text-white rounded p-1 flex items-center justify-center gap-x-1 font-bold">
+          Comprar
+          <AiOutlineShopping size={25} />
+        </button>
+        <button className="w-[49%] bg-primary-lm text-white rounded p-1 flex items-center justify-center gap-x-1">
+          Añadir al carrito
+          <AiOutlineShoppingCart size={25} />
+        </button>
+      </div>
+      <p className="font-light">
+        Envio gratis por compras superiores a $200.000
+      </p>
+      <p>¿Tienes alguna pregunta? Consulta con un especialista</p>
+      <Link href={'/contact'} className="text-primary-lm">
+        Contactanos
+      </Link>
+    </div>
+  );
+};
+export default BuyDetail;
diff --git a/src/components/containerCards/containerCards.tsx b/src/components/containerCards/containerCards.tsx
@@ -8,7 +8,7 @@ export function TopSellers() {
   const products = productos.slice(0, 10);
 
   return (
-    <div className="my-8">
+    <div className="my-8 w-full">
       <div className="grid place-content-center bg-[#13131D] text-white border-b-4 border-b-[#ff0000] py-5 mb-6">
         <h2 className="text-2xl">Lo más vendidos</h2>
       </div>
@@ -17,6 +17,7 @@ export function TopSellers() {
           const { title, id, price, image } = producto;
           return (
             <ProductCard
+              id={id}
               key={id}
               title={title}
               price={price}

diff --git a/src/components/filters/index.tsx b/src/components/filters/index.tsx
@@ -98,7 +98,7 @@ const Filters = () => {
                 key={category.id}
                 onClick={() => {
                   updateBody('categoryId', category.id)
-                  products.length ? updateBody('page', 1) : updateBody('page', 0)
+                  products.length && updateBody('page', 1);
                 }}
               >
                 <BiCategoryAlt/>
@@ -126,7 +126,7 @@ const Filters = () => {
                 key={brand.id}
                 onClick={() => {
                   updateBody('brandId', brand.id)
-                  products.length ? updateBody('page', 1) : updateBody('page', 0)
+                  products.length && updateBody('page', 1);
                 }}
               >
                 <AiOutlineCar/>

diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx
@@ -1,11 +1,10 @@
 'use client';
 import Image from 'next/image';
-import React, { FC, useState, useRef } from 'react';
+import React, { FC, useState } from 'react';
 import Link from 'next/link';
 import { Images } from '~/assets/img';
 import Icon from '~/assets/icons/icon';
 import MenuMobile from './MenuMobile';
-import { InputField } from '../inputs/InputField';
 import { ThemeModeButton } from '../ThemeMode';
 import { MainButton } from '../button/button';
 import { useFlagState } from '~/hooks/useFlagState';
@@ -21,17 +20,17 @@ const NavBar: FC<NavBarProps> = ({}) => {
   const [isOpenMenu, setIsOpenMenu] = useState(false);
   const [flagState, updateState] = useFlagState(false);
 
-  const searchBarRef = useRef<HTMLInputElement>(null);
-
   const toggleNavbar = () => {
     setIsOpenMenu(!isOpenMenu);
   };
   const updateBody = useProductStore((state) => state.updateBody);
   const products = useProductStore((state) => state.products);
 
   const clearSearchBar = () => {
-    if (searchBarRef.current) {
-      searchBarRef.current.value = ''; // Clear the input value
+    const searchBar: HTMLInputElement | null | HTMLElement =
+      document.getElementById('searchBar');
+    if (searchBar !== null && searchBar instanceof HTMLInputElement) {
+      searchBar.value = '';
     }
   };
   const pathname = usePathname();
@@ -87,17 +86,13 @@ const NavBar: FC<NavBarProps> = ({}) => {
               <BiSearch size={22} />
               <input
                 id="searchBar"
-                ref={searchBarRef}
                 type="text"
                 placeholder="Buscar productos"
                 className="w-full py-1.5 px-3 outline-none rounded-md text-secondary-dm"
                 onChange={(event) => {
                   updateBody('name', event.target.value);
-                  products.length
-                    ? updateBody('page', 1)
-                    : updateBody('page', 0);
+                  products.length && updateBody('page', 1);
                 }}
-                disabled={!products.length}
               />
               <span
                 onClick={() => {
@@ -131,15 +126,13 @@ const NavBar: FC<NavBarProps> = ({}) => {
           <BiSearch size={22} />
           <input
             id="searchBar"
-            ref={searchBarRef}
             type="text"
             placeholder="Buscar productos"
             className="w-full py-1.5 px-3 outline-none rounded-md text-secondary-dm"
             onChange={(event) => {
               updateBody('name', event.target.value);
-              products.length ? updateBody('page', 1) : updateBody('page', 0);
+              products.length && updateBody('page', 1);
             }}
-            disabled={!products.length}
           />
           <span
             onClick={() => {

diff --git a/src/mockData/mocProductsD.ts b/src/mockData/mocProductsD.ts
@@ -0,0 +1,68 @@
+interface Brand {
+    id: string;
+    name: string;
+  }
+
+  interface Category {
+    id: string;
+    name: string;
+  }
+
+  interface Products {
+    id: string;
+    title: string;
+    state: string;
+    stock: number;
+    price: number;
+    availability: number;
+    image: string[];
+    model: string;
+    year: string;
+    brand: Brand;
+    category: Category;
+    description: String;
+  }
+  export const product:Products[] = [
+    {
+      id: 'MCO564861395',
+      title: 'Farola Hyundai I35 Elantra 2012 - 2016 tipo OEM Halogena',
+      state: 'Inactiva',
+      stock: 26,
+      price: 1079900,
+      availability: 10,
+      image: ['https://i.ebayimg.com/images/g/rcgAAOSw~2Jjhupf/s-l1600.jpg'],
+      model: 'Elantra',
+      year: '2012 a 2016',
+      brand: {
+        id: '425dee5e-5b8a-4d95-9a7b-90bc90ced574',
+        name: 'Hyundai',
+      },
+      category: {
+        id: '7f1a877c-67d5-4ab5-9a32-01405f41a74e',
+        name: 'Farolas',
+      },
+      description: ` BA9S T4W 363 1895 233 Super brillante redondo 3D COB LED blanco luces de matrícula de coche bombilla Moto lámpara marcador luz DC 12V
+  
+  
+      Descripción:
+       
+      Modelo: Ba9s
+      Voltaje: 12V DC
+      Actual: 0.05A
+      Tamaño: 2,45 cm * 0,8 cm (0,96 "* 0,31")
+      Lúmenes de flujo: 200LM
+      Color: blanco (6000K-6500K)
+      Referencia cruzada: BA9S: 53, 57, 182, 257, 1895, 6253, 64111, 64113 ,T11 T4W...
+      
+      Aplicación: indicador luminoso de grupo de indicadores, luces de estacionamiento, luces traseras, luces de mapa, luces de escenario, luces de maletero, lámpara de placa de matrícula, luz de señal de giro, luz de curva, luz de indicador lateral, luz trasera y luces de respaldo, etc
+       
+      Paquete incluye:
+      1x Ba9s bombilla Led
+       
+       
+      Bajo consumo de energía y baja temperatura.
+      Vida útil de larga duración: 50000 horas de trabajo.
+      LED ultrabrillante, color único y más vivo.
+      Fácil instalación, solo tienes que conectarlo y jugar. `
+    },
+  ]
diff --git a/src/types/products.d.ts b/src/types/products.d.ts
@@ -11,7 +11,18 @@ export type ProductsProps = {
   brand: Brand;
   category: Category;
 };
-
+export type ProductDetail = {
+  id: string;
+  title: string;
+  state: string;
+  stock: number;
+  price: number;
+  availability: number;
+  image: string[];
+  model: string;
+  year: string;
+  brandId: string;
+}
 export type Body = {
   page: number;
   limit: number;