From a8e74f13eb664741f9b288e3047e9d918ce71bed Mon Sep 17 00:00:00 2001
From: Ilakkiya Senthilkumar <isenthil@unc.edu>
Date: Sat, 20 Apr 2024 15:30:48 -0400
Subject: [PATCH] 4/20 meeting progress

---
 compass/components/Table/TableAction.tsx         | 2 +-
 compass/components/resource/LandingSearchBar.tsx | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/compass/components/Table/TableAction.tsx b/compass/components/Table/TableAction.tsx
index 852c3a4..0b20d32 100644
--- a/compass/components/Table/TableAction.tsx
+++ b/compass/components/Table/TableAction.tsx
@@ -37,7 +37,7 @@ export const TableAction: FunctionComponent<TableActionProps> = ({
   return (
     <div className="w-auto flex flex-row gap-x-0.5 items-center justify-between text-xs font-medium text-gray-500 p-2">
       <span
-        className="p-1 rounded hover:bg-gray-100"
+        className="p-1 rounded hover:text-purple-700 focus:bg-purple-50 hover:bg-purple-50"
         onClick={toggleFilterBox}
       >
         Filter
diff --git a/compass/components/resource/LandingSearchBar.tsx b/compass/components/resource/LandingSearchBar.tsx
index f52b6ba..724131b 100644
--- a/compass/components/resource/LandingSearchBar.tsx
+++ b/compass/components/resource/LandingSearchBar.tsx
@@ -1,9 +1,12 @@
-import { MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
+import { ChevronDownIcon, MagnifyingGlassIcon, XMarkIcon } from "@heroicons/react/24/solid"
 import React, { useState } from 'react';
 import Image from 'next/image';
+import { FilterBox } from "../FilterBox";
 
 export const LandingSearchBar: React.FC = () => {
   const [searchTerm, setSearchTerm] = useState('');
+  const [showFilterBox, setShowFilterBox] = useState(false);
+  const toggleFilterBox = () => setShowFilterBox((prev) => !prev);
 
   const handleSearchChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setSearchTerm(event.target.value);
@@ -34,7 +37,9 @@ export const LandingSearchBar: React.FC = () => {
             <XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
           </button>
         )}
-        <div className="p-3">
+        <div className="flex flex-row space-x-1 p-3">
+          <span><ChevronDownIcon className="h-5 w-5 text-gray-500" onClick={toggleFilterBox} /></span>
+          {showFilterBox && <FilterBox className="relative top-50" />}
           <MagnifyingGlassIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
         </div>
       </div>