-
Notifications
You must be signed in to change notification settings - Fork 3
/
advanced-search-button.tsx
37 lines (29 loc) · 1.03 KB
/
advanced-search-button.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
"use client";
import dynamic from "next/dynamic";
import { useState } from "react";
import { Backdrop } from "@/components/backdrop";
import { useShinryoukouiSearchByQuery } from "@/hooks/use-shinryoukoui-search";
type AdvancedSearchLinkProps = {
initialQuery?: string;
};
export function AdvancedSearchButton({ initialQuery }: AdvancedSearchLinkProps) {
const [advancedSearchOpen, setAdvancedSearchOpen] = useState(false);
const open = () => {
setAdvancedSearchOpen(true);
};
const search = useShinryoukouiSearchByQuery();
return (
<>
<button
onClick={open}
className="text-blue-600 hover:text-blue-800 text-sm">
詳細検索
</button>
{advancedSearchOpen && <DynamicAdvancedSearchFormModal query={initialQuery ?? ""} onChange={search} onClose={() => setAdvancedSearchOpen(false)} />}
</>
);
}
const DynamicAdvancedSearchFormModal = dynamic(
() => import("./advancedj-search-form-modal").then(m => m.AdvancedSearchFormModal),
{ ssr: false, loading: () => <Backdrop /> },
);