1 files changed, 85 insertions, 0 deletions
diff --git a/app/components/FilterBar.tsx b/app/components/FilterBar.tsx
new file mode 100644
index 0000000..97a3c02
--- /dev/null
+++ b/app/components/FilterBar.tsx
@@ -0,0 +1,85 @@
+import { Form, useSearchParams } from "react-router";
+import type { Venue } from "~/lib/db.server";
+
+interface Props {
+  venues: Venue[];
+}
+
+export default function FilterBar({ venues }: 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") ?? ""}
+          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") ?? ""}
+          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));
+}