58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
|
import React, { SetStateAction } from "react";
|
||
|
|
import ClickAwayHandler from "./ClickAwayHandler";
|
||
|
|
import Checkbox from "./Checkbox";
|
||
|
|
import { SearchSettings } from "@/types/global";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
setFilterDropdown: (value: SetStateAction<boolean>) => void;
|
||
|
|
toggleCheckbox: (
|
||
|
|
name: "name" | "title" | "url" | "collection" | "tags"
|
||
|
|
) => void;
|
||
|
|
searchSettings: SearchSettings;
|
||
|
|
};
|
||
|
|
|
||
|
|
export default function FilterSearchDropdown({
|
||
|
|
setFilterDropdown,
|
||
|
|
toggleCheckbox,
|
||
|
|
searchSettings,
|
||
|
|
}: Props) {
|
||
|
|
return (
|
||
|
|
<ClickAwayHandler
|
||
|
|
onClickOutside={(e: Event) => {
|
||
|
|
const target = e.target as HTMLInputElement;
|
||
|
|
if (target.id !== "filter-dropdown") setFilterDropdown(false);
|
||
|
|
}}
|
||
|
|
className="absolute top-8 right-0 shadow-md bg-gray-50 rounded-md p-2 z-20 w-40"
|
||
|
|
>
|
||
|
|
<p className="mb-2 text-sky-900 text-center font-semibold">Filter by</p>
|
||
|
|
<div className="flex flex-col gap-2">
|
||
|
|
<Checkbox
|
||
|
|
label="Name"
|
||
|
|
state={searchSettings.filter.name}
|
||
|
|
onClick={() => toggleCheckbox("name")}
|
||
|
|
/>
|
||
|
|
<Checkbox
|
||
|
|
label="Link"
|
||
|
|
state={searchSettings.filter.url}
|
||
|
|
onClick={() => toggleCheckbox("url")}
|
||
|
|
/>
|
||
|
|
<Checkbox
|
||
|
|
label="Title"
|
||
|
|
state={searchSettings.filter.title}
|
||
|
|
onClick={() => toggleCheckbox("title")}
|
||
|
|
/>
|
||
|
|
<Checkbox
|
||
|
|
label="Collection"
|
||
|
|
state={searchSettings.filter.collection}
|
||
|
|
onClick={() => toggleCheckbox("collection")}
|
||
|
|
/>
|
||
|
|
<Checkbox
|
||
|
|
label="Tags"
|
||
|
|
state={searchSettings.filter.tags}
|
||
|
|
onClick={() => toggleCheckbox("tags")}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</ClickAwayHandler>
|
||
|
|
);
|
||
|
|
}
|