blob: 266865d10a39c136dab90aa5546b3a3a01db8f51 (
plain)
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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
|
import { Form, useSearchParams } from "react-router";
import type { Venue } from "~/lib/db.server";
interface Props {
venues: Venue[];
defaultDateFrom?: string;
defaultDateTo?: string;
}
export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Props) {
const [searchParams] = useSearchParams();
return (
<Form method="get" className="flex flex-wrap gap-3 items-end">
{/* Keyword */}
<div className="flex flex-col gap-1">
<label className="text-xs text-gray-400">キーワード</label>
<input
name="keyword"
type="text"
defaultValue={searchParams.get("keyword") ?? ""}
placeholder="アーティスト名、イベント名..."
className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500 w-52"
/>
</div>
{/* Venue */}
<div className="flex flex-col gap-1">
<label className="text-xs text-gray-400">会場</label>
<select
name="venue_id"
defaultValue={searchParams.get("venue_id") ?? ""}
className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
>
<option value="">すべて</option>
{venues.map((v) => (
<option key={v.id} value={v.id}>
{v.name}
</option>
))}
</select>
</div>
{/* Date from */}
<div className="flex flex-col gap-1">
<label className="text-xs text-gray-400">開始日</label>
<input
name="date_from"
type="date"
defaultValue={searchParams.get("date_from") ?? defaultDateFrom ?? ""}
className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
/>
</div>
{/* Date to */}
<div className="flex flex-col gap-1">
<label className="text-xs text-gray-400">終了日</label>
<input
name="date_to"
type="date"
defaultValue={searchParams.get("date_to") ?? defaultDateTo ?? ""}
className="rounded-md bg-gray-800 border border-gray-700 px-3 py-1.5 text-sm focus:outline-none focus:ring-1 focus:ring-indigo-500"
/>
</div>
<button
type="submit"
className="rounded-md bg-gray-700 px-4 py-1.5 text-sm font-medium hover:bg-gray-600 transition-colors"
>
絞り込む
</button>
{hasFilters(searchParams) && (
<a
href="/events"
className="rounded-md border border-gray-700 px-4 py-1.5 text-sm text-gray-400 hover:text-white transition-colors"
>
クリア
</a>
)}
</Form>
);
}
function hasFilters(params: URLSearchParams): boolean {
return ["keyword", "venue_id", "date_from", "date_to"].some((k) => params.get(k));
}
|
