47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { useRouter } from "next/navigation";
|
|
import { MapPin } from "lucide-react";
|
|
|
|
type SiteOption = { id: string; name: string };
|
|
|
|
export function SiteSelect({
|
|
sites,
|
|
currentSiteId,
|
|
baseHref,
|
|
paramKey = "siteId",
|
|
}: {
|
|
sites: SiteOption[];
|
|
currentSiteId: string | null;
|
|
baseHref: string;
|
|
paramKey?: string;
|
|
}) {
|
|
const router = useRouter();
|
|
return (
|
|
<div className="flex items-center gap-3">
|
|
<MapPin className="h-4 w-4 text-neutral-400 shrink-0" />
|
|
<span className="text-sm font-medium text-neutral-700 whitespace-nowrap">Sort by distance from:</span>
|
|
<select
|
|
value={currentSiteId ?? ""}
|
|
onChange={(e) => {
|
|
const id = e.target.value;
|
|
router.push(id ? `${baseHref}?${paramKey}=${id}` : baseHref);
|
|
}}
|
|
className="rounded-lg border border-neutral-200 bg-neutral-50 px-3 py-1.5 text-sm text-neutral-700 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-primary-500/20"
|
|
>
|
|
<option value="">Price (cheapest first)</option>
|
|
{sites.map((s) => (
|
|
<option key={s.id} value={s.id}>{s.name}</option>
|
|
))}
|
|
</select>
|
|
{currentSiteId && (
|
|
<button
|
|
onClick={() => router.push(baseHref)}
|
|
className="text-xs text-neutral-500 hover:text-neutral-700 hover:underline"
|
|
>
|
|
Clear
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|