feat: Create navigation

pruebas/02-bazar-universal/dano2906/src/components/Navigation.astro

@@ -1,5 +1,5 @@
 <header class="max-w-sm sm:max-w-md md:max-w-4xl mx-auto p-2">
     <nav class="w-full h-auto">
-        <a href="/" class="text-lg font-tilt font-light text-purple-950 bg-gradient-to-br from-blue-200 via-pink-200 to-orange-200 p-1 my-1 rounded-lg hover:opacity-75">Buscar productos 🔍</a>
+        <a href="/" class="text-lg font-tilt font-light text-purple-950 bg-gradient-to-br from-blue-200 via-pink-200 to-orange-200 p-1 my-1 rounded-lg transition-all hover:scale-105">Buscar productos 🔍</a>
     </nav>
 </header>

pruebas/02-bazar-universal/dano2906/src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
 import MainLayout from "@layouts/MainLayout.astro";
 import { Image } from "astro:assets";
-import shopImg from "@assets/shopImg.svg"
+import shopImg from "../../public/shopImg.svg"
 import SearchForm from "@components/SearchForm.astro";
 ---
 

pruebas/02-bazar-universal/dano2906/src/pages/items/[id]/index.astro

@@ -1,8 +1,19 @@
 ---
 import MainLayout from "@layouts/MainLayout.astro";
-    const {id} = Astro.params
+import { Image } from "astro:assets";
+import productImage from "../../../../public/placeholder-product-image.png"
+const {id} = Astro.params
+const res = await fetch(Astro.url.origin + `/api/items/${id}/data.json`)
+const {product} = await res.json()
+const {title,description,price,category,rating} = product
+
 ---
 
 <MainLayout title={`Producto numero ${id}`} description="Tienda implementada para la prueba técnica #2 de midudev basada en una prueba de Mercado Libre" keywords={['prueba tecnica','desarrollo','tienda online']}>
-    <h1>{id}</h1>
+    <Image src={productImage} alt={title} width={192} height={192} class="rounded-lg" transition:name="img"/>
+    <h2 class="text-2xl font-tilt font-bold text-purple-950" transition:name="title">{title}</h2>
+        <p class="text-lg font-tilt font-light text-purple-950" transition:name="desc">{description}</p>
+        <span class="text-sm font-tilt font-normal text-purple-950" transition:name="category">{category}</span>
+        <span class="text-sm font-tilt font-light text-purple-950" transition:name="price">Price: ${price}</span>
+        <span class="text-sm font-tilt font-light text-purple-950" transition:name="rating">Rating: {rating}/5</span>
 </MainLayout>

pruebas/02-bazar-universal/dano2906/src/pages/items/index.astro

@@ -1,10 +1,11 @@
 ---
+export const prerrender = false;
 import ProductsResultSection from "@components/ProductsResultSection.astro";
 import SearchForm from "@components/SearchForm.astro";
 import MainLayout from "@layouts/MainLayout.astro";
 ---
 <MainLayout  title="Resultados de busqueda" description="Tienda implementada para la prueba técnica #2 de midudev basada en una prueba de Mercado Libre" keywords={['prueba tecnica','desarrollo','tienda online']}> 
-    <section class="w-full min-h-screen">
+    <section class="max-w-sm sm:max-w-md md:max-w-4xl mx-auto min-h-screen">
         <SearchForm />
         <ProductsResultSection />
     </section>