From f6c7c593d9e3d9d9cede98a55bde65b3ce919e67 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Mon, 4 Aug 2025 00:20:59 +0200
Subject: [PATCH] Move search bar to top

---
 app/page.tsx                    |  6 +--
 app/profiles/ProfileFilters.tsx | 62 ++++++++------------------
 app/profiles/page.tsx           | 77 +++++++++++++++++++++++++--------
 tailwind.config.ts              |  2 +-
 4 files changed, 80 insertions(+), 67 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index fb081c1e..111a1c18 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -4,14 +4,12 @@ import ProfilePage from "@/app/profiles/page";
 
 export const dynamic = "force-dynamic"; // This disables SSG and ISR
 
-import Link from "next/link";
-
 
 export default function HomePage() {
   const profilePage = () => {
     return (
       <main className="min-h-screen flex flex-col">
-        <ProfilePage />
+        <ProfilePage/>
       </main>
     )
   }
@@ -38,7 +36,7 @@ export default function HomePage() {
           BayesBond
         </h1>
         <p className="mt-6 text-lg md:text-xl text-gray-400 max-w-2xl">
-          Tired of swiping? Just search what you are looking for!
+          Tired of swiping? Just search what you're looking for!
         </p>
         <div className=" w-full">
           {profilePage()}
diff --git a/app/profiles/ProfileFilters.tsx b/app/profiles/ProfileFilters.tsx
index 69569c81..1d1d431f 100644
--- a/app/profiles/ProfileFilters.tsx
+++ b/app/profiles/ProfileFilters.tsx
@@ -223,11 +223,21 @@ export function ProfileFilters({filters, onFilterChange, onShowFilters, onToggle
     max: number;
   }
 
+  const rangeStates = Object.fromEntries(rangeConfig.map(({id}) => {
+    const [minVal, setMinVal] = useState<number | undefined>(undefined);
+    const [maxVal, setMaxVal] = useState<number | undefined>(undefined);
+    return [id, {
+      minVal,
+      maxVal,
+      setMinVal,
+      setMaxVal,
+    }];
+  }))
+
   function getSlider({id, name, min, max}: Range) {
     const minStr = 'min' + capitalize(id);
     const maxStr = 'max' + capitalize(id);
-    const [minVal, setMinVal] = useState<number | undefined>(undefined);
-    const [maxVal, setMaxVal] = useState<number | undefined>(undefined);
+    const {minVal, maxVal, setMinVal, setMaxVal} = rangeStates[id];
     return (
       <div key={id + '.div'}>
 
@@ -295,52 +305,10 @@ export function ProfileFilters({filters, onFilterChange, onShowFilters, onToggle
     )
   }
 
-  const [text, setText] = useState<string>('');
-
   return (
     <div className="w-full mb-8">
       <div className="flex flex-col sm:flex-row gap-4 mb-4">
-        {showFilters && (
-          <div className="relative flex-grow">
-            <div className="relative">
-              <input
-                type="text"
-                placeholder="Search by name or description..."
-                className="w-full pl-10 pr-10 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                value={text}
-                onChange={(e) => setText(e.target.value)}
-                onKeyDown={(e) => {
-                  if (e.key === 'Enter') {
-                    const value = (e.target as HTMLInputElement).value;
-                    onFilterChange('searchQuery', value);
-                  }
-                }}
-              />
-              {filters.searchQuery && (
-                <button
-                  onClick={() => {
-                    onFilterChange('searchQuery', '');
-                    setText('');
-                  }}
-                  className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
-                  type="button"
-                >
-                  <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24"
-                       stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
-                  </svg>
-                </button>
-              )}
-            </div>
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
-                   stroke="currentColor">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
-                      d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
-              </svg>
-            </div>
-          </div>
-        )}
+        {/*{showFilters && ()}*/}
 
         <button
           onClick={() => {
@@ -411,6 +379,10 @@ export function ProfileFilters({filters, onFilterChange, onShowFilters, onToggle
                 Object.values(dropDownStates).map((v) => {
                   v.selected.set(new Set());
                 });
+                Object.values(rangeStates).map((v) => {
+                  v.setMaxVal(undefined);
+                  v.setMinVal(undefined);
+                });
               }}
               className="px-4 py-2 text-sm text-gray-600  dark:text-white hover:text-gray-800"
             >
diff --git a/app/profiles/page.tsx b/app/profiles/page.tsx
index 5f67c856..a8bc975f 100644
--- a/app/profiles/page.tsx
+++ b/app/profiles/page.tsx
@@ -139,29 +139,72 @@ export default function ProfilePage() {
 
   const resetFilters = () => {
     setFilters(initialState);
+    setText('');
   };
 
+  const [text, setText] = useState<string>('');
+
+  const onFilterChange = handleFilterChange
+
   return (
-    <div className="min-h-screen py-12 px-4 sm:px-6 lg:px-8">
+    <div className="min-h-screen px-4 sm:px-6 lg:px-8">
       <div className="w-full max-w-7xl mx-auto">
-        <div className="flex justify-between items-end mb-4">
-          {/*<h1 className="text-4xl sm:text-5xl font-extrabold">People</h1>*/}
-          <div className="text-lg pb-1">
-            Users: <span className="font-bold">{totalUsers}</span>
+        {/*<div className="flex justify-between items-end mb-4">*/}
+        {/*  /!*<h1 className="text-4xl sm:text-5xl font-extrabold">People</h1>*!/*/}
+        {/*  <div className="text-lg pb-1">*/}
+        {/*    Users: <span className="font-bold">{totalUsers}</span>*/}
+        {/*  </div>*/}
+        {/*</div>*/}
+
+        {/*<div className="py-6">*/}
+        {/*  All the profiles are searchable, simply filter them below to find your best connections!*/}
+        {/*</div>*/}
+
+        <div className="relative flex-grow py-6 w-2/4 xs:w-full mx-auto">
+          <div className="relative">
+            <input
+              type="text"
+              placeholder="Search anything..."
+              className="w-full pl-10 pr-10 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  const value = (e.target as HTMLInputElement).value;
+                  onFilterChange('searchQuery', value);
+                }
+              }}
+            />
+            {filters.searchQuery && (
+              <button
+                onClick={() => {
+                  onFilterChange('searchQuery', '');
+                  setText('');
+                }}
+                className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                type="button"
+              >
+                <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4" fill="none" viewBox="0 0 24 24"
+                     stroke="currentColor">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12"/>
+                </svg>
+              </button>
+            )}
+          </div>
+          <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+            <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                 stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2}
+                    d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
+            </svg>
           </div>
         </div>
 
-        <div className="py-6">
-          All the profiles are searchable, simply filter them below to find your best connections!
-        </div>
-
-        <div className="flex flex-col md:flex-row gap-8">
+        <div className="flex flex-col md:flex-row gap-8 xs:gap-0">
           {/* Filters Sidebar */}
-          <div className={`w-full 
-          md:w-80
-           flex-shrink-0`}>
+          <div className={`w-full md:w-80 flex-shrink-0`}>
             {/*// md:${showFilters ? 'w-80' : 'w-20'}*/}
-            <div className="sticky top-24">
+            <div className="top-24">
               <ProfileFilters
                 filters={filters}
                 onFilterChange={handleFilterChange}
@@ -175,15 +218,15 @@ export default function ProfilePage() {
           {/* Profiles Grid */}
           <div className="flex-1">
             {loading ? (
-              <div className="flex justify-center py-12">
+              <div className="flex justify-center py-2">
                 <LoadingSpinner/>
               </div>
             ) : error ? (
-              <div className="flex justify-center py-12">
+              <div className="flex justify-center py-2">
                 <p>{error}</p>
               </div>
             ) : profiles.length > 0 ? (
-              <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2 gap-6">
+              <div className="grid grid-cols-1 sm:grid-cols-1 lg:grid-cols-1 xl:grid-cols-2 gap-6 py-4">
                 {profiles.map((
                   user,
                   idx
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 6c61ce6d..77fe4d90 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,7 +13,7 @@ export default {
         foreground: "var(--foreground)",
       },
       screens: {
-        'xs': {'max': '450px'},
+        'xs': {'max': '500px'},
       },
     },
   },