Allow filtering search

src/QuoteInfo.tsx

@@ -1,4 +1,3 @@
-import { useState } from "react"
 import { Quote } from "./pocketbase-types"
 
 interface QuoteInfoProps {
@@ -8,7 +7,7 @@ export default function QuoteInfo({ quote }: QuoteInfoProps) {
 
   return (
     //TODO: Bettes Colors
-    <div className="dark:bg-slate-800 shadow-(--box) m-1 p-2 cursor-pointer" onClick={(e) => console.log(quote.id)}>
+    <div className="dark:bg-slate-800 shadow-(--box) m-1 p-2 cursor-pointer">
       <p className="border-4 border-black bg-slate-300 text-black p-1 my-1 cursor-text">{quote.quote}</p>
       {quote.context && <p className="border-4 border-black bg-slate-300 text-slate-600 p-1 my-1 cursor-text">{quote.context}</p>}
       <div className="flex flex-row">

src/QuoteList.tsx

@@ -17,12 +17,25 @@ export default function QuoteList() {
   const [error, setError] = useState<Error | null>(null)
   const [collection, setCollection] = useState<Collections | null>(Collections.QtBit)
   const [searchItem, setSearchItem] = useState<string | null>(null)
+  const [searchFilter, setSearchFilter] = useState<string | null>("quote")
 
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const searchTerm = e.target.value;
     setSearchItem(searchTerm)
-
-    const filteredItems = quotes?.filter((quote) => quote.quote.toLowerCase().includes(searchTerm.toLowerCase()));
+    let filteredItems;
+    switch (searchFilter) {
+      case "quote":
+        filteredItems = quotes?.filter((quote) => quote.quote.toLowerCase().includes(searchTerm.toLowerCase()));
+        break;
+      case "context":
+        filteredItems = quotes?.filter((quote) => quote.context?.toLowerCase().includes(searchTerm.toLowerCase()));
+        break;
+      case "author":
+        filteredItems = quotes?.filter((quote) => quote.author.toLowerCase().includes(searchTerm.toLowerCase()));
+        break;
+      default:
+        break;
+    }
     setFilteredQuotes(filteredItems!)
   }
 
@@ -70,13 +83,20 @@ export default function QuoteList() {
         <div className='pl-2 flex flex-row'>
           <input
             title='Search for quote'
-            placeholder='Search...'
+            placeholder={'Search for ' + searchFilter as string}
             value={searchItem as string}
             onChange={e => handleInputChange(e)}
             className='placeholder:text-slate-400 bg-slate-700' />
-          <button type="button" className='cursor-pointer' title='Filter search'>
-            <FilterIcon className="w-5 mx-1 active:text-lime-500" />
-          </button>
+          <p className='text-lime-500'>|</p>
+          <select
+            title='Filter search'
+            className='pr-1 bg-slate-700'
+            value={searchFilter as string}
+            onChange={e => setSearchFilter(e.target.value as string)}>
+            <option value="quote">Quote</option>
+            <option value="context">Context</option>
+            <option value="author">Author</option>
+          </select>
         </div>
         <p className='text-lime-500'>|</p>
         <button type='button' className='cursor-pointer ml-auto' title='Add new quote'>