web3.news/src/components/SimplifiedSearchBar.tsx

91 lines
2.9 KiB
TypeScript
Raw Normal View History

2023-11-14 15:52:42 +00:00
"use client"
import { usePathname, useRouter, useSearchParams } from "next/navigation"
import React, { FormEvent, useState } from "react"
2023-12-05 14:03:21 +00:00
import { Select, SelectContent, SelectTrigger, SelectItem } from "./ui/select"
import { subDays, subMonths, subYears } from "date-fns"
2023-11-14 15:52:42 +00:00
type Props = {
value: string
placeholder?: string
className?: string
2023-12-05 14:03:21 +00:00
filters?: {
sites: {value: string, label:string}[]
}
2023-11-14 15:52:42 +00:00
}
2023-12-05 14:03:21 +00:00
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' },
];
2023-11-14 15:52:42 +00:00
const SimplifiedSearchBar = ({
value: initialValue,
placeholder,
2023-12-05 14:03:21 +00:00
filters,
2023-11-14 15:52:42 +00:00
className
}: Props) => {
const searchParams = useSearchParams();
const pathname = usePathname();
const router = useRouter();
const [value, setValue] = useState<string>(initialValue)
const handleSearch = (event: FormEvent<HTMLFormElement>) => {
event.preventDefault();
const newSearchParams = new URLSearchParams(searchParams)
if(value) {
newSearchParams.set('q', value)
} else {
newSearchParams.delete('q')
}
router.push(`${pathname}?${newSearchParams}`)
}
return (
<form
className={`flex items-center text-lg border-b border-primary pb-2`}
onSubmit={handleSearch}
>
<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}`}
>
<input
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)}
size={value.length}
/>
</fieldset>
</div>
2023-12-05 14:03:21 +00:00
<div className="w-56 flex">
<Select>
<SelectTrigger className="w-32 flex-1">
All Sites
</SelectTrigger>
<SelectContent>
<SelectItem value="none">No Options yet</SelectItem>
</SelectContent>
</Select>
<Select>
<SelectTrigger className="w-32 flex-1">
All Times
</SelectTrigger>
<SelectContent>
{TIME_FILTER_OPTIONS.map(o => <SelectItem key={o.value.toISOString()} value={o.value.toISOString()}> {o.label}</SelectItem>)}
</SelectContent>
</Select>
2023-11-14 15:52:42 +00:00
</div>
</form>
)
}
export default SimplifiedSearchBar