diff --git a/src/app/container_page.tsx b/src/app/container_page.tsx index d12fa54..9c9454d 100644 --- a/src/app/container_page.tsx +++ b/src/app/container_page.tsx @@ -29,7 +29,7 @@ export function ContainerPage({
{pathname !== '/' && } {pathname === '/products' ? ( -
+
diff --git a/src/app/products/[id]/page.tsx b/src/app/products/[id]/page.tsx index fe27f6d..66b7051 100644 --- 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() { {/* DETAILS */}
-

PRODUCT DETAILS

+
); -}; +}; \ No newline at end of file diff --git a/src/components/buyDetail/index.tsx b/src/components/buyDetail/index.tsx new file mode 100644 index 0000000..c675f2e --- /dev/null +++ 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 = (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 ( +
+
+

+ {product.stock > 0 ? ( + + ) : ( + + )} + {product.stock > 0 ? 'Con stock' : 'Sin stock'} +

+

+ Agregar a favoritos +

+
+

{product.title}

+
+

Marca:

+

{brand}

+
+
+

Tiempo de entrega:

+

10 / 15 Días hábiles

+
+
+

+ ${product.price - product.price * 0.1} +

+

+ ${product.price} +

+
+
+ + +
+

+ Envio gratis por compras superiores a $200.000 +

+

¿Tienes alguna pregunta? Consulta con un especialista

+ + Contactanos + +
+ ); +}; +export default BuyDetail; \ No newline at end of file diff --git a/src/components/containerCards/containerCards.tsx b/src/components/containerCards/containerCards.tsx index d6a6841..9091b22 100644 --- 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 ( -
+

Lo más vendidos

@@ -17,6 +17,7 @@ export function TopSellers() { const { title, id, price, image } = producto; return ( { key={category.id} onClick={() => { updateBody('categoryId', category.id) - products.length ? updateBody('page', 1) : updateBody('page', 0) + products.length && updateBody('page', 1); }} > @@ -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); }} > diff --git a/src/components/navBar/navBar.tsx b/src/components/navBar/navBar.tsx index 0fa0d10..4762439 100644 --- 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,8 +20,6 @@ const NavBar: FC = ({}) => { const [isOpenMenu, setIsOpenMenu] = useState(false); const [flagState, updateState] = useFlagState(false); - const searchBarRef = useRef(null); - const toggleNavbar = () => { setIsOpenMenu(!isOpenMenu); }; @@ -30,8 +27,10 @@ const NavBar: FC = ({}) => { 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 = ({}) => { { updateBody('name', event.target.value); - products.length - ? updateBody('page', 1) - : updateBody('page', 0); + products.length && updateBody('page', 1); }} - disabled={!products.length} /> { @@ -131,15 +126,13 @@ const NavBar: FC = ({}) => { { updateBody('name', event.target.value); - products.length ? updateBody('page', 1) : updateBody('page', 0); + products.length && updateBody('page', 1); }} - disabled={!products.length} /> { diff --git a/src/mockData/mocProductsD.ts b/src/mockData/mocProductsD.ts new file mode 100644 index 0000000..bbe761c --- /dev/null +++ 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. ` + }, + ] \ No newline at end of file diff --git a/src/types/products.d.ts b/src/types/products.d.ts index f016097..483a7e9 100644 --- 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;