update search page icons

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>

components/PageHeader.tsx

@@ -6,7 +6,7 @@ export default function PageHeader({
   icon,
 }: {
   title: string;
-  description: string;
+  description?: string;
   icon: string;
 }) {
   return (

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>

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}