1 files changed, 22 insertions, 2 deletions
diff --git a/app/components/FilterBar.tsx b/app/components/FilterBar.tsx
index 7b8ca0c..7a95d2c 100644
--- a/app/components/FilterBar.tsx
+++ b/app/components/FilterBar.tsx
@@ -3,11 +3,12 @@ import type { Venue } from "~/lib/db.server";
 
 interface Props {
   venues: Venue[];
+  areas?: string[];
   defaultDateFrom?: string;
   defaultDateTo?: string;
 }
 
-export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Props) {
+export default function FilterBar({ venues, areas, defaultDateFrom, defaultDateTo }: Props) {
   const [searchParams] = useSearchParams();
 
   return (
@@ -63,6 +64,25 @@ export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Pr
         />
       </div>
 
+      {/* Area */}
+      {areas && areas.length > 0 && (
+        <div className="flex flex-col gap-1">
+          <label className="text-xs text-gray-400">エリア</label>
+          <select
+            name="area"
+            defaultValue={searchParams.get("area") ?? ""}
+            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>
+            {areas.map((a) => (
+              <option key={a} value={a}>
+                {a}
+              </option>
+            ))}
+          </select>
+        </div>
+      )}
+
       {/* Capacity */}
       <div className="flex flex-col gap-1">
         <label className="text-xs text-gray-400">キャパシティ</label>
@@ -98,5 +118,5 @@ export default function FilterBar({ venues, defaultDateFrom, defaultDateTo }: Pr
 }
 
 function hasFilters(params: URLSearchParams): boolean {
-  return ["keyword", "venue_id", "date_from", "date_to", "capacity_range"].some((k) => params.get(k));
+  return ["keyword", "venue_id", "date_from", "date_to", "capacity_range", "area"].some((k) => params.get(k));
 }