fifteen/apps/web/components/city-selector.tsx
2026-03-01 21:59:44 +01:00

39 lines
1.1 KiB
TypeScript

"use client";
import type { City } from "@transportationer/shared";
interface CitySelectorProps {
cities: City[];
selected: string | null;
onSelect: (slug: string) => void;
}
export function CitySelector({ cities, selected, onSelect }: CitySelectorProps) {
const ready = cities.filter((c) => c.status === "ready");
if (ready.length === 0) {
return (
<div className="flex items-center gap-3 px-4 py-2 bg-yellow-50 border border-yellow-200 rounded-md text-sm text-yellow-800">
<span>No cities available.</span>
<a href="/admin/cities/new" className="underline font-medium">
Add one in Admin
</a>
</div>
);
}
return (
<select
value={selected ?? ""}
onChange={(e) => onSelect(e.target.value)}
className="rounded-md border border-gray-300 px-3 py-2 text-sm bg-white focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
>
{!selected && <option value="">Select a city</option>}
{ready.map((c) => (
<option key={c.slug} value={c.slug}>
{c.name}
</option>
))}
</select>
);
}