add item page

pruebas/02-bazar-universal/aiv4ro/src/app/items/[id]/page.tsx

@@ -0,0 +1,47 @@
+import { ProductPrice } from '@/components/ProductPrice'
+import { ProductRating } from '@/components/ProductRating'
+import { getProduct } from '@/services/get-product'
+
+export default async function Page ({
+  params
+}: {
+  params: {
+    id: string
+  }
+}) {
+  const product = await getProduct({ id: params.id })
+
+  const mainImage = product.images[0]
+  const otherImages = product.images.slice(1)
+
+  return (
+    <section className='flex flex-col justify-center gap-6 mt-5'>
+      <header className='flex gap-3 items-center justify-center'>
+        <picture className='w-full max-w-[250px] h-auto flex-1 aspect-square overflow-hidden rounded-full'>
+          <img className='w-full h-full object-cover' src={mainImage} alt={product.title} />
+        </picture>
+        <div className='flex flex-col gap-3'>
+          {otherImages.map((image, index) => (
+            <picture key={index} className='w-16 h-16 overflow-hidden rounded-full'>
+              <img className='h-full w-full object-cover' src={image} alt={product.title} />
+            </picture>
+          ))}
+        </div>
+      </header>
+      <h2 className='text-center text-xl font-semibold'>{product.title} - {product.brand}</h2>
+      <div className='flex items-center justify-center gap-5'>
+        <div className='flex flex-col text-center'>
+          <ProductPrice price={product.price} />
+          <span>{product.stock} disponibles</span>
+        </div>
+        <ProductRating rating={product.rating} />
+      </div>
+      <p className='text-center'>
+        {product.description}
+      </p>
+      <button className='px-10 py-3 text-xl font-semibold bg-zinc-800 hover:bg-zinc-700 rounded'>
+        Comprar
+      </button>
+    </section>
+  )
+}

pruebas/02-bazar-universal/aiv4ro/src/app/items/page.tsx

@@ -1,16 +1,12 @@
-'use client'
-
 import { SearchResults } from '@/components/SearchResults'
-import { useSearchParams } from 'next/navigation'
 import { Suspense } from 'react'
 
-export default function Page () {
-  const searchParams = useSearchParams()
-  const search = searchParams.get('search')
-
-  if (search === null) {
-    throw new Error('Search param is required')
-  }
+export default function Page ({
+  searchParams
+}: {
+  searchParams?: { [key: string]: string | string[] | undefined }
+}) {
+  const search = typeof searchParams?.search === 'string' ? searchParams.search : ''
 
   return (
     <Suspense fallback={<p className='px-2 mt-2'>Loading...</p>}>

pruebas/02-bazar-universal/aiv4ro/src/components/SearchResults.tsx

@@ -7,7 +7,6 @@ export async function SearchResults ({
   search: string
 }) {
   const products = await getProducts({ search })
-
   return (
     <div className='flex flex-col px-2 mt-2'>
       <h1 className='font-semibold'>Resultados de búsqueda de "{search}": {products.length}</h1>

pruebas/02-bazar-universal/aiv4ro/src/components/icons/HalfStar.tsx

@@ -3,8 +3,8 @@ export function HalfStar () {
     <svg className='w-4 h-4 fill-current' viewBox='0 0 24 24'>
       <defs>
         <linearGradient id='grad'>
-          <stop offset='50%' stop-color='rgb(234 179 8)' />
-          <stop offset='50%' stop-color='rgb(209 213 219)' />
+          <stop offset='50%' stopColor='rgb(234 179 8)' />
+          <stop offset='50%' stopColor='rgb(209 213 219)' />
         </linearGradient>
       </defs>
       <path

pruebas/02-bazar-universal/aiv4ro/src/constants/env.ts

@@ -0,0 +1 @@
+export const hostUrl = process.env.VERCEL_URL ?? 'http://localhost:3000'

pruebas/02-bazar-universal/aiv4ro/src/services/get-product.ts

@@ -0,0 +1,7 @@
+import { hostUrl } from '@/constants/env'
+import { Product } from '@/types/product'
+
+export async function getProduct ({ id }: { id: string | number }): Promise<Product> {
+  return await fetch(`${hostUrl}/api/items/${id}`)
+    .then(async (res) => await res.json())
+}

pruebas/02-bazar-universal/aiv4ro/src/services/get-products.ts

@@ -1,6 +1,7 @@
+import { hostUrl } from '@/constants/env'
 import { Product } from '@/types/product'
 
 export async function getProducts ({ search = '' }: { search?: string } = {}): Promise<Product[]> {
-  return await fetch(`/api/items?search=${search}`)
+  return await fetch(`${hostUrl}/api/items?search=${search}`)
     .then(async res => await res.json())
 }