search engin

src/components/products/Products.js

@@ -1,12 +1,5 @@
 import Link from 'next/link';
 
-
-export const getStaticProps = async () => {
-  const res = await fetch("https://fakestoreapi.com/products");
-  const data = await res.json();
-  return { props: { products: data } };
-};
-
 export default function Products({ product }) {
   return (
     <div className='card flex flex-col justify-between'>

src/pages/Search.js

@@ -1,28 +1,22 @@
 import React, { useState } from "react";
+import SearchPage from "./SearchEngPage/SearchPage";
 
-function Search({ products }) {
+export default function Search({ products }) {
   const [searchInput, setSearchInput] = useState("");
 
+  console.log(products)
   function handleInput(event) {
     setSearchInput(event.target.value);
   }
 
   function handleSearch() {
-    for (const element of products) {
-      if (element.title == searchInput) {
-        <div>
-          {products.map((product) => {
-            return (
-              <div key={product.id}>
-                <img src={product.image} alt={product.title} />
-                <h1>{product.title}</h1>
-                <Link href={`/item/${product.id}`}>View Product</Link>
-              </div>
-            );
-          })}
-        </div>;
+    products.filter((product)=>{
+      if (searchInput == product.title) {
+        return <SearchPage product={product} key={product.id} />;
+      } else {
+        return <h1>Not Found</h1>;
       }
-    }
+    })
   }
 
   return (
@@ -46,7 +40,7 @@ function Search({ products }) {
       </div>
       <input
         type="text"
-        placeholder="Search....."
+        placeholder="Search...."
         className="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-slate-700 focus:border-red-400"
         value={searchInput}
         onChange={handleInput}
@@ -60,15 +54,3 @@ function Search({ products }) {
     </div>
   );
 }
-
-export default Search;
-
-export const getStaticProps = async () => {
-  const res = await fetch("https://fakestoreapi.com/products");
-  const data = await res.json();
-  return {
-    props: {
-      products: data,
-    },
-  };
-};

src/pages/SearchEngPage/SearchPage.js

@@ -0,0 +1,27 @@
+import React from 'react' 
+
+function SearchPage({ product }) {
+  return (
+    <div className='card flex flex-col justify-between'>
+    <Link href={`/item/${product.id}`}>
+      <img
+        src={product.image}
+        alt={product.title}
+        width={720}
+        height={720}
+        className="rounded shadow-lg h-[50vw] lg:h-[15vw] md:h-[15vw] sm:h-[50vw] w-[100%]"
+      />
+    </Link>
+    <div className='py-2'>
+      <Link href={`/item/${product.id}`}>
+        <h2 className='text-lg'>{product.title}</h2>
+      </Link>
+      <p>{product.category}</p>
+      <p> ${product.price}</p>
+    </div>
+    <button className='primary-button' type='button'>Add To Cart</button>
+  </div>
+  )
+}
+
+export default SearchPage

src/pages/index.js

@@ -1,5 +1,6 @@
 import Layout from '@/components/Layout'
 import Products from '@/components/products/Products';
+import Search from './Search';
 
 export const getStaticProps = async () => {
   const res = await fetch("https://fakestoreapi.com/products");
@@ -14,6 +15,7 @@ export default function Home({ products }) {
         {products.map(product => (
           <Products product={product} key={product.id} ></Products>
         ))}
+        <Search products={products}/>
       </div>
     </Layout>
   )