search logic done

app/(site)/page.tsx

@@ -3,11 +3,11 @@ import { Products } from "./components"
 import PaginationControls from "@/components/PaginationControls"
 import { ProductsPerPage } from "@/components/ProductsPerPage"
 
-export default async function Home({
-  searchParams,
-}: {
+interface SearchProps {
   searchParams: { [key: string]: string | string[] | undefined }
-}) {
+}
+
+export default async function Home({ searchParams }: SearchProps) {
   //Fetching all data from DB
   const products_response = await supabaseServer().from("products").select("*").order("price", { ascending: true })
   if (products_response.error) throw products_response.error

app/(site)/search/page.tsx

@@ -0,0 +1,39 @@
+import { Metadata } from "next"
+
+import supabaseServer from "@/libs/supabaseServer"
+
+import { Products } from "../components"
+
+interface SearchPageProps {
+  searchParams: { query: string }
+}
+
+export function generateMetadata({ searchParams: { query } }: SearchPageProps): Metadata {
+  return {
+    title: `Search ${query} - Flowmazon`,
+  }
+}
+
+export default async function SearchPage({ searchParams: { query } }: SearchPageProps) {
+  //https://github.com/nicitaacom/19_spotify-clone/blob/development/actions/getSongsByTitle.ts
+  //https://supabase.com/docs/reference/javascript/or
+  const products_response = await supabaseServer()
+    .from("products")
+    .select("*")
+    .or(`title.ilike.%${query}%,sub_title.ilike.%${query}%`)
+    .order("price", { ascending: true })
+  if (products_response.error) throw products_response.error
+  const products = products_response.data
+
+  if (products.length === 0) {
+    return <div className="text-center">No products found</div>
+  }
+
+  return (
+    <div className="max-w-[1024px] text-2xl text-white flex flex-col gap-y-8 justify-between items-center py-12 min-h-[calc(100vh-4rem)] mx-auto">
+      <section className="flex flex-col gap-y-4">
+        <Products products={products} />
+      </section>
+    </div>
+  )
+}

app/components/Navbar/components/NavbarSearch.tsx

@@ -1,19 +1,31 @@
-"use client"
+import { BiSearchAlt } from "react-icons/bi"
 
-import { Input } from "@/components/ui/Inputs"
-import { useState } from "react"
+import { redirect } from "next/navigation"
+import { SearchInput } from "@/components/ui/Inputs/SearchInput"
 
-import { BiSearchAlt } from "react-icons/bi"
+async function searchProducts(formData: FormData) {
+  "use server"
+
+  const searchQuery = formData.get("searchQuery")?.toString()
+
+  if (searchQuery === "") {
+    redirect("/")
+  }
+
+  if (searchQuery) {
+    redirect("/search?query=" + searchQuery)
+  }
+}
 
 export function NavbarSearch() {
-  const [search, setSearch] = useState("")
   return (
-    <Input
-      startIcon={<BiSearchAlt size={24} />}
-      className="hidden tablet:flex w-[40vw] max-w-[600px]"
-      value={search}
-      onChange={e => setSearch(e.target.value)}
-      placeholder="Search..."
-    />
+    <form action={searchProducts}>
+      <SearchInput
+        className="hidden tablet:flex w-[40vw] max-w-[600px]"
+        startIcon={<BiSearchAlt size={24} />}
+        name="searchQuery"
+        placeholder="Search..."
+      />
+    </form>
   )
 }

app/components/ui/Inputs/SearchInput.tsx

@@ -0,0 +1,37 @@
+import { type ChangeEvent } from "react"
+import { twMerge } from "tailwind-merge"
+
+interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
+  type?: string
+  className?: string
+  startIcon?: React.ReactElement
+  pattern?: string
+  name?: string
+  required?: boolean
+}
+
+export function SearchInput({
+  type = "text",
+  className = "",
+  startIcon,
+  pattern,
+  required = false,
+  name,
+  ...props
+}: InputProps) {
+  return (
+    <div className={`relative ${className}`}>
+      <div className="absolute top-[50%] translate-y-[-50%] translate-x-[50%]">{startIcon}</div>
+      <input
+        className={twMerge(`w-full rounded border-[1px] border-solid bg-transparent px-4 py-2 mb-1 outline-none 
+        ${startIcon && "pl-10"}`)}
+        type={type}
+        inputMode={type === "number" ? "numeric" : undefined}
+        pattern={pattern}
+        name={name}
+        required={required}
+        {...props}
+      />
+    </div>
+  )
+}

app/interfaces/types_db.ts

@@ -28,7 +28,7 @@ export interface Database {
           price: number
           price_id: string
           sub_title: string
-          title?: string
+          title: string
         }
         Update: {
           id?: string