update branch

pruebas/02-bazar-universal/danielcgilibert/src/app/api/items/route.ts

@@ -0,0 +1,28 @@
+import { type NextRequest } from 'next/server'
+import { products } from '@/data/products.json'
+
+export function POST(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams
+  const query = searchParams.get('search')
+
+  console.log(query)
+
+  if (!query) {
+    return Response.json(products)
+  }
+
+  // search in products array
+  const product = products.filter((product) =>
+    product.title.toLocaleLowerCase().includes(query.toLocaleLowerCase())
+  )
+
+  // mapping products
+  // const product = products.map((product) => {
+  //   return {
+  //     id: product.id,
+  //     title: product.title,
+  //     price: product.price,
+  //     picture: product.picture,
+
+  return Response.json({ products: product })
+}

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

@@ -0,0 +1,93 @@
+/* eslint-disable @next/next/no-img-element */
+'use client'
+import { Products } from '@/types/types'
+import { DollarSign, Euro, Star } from 'lucide-react'
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+
+export default function Page() {
+  const [items, setItems] = useState<Products['products']>([])
+
+  const searchParams = useSearchParams()
+  const search = searchParams.get('search')
+
+  const getItems = async () => {
+    const res = await fetch(`/api/items?search=${search}`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    })
+    return await res.json()
+  }
+
+  useEffect(() => {
+    getItems().then((data) => setItems(data.products))
+  }, [])
+
+  return (
+    <div className='flex flex-col gap-4 max-w-4xl mx-auto pb-12  p-8 sm:p-0 '>
+      <h1 className='text-4xl'>Search</h1>
+
+      <div className='flex flex-col gap-4 '>
+        {
+          <>
+            {items.map((item) => (
+              <div
+                className='grid sm:grid-cols-[350px_auto] grid-rows-[350px]  rounded-lg shadow hover:shadow-md  transition-all border border-neutral-100'
+                key={item.id}>
+                <div className='border-r border-neutral-100  p-3'>
+                  <img
+                    src={item.thumbnail}
+                    className='h-full w-full object-cover rounded-lg  '
+                    alt={`thumbnail of ${item.title}`}
+                  />
+                </div>
+
+                <div className='flex gap-12 flex-col justify-between py-8 px-5 '>
+                  <main className='flex flex-col  gap-8'>
+                    <div className='flex  gap-2  flex-col h-full '>
+                      <div className='flex justify-between gap-8'>
+                        <h2 className='text-2xl sm:text-2xl     first-letter:uppercase '>
+                          {item.title}
+                        </h2>
+                        <span className=' text-xl  flex gap-1 items-center  '>
+                          <Euro size={22} strokeWidth={2.2} /> {item.price}
+                        </span>
+                      </div>
+
+                      <span className='flex gap-1  '>
+                        {[...new Array(5)].map((arr, index) => {
+                          console.log(index, item.rating)
+
+                          return index < Math.round(item.rating) ? (
+                            <Star fill='black' size={18} />
+                          ) : (
+                            <Star fill='white' size={18} />
+                          )
+                        })}
+                      </span>
+                    </div>
+
+                    <p className='text-black/70 leading-relaxed '>
+                      {item.description}
+                    </p>
+                  </main>
+
+                  <footer className='flex gap-4 justify-between  items-center   h-full '>
+                    <button className=' border border-neutral-300 py-2 px-5 rounded-lg uppercase '>
+                      add to cart
+                    </button>
+                    <button className=' border border-neutral-300   py-2 px-5 rounded-lg uppercase '>
+                      See more
+                    </button>
+                  </footer>
+                </div>
+              </div>
+            ))}
+          </>
+        }
+      </div>
+    </div>
+  )
+}

pruebas/02-bazar-universal/danielcgilibert/src/app/layout.tsx

@@ -16,7 +16,10 @@ export default function RootLayout({
 }) {
   return (
     <html lang='en'>
-      <body className={inter.className}>{children}</body>
+      <body
+        className={`${inter.className} sm:max-w-4xl sm:m-auto flex flex-col sm:gap-9 py-8`}>
+        {children}
+      </body>
     </html>
   )
 }

pruebas/02-bazar-universal/danielcgilibert/src/app/page.tsx

@@ -1,9 +1,28 @@
+'use client'
+/* eslint-disable jsx-a11y/alt-text */
 import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import { FormEvent } from 'react'
+import { useRouter } from 'next/navigation'
 
 export default function Home() {
+  const r = useRouter()
+
+  const handleSubmit = (e: FormEvent) => {
+    e.preventDefault()
+    r.push(`/items/?search=${(e.target as any).elements[0].value}`)
+  }
   return (
-    <div>
-      <Button>Click me</Button>
-    </div>
+    <>
+      <header className='flex flex-col'>
+        <h1 className='text-6xl text-center'>Bazar online</h1>
+        <img src='/truck.svg' className=' max-h-[200px]' />
+      </header>
+
+      <form onSubmit={handleSubmit} className='flex flex-col gap-4'>
+        <Input type='text' placeholder='Buscar' />
+        <Button>Buscar</Button>
+      </form>
+    </>
   )
 }

pruebas/02-bazar-universal/danielcgilibert/src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }