63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
import { useTrips } from "@/lib/hooks/use-trips";
|
|
import { Map } from "leaflet";
|
|
import { Button } from "./ui/button";
|
|
import { Trash, MoreHorizontal } from "lucide-react";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { EditPlace } from "./EditPlace";
|
|
import { useState } from "react";
|
|
import { PlaceCard } from "./PlaceCard";
|
|
import { Place } from "@/lib/types";
|
|
|
|
export type PlaceProps = {
|
|
place: Place;
|
|
number: number;
|
|
map?: Map;
|
|
};
|
|
|
|
export function PlaceForMap({ place, number, map }: PlaceProps) {
|
|
const { selectedTrip, deletePlace } = useTrips();
|
|
const [dropdownOpen, setDropdownOpen] = useState(false);
|
|
|
|
if (!selectedTrip) return null;
|
|
|
|
const handleDelete = () => {
|
|
deletePlace(selectedTrip.id, place.id);
|
|
};
|
|
|
|
const actions = (
|
|
<DropdownMenu open={dropdownOpen} onOpenChange={setDropdownOpen}>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button variant="ghost" size="icon" className="h-8 w-8">
|
|
<MoreHorizontal className="h-4 w-4" />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent align="end">
|
|
<EditPlace place={place} onOpenChange={setDropdownOpen} />
|
|
<DropdownMenuItem onClick={handleDelete} className="text-destructive">
|
|
<Trash className="w-4 h-4 mr-2" />
|
|
Delete
|
|
</DropdownMenuItem>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
);
|
|
|
|
return (
|
|
<PlaceCard
|
|
shouldShowCheckbox={false}
|
|
place={place}
|
|
number={number}
|
|
actions={actions}
|
|
onMouseEnter={() => {
|
|
if (map) {
|
|
map.panTo([place.latitude, place.longitude]);
|
|
}
|
|
}}
|
|
/>
|
|
);
|
|
}
|