From 4210913277abf14704e8c261517ecd91aa338920 Mon Sep 17 00:00:00 2001
From: Yee Jia Wei <yeejiawei0811@gmail.com>
Date: Sun, 17 Dec 2023 16:57:05 +0800
Subject: [PATCH] update search page icons

---
 components/FilterSearchDropdown.tsx | 10 +++-------
 components/PageHeader.tsx           |  2 +-
 components/SortDropdown.tsx         | 11 +++--------
 pages/search.tsx                    | 20 ++++----------------
 4 files changed, 11 insertions(+), 32 deletions(-)

diff --git a/components/FilterSearchDropdown.tsx b/components/FilterSearchDropdown.tsx
index a4cd804..1fa2634 100644
--- a/components/FilterSearchDropdown.tsx
+++ b/components/FilterSearchDropdown.tsx
@@ -1,6 +1,4 @@
 import React from "react";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFilter } from "@fortawesome/free-solid-svg-icons";
 
 type Props = {
   setSearchFilter: Function;
@@ -24,11 +22,9 @@ export default function FilterSearchDropdown({
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <FontAwesomeIcon
-          icon={faFilter}
-          id="sort-dropdown"
-          className="w-5 h-5 text-neutral"
-        />
+        <i
+          className="bi-funnel text-neutral text-2xl"
+        ></i>
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mt-1">
         <li>
diff --git a/components/PageHeader.tsx b/components/PageHeader.tsx
index b169feb..e19b59c 100644
--- a/components/PageHeader.tsx
+++ b/components/PageHeader.tsx
@@ -6,7 +6,7 @@ export default function PageHeader({
   icon,
 }: {
   title: string;
-  description: string;
+  description?: string;
   icon: string;
 }) {
   return (
diff --git a/components/SortDropdown.tsx b/components/SortDropdown.tsx
index 3f57e9f..046331c 100644
--- a/components/SortDropdown.tsx
+++ b/components/SortDropdown.tsx
@@ -14,14 +14,9 @@ export default function SortDropdown({ sortBy, setSort }: Props) {
         role="button"
         className="btn btn-sm btn-square btn-ghost"
       >
-        <svg
-          className="w-5 h-5 text-neutral"
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-        >
-          <path d="M3 6H12H21M6 12H18M9 18H15" stroke="currentColor"></path>
-        </svg>
+        <i
+          className="bi-filter text-neutral text-2xl"
+        ></i>
       </div>
       <ul className="dropdown-content z-[30] menu shadow bg-base-200 border border-neutral-content rounded-xl w-52 mt-1">
         <li>
diff --git a/pages/search.tsx b/pages/search.tsx
index 51bd539..5511ce0 100644
--- a/pages/search.tsx
+++ b/pages/search.tsx
@@ -1,18 +1,16 @@
 import FilterSearchDropdown from "@/components/FilterSearchDropdown";
-import LinkCard from "@/components/LinkViews/LinkComponents/LinkCard";
 import SortDropdown from "@/components/SortDropdown";
 import useLinks from "@/hooks/useLinks";
 import MainLayout from "@/layouts/MainLayout";
 import useLinkStore from "@/store/links";
 import { Sort, ViewMode } from "@/types/global";
-import { faFilter, faSearch, faSort } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useRouter } from "next/router";
-import { useState } from "react";
+import React, { useState } from "react";
 import ViewDropdown from "@/components/ViewDropdown";
 import DefaultView from "@/components/LinkViews/DefaultView";
 import GridView from "@/components/LinkViews/GridView";
 import ListView from "@/components/LinkViews/ListView";
+import PageHeader from "@/components/PageHeader";
 
 export default function Search() {
   const { links } = useLinkStore();
@@ -56,19 +54,9 @@ export default function Search() {
   return (
     <MainLayout>
       <div className="p-5 flex flex-col gap-5 w-full">
-        <div className="flex gap-3 items-center justify-between">
-          <div className="flex gap-3 items-center">
-            <div className="flex items-center gap-2">
-              <FontAwesomeIcon
-                icon={faSearch}
-                className="sm:w-8 sm:h-8 w-8 h-8 text-primary drop-shadow"
-              />
-              <p className="sm:text-4xl text-3xl capitalize font-thin">
-                Search Results
-              </p>
-            </div>
-          </div>
+        <PageHeader icon={'bi-search'} title={'Search Results'}/>
 
+        <div className="flex gap-3 items-center justify-end">
           <div className="flex gap-2 items-center mt-2">
             <FilterSearchDropdown
               searchFilter={searchFilter}