Dodo
53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
import { Separator } from "@/components/ui/separator";
|
|
import { ArrowLeftIcon } from "@/components/ui/phosphor-icons";
|
|
import { ContinuousTabs } from "@/components/ui/continuous-tabs";
|
|
|
|
interface GasStationHudProps {
|
|
fuelPriceDisplay: "ron92" | "ron95" | "diesel";
|
|
setFuelPriceDisplay: (price: "ron92" | "ron95" | "diesel") => void;
|
|
brandFilter: string;
|
|
setBrandFilter: (brand: string) => void;
|
|
onCloseMap: () => void;
|
|
}
|
|
|
|
export function GasStationHud({
|
|
fuelPriceDisplay,
|
|
setFuelPriceDisplay,
|
|
brandFilter,
|
|
setBrandFilter,
|
|
onCloseMap,
|
|
}: GasStationHudProps) {
|
|
return (
|
|
<div className="absolute top-4 left-4 z-[999] flex flex-col gap-2">
|
|
<div className="flex flex-wrap items-center gap-3 bg-background/90 backdrop-blur-md border border-border/40 p-2.5 rounded-lg shadow-lg max-w-[90vw]">
|
|
<span className="text-[10px] font-bold text-muted-foreground">TAMPILAN:</span>
|
|
<ContinuousTabs
|
|
tabs={[
|
|
{ id: "ron92", label: "RON 92" },
|
|
{ id: "ron95", label: "RON 95" },
|
|
{ id: "diesel", label: "Diesel" },
|
|
]}
|
|
activeId={fuelPriceDisplay}
|
|
onChange={(id) => setFuelPriceDisplay(id as any)}
|
|
size="sm"
|
|
/>
|
|
<Separator orientation="vertical" className="h-5" />
|
|
<ContinuousTabs
|
|
tabs={[
|
|
{ id: "All", label: "Semua" },
|
|
{ id: "Pertamina", label: "Pertamina" },
|
|
{ id: "Shell", label: "Shell" },
|
|
{ id: "BP", label: "BP" },
|
|
]}
|
|
activeId={brandFilter}
|
|
onChange={setBrandFilter}
|
|
size="sm"
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|