fix: use the proper filters on all instances of search

src/components/SearchBar.tsx

@@ -11,7 +11,7 @@ import { ChevronDownIcon, ChevronRightIcon } from "@heroicons/react/24/outline"
 import { flushSync } from "react-dom"
 import Link from "next/link"
 import { usePathname, useSearchParams, useRouter } from "next/navigation"
-import { formatDate, getResults } from "@/utils"
+import { FILTER_TIMES, formatDate, getResults } from "@/utils"
 import {
   Select,
   SelectContent,
@@ -198,29 +198,6 @@ const SearchBar = ({}: Props) => {
   )
 }
 
-const FILTER_TIMES = [
-  {
-    label: "All Times",
-    value: 0,
-  },
-  {
-    label: "1d ago",
-    value: 1
-  },
-  {
-    label: "7d ago",
-    value: 7
-  },
-  {
-    label: "15d ago",
-    value: 15
-  },
-  {
-    label: "1m ago",
-    value: 30
-  }
-]
-
 // Placeholder components for Shadcn
 const LoadingComponent = () => {
   // Replace with actual Shadcn Loading component

src/components/SimplifiedSearchBar.tsx

@@ -2,46 +2,37 @@
 
 import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import React, { FormEvent, useState } from "react"
-import { Select, SelectContent, SelectTrigger, SelectItem } from "./ui/select"
+import { Select, SelectContent, SelectTrigger, SelectItem, SelectValue } from "./ui/select"
-import { subDays, subMonths, subYears } from "date-fns"
+import { SitesCombobox } from "./SitesCombobox"
+import { FILTER_TIMES } from "@/utils"
 
 type Props = {
   value: string
   placeholder?: string
   className?: string
   filters?: {
-    sites: {value: string, label:string}[]
+    sites: { value: string; label: string }[]
   }
 }
 
-export const TIME_FILTER_OPTIONS = [
-  { value: subDays(new Date(), 1), label: '1d ago' },
-  { value: subDays(new Date(), 7), label: '7d ago' },
-  { value: subDays(new Date(), 15), label: '15d ago' },
-  { value: subMonths(new Date(), 1), label: '1m ago' },
-  { value: subMonths(new Date(), 6), label: '6m ago' },
-  { value: subYears(new Date(), 1), label: '1y ago' },
-];
-
-
 const SimplifiedSearchBar = ({
   value: initialValue,
   placeholder,
   filters,
   className
 }: Props) => {
-  const searchParams = useSearchParams();
+  const searchParams = useSearchParams()
-  const pathname = usePathname();
+  const pathname = usePathname()
-  const router = useRouter();
+  const router = useRouter()
   const [value, setValue] = useState<string>(initialValue)
   const handleSearch = (event: FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
+    event.preventDefault()
-    const newSearchParams = new URLSearchParams(searchParams)
+    const newSearchParams = new URLSearchParams(searchParams ?? undefined)
 
-    if(value) {
+    if (value) {
-      newSearchParams.set('q', value)
+      newSearchParams.set("q", value)
     } else {
-      newSearchParams.delete('q')
+      newSearchParams.delete("q")
     }
 
     router.push(`${pathname}?${newSearchParams}`)
@@ -54,10 +45,16 @@ const SimplifiedSearchBar = ({
       <div className="flex-1 flex flex-row max-w-full">
         <span className="text-white mr-2">results: </span>
         <fieldset
-          className={`${value && value !== "" ? `after:content-['"'] before:content-['"'] relative after:absolute after:-right-1` : "w-full"} text-primary ${className}`}
+          className={`${
+            value && value !== ""
+              ? `after:content-['"'] before:content-['"'] relative after:absolute after:-right-1`
+              : "w-full"
+          } text-primary ${className}`}
         >
           <input
-            className={`flex-grow inline bg-transparent placeholder-gray-400 outline-none ring-none text-primary ${value && value !== "" ? "" : "w-full"}`}
+            className={`flex-grow inline bg-transparent placeholder-gray-400 outline-none ring-none text-primary ${
+              value && value !== "" ? "" : "w-full"
+            }`}
             placeholder={placeholder}
             value={value}
             onChange={(e) => setValue(e.target.value)}
@@ -65,21 +62,23 @@ const SimplifiedSearchBar = ({
           />
         </fieldset>
       </div>
-      <div className="w-56 flex">
+      <div className="w-56 flex gap-2">
-            <Select>
+        {/* Dropdown component should be here */}
-                <SelectTrigger className="w-32 flex-1">
+        <SitesCombobox />
-                  All Sites
+        {/* Dropdown component should be here */}
+        <Select defaultValue={"0"}>
+          <SelectTrigger className="hover:bg-muted w-auto">
+            <SelectValue placeholder="Time ago" />
           </SelectTrigger>
           <SelectContent>
-                  <SelectItem value="none">No Options yet</SelectItem>
+            {FILTER_TIMES.map((v) => (
-                </SelectContent>
+              <SelectItem
-            </Select>
+                value={String(v.value)}
-          <Select>
+                key={`FilteTimeSelectItem_${v.value}`}
-                <SelectTrigger className="w-32 flex-1">
+              >
-                  All Times
+                {v.label}
-                </SelectTrigger>
+              </SelectItem>
-                <SelectContent>
+            ))}
-                  {TIME_FILTER_OPTIONS.map(o => <SelectItem key={o.value.toISOString()} value={o.value.toISOString()}> {o.label}</SelectItem>)}
           </SelectContent>
         </Select>
       </div>

src/utils.ts

@@ -1,4 +1,4 @@
-import { formatDistanceToNow } from "date-fns"
+import { formatDistanceToNow, subDays, subMonths, subYears } from "date-fns"
 import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
@@ -71,3 +71,13 @@ export async function getAvailableSites() {
   
   return statuses;
 }
+
+export const FILTER_TIMES = [
+  { value: 0, label: "All Times" },
+  { value: subDays(new Date(), 1), label: "1d ago" },
+  { value: subDays(new Date(), 7), label: "7d ago" },
+  { value: subDays(new Date(), 15), label: "15d ago" },
+  { value: subMonths(new Date(), 1), label: "1m ago" },
+  { value: subMonths(new Date(), 6), label: "6m ago" },
+  { value: subYears(new Date(), 1), label: "1y ago" }
+]