wip

app/projects/page.tsx

@@ -31,17 +31,23 @@ export default function ProjectsPage() {
     <section>
       <div className="bg-anakiwa-200">
         <div className="container py-8 mx-auto md:py-12 lg:px-24 lg:py-16">
-          <h1 className="text-4xl font-bold md:text-5xl">
-            Explore the project library
-          </h1>
-          <p className="p-2"></p>
-          <p className="w-full text-lg md:w-[612px] md:text-xl">
-            PSE is home to many projects, from cryptography research to
-            developer tools, protocols and proof-of-concept applications.
-          </p>
-          <ProjectFiltersBar />
+          <div className="flex flex-col justify-between gap-10">
+            <div>
+              <h1 className="text-3xl font-bold md:text-5xl">
+                Explore the project library
+              </h1>
+              <p className="p-2"></p>
+              <p className="w-full text-lg md:w-[612px] md:text-xl">
+                PSE is home to many projects, from cryptography research to
+                developer tools, protocols and proof-of-concept applications.
+              </p>
+            </div>
+            <div className=" bg-anakiwa-500 w-20 h-[1px]"></div>
+            <ProjectFiltersBar />
+          </div>
         </div>
       </div>
+
       <div className="w-full bg-anakiwa-100">
         <div className="container">
           <div className="px-3 py-8">

components/project/project-filters-bar.tsx

@@ -37,7 +37,7 @@ export default function ProjectFiltersBar() {
   const router = useRouter()
   const searchParams = useSearchParams()
 
-  const { filters, toggleFilter, queryString, activeFilters } =
+  const { filters, toggleFilter, queryString, activeFilters, onFilterProject } =
     useProjectFiltersState((state) => state)
 
   useEffect(() => {
@@ -115,12 +115,12 @@ export default function ProjectFiltersBar() {
           )
         })}
       </Modal>
-      <div className="flex flex-col gap-6 mt-10">
+      <div className="flex flex-col gap-6">
         <span className="text-lg font-medium">
           What do you want to do today?
         </span>
         <div className="grid items-center justify-between grid-cols-1 gap-3 md:gap-12 md:grid-cols-5">
-          <div className="grid grid-cols-3 col-span-1 gap-4 md:gap-6 md:col-span-2">
+          <div className="relative grid grid-cols-3 col-span-1 gap-4 md:gap-6 md:col-span-2 after:content-none md:after:content-[''] after:absolute after:h-11 after:w-[1px] after:bg-anakiwa-500 after:-right-[25px]">
             <Button variant="white" size="lg">
               Build
             </Button>
@@ -132,7 +132,10 @@ export default function ProjectFiltersBar() {
             </Button>
           </div>
           <div className="grid grid-cols-[1fr_auto] col-span-1 gap-3 md:col-span-3">
-            <Input placeholder="Search project title or keyword" />
+            <Input
+              onChange={(e) => onFilterProject(e.target.value)}
+              placeholder="Search project title or keyword"
+            />
             <div className="flex items-center gap-3">
               <Badge>
                 <Button

state/useProjectFiltersState.ts

@@ -22,7 +22,6 @@ interface ProjectStateProps {
 }
 
 interface SearchMatchByParamsProps {
-  list: any[]
   searchPattern: string
 }
 
@@ -66,19 +65,31 @@ const getProjectFilters = (): FiltersProps => {
   return filters
 }
 
-const filterProjects = ({ list, searchPattern }: SearchMatchByParamsProps) => {
-  const keys = ["title", "tldr", "tags.keywords", "tags.builtWith"]
-  const fuseOptions = {
-    keys,
+const filterProjects = ({ searchPattern }: SearchMatchByParamsProps) => {
+  // keys that will be used for search
+  const keys = [
+    "name",
+    "tldr",
+    "tags.themes",
+    "tags.keywords",
+    "tags.builtWith",
+    "projectStatus",
+  ]
+
+  const query = {
     $or: [
-      {
-        $path: keys,
-        val: searchPattern,
-      },
+      // search for every keys
+      ...keys.map((key) => ({
+        [key]: searchPattern,
+      })),
     ],
   }
-  const fuse = new Fuse(list, fuseOptions)
-  const result = fuse.search(searchPattern)?.map(({ item }) => item)
+  const fuse = new Fuse(projects, {
+    useExtendedSearch: true,
+    keys,
+  })
+  const result = fuse.search(query)?.map(({ item }) => item)
+  console.log(result, projects)
 
   return result ?? []
 }
@@ -114,10 +125,14 @@ export const useProjectFiltersState = create<
     }),
   onFilterProject: (searchPattern: string) => {
     set((state: any) => {
-      if (!searchPattern?.length) return state
+      console.log("searchPattern", searchPattern)
+      if (!searchPattern?.length)
+        return {
+          ...state,
+          projects,
+        }
 
       const filteredProjects = filterProjects({
-        list: state.projects,
         searchPattern,
       })