mirror of https://github.com/usememos/memos
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
36 lines
1.3 KiB
TypeScript
36 lines
1.3 KiB
TypeScript
import { LatLng } from "leaflet";
|
|
import { MapPinIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
import { Location } from "@/types/proto/api/v1/memo_service";
|
|
import LeafletMap from "./LeafletMap";
|
|
import { Popover, PopoverContent, PopoverTrigger } from "./ui/Popover";
|
|
|
|
interface Props {
|
|
location: Location;
|
|
}
|
|
|
|
const MemoLocationView: React.FC<Props> = (props: Props) => {
|
|
const { location } = props;
|
|
const [popoverOpen, setPopoverOpen] = useState<boolean>(false);
|
|
|
|
return (
|
|
<Popover open={popoverOpen} onOpenChange={setPopoverOpen}>
|
|
<PopoverTrigger asChild>
|
|
<p className="w-full flex flex-row gap-0.5 items-center text-gray-500">
|
|
<MapPinIcon className="w-4 h-auto shrink-0" />
|
|
<span className="text-sm font-normal text-ellipsis whitespace-nowrap overflow-hidden">
|
|
{location.placeholder ? location.placeholder : `[${location.latitude}, ${location.longitude}]`}
|
|
</span>
|
|
</p>
|
|
</PopoverTrigger>
|
|
<PopoverContent align="start">
|
|
<div className="min-w-80 sm:w-128 flex flex-col justify-start items-start">
|
|
<LeafletMap latlng={new LatLng(location.latitude, location.longitude)} readonly={true} />
|
|
</div>
|
|
</PopoverContent>
|
|
</Popover>
|
|
);
|
|
};
|
|
|
|
export default MemoLocationView;
|