diff --git a/admin/inertia/components/maps/CreateMapMarkerPopup.tsx b/admin/inertia/components/maps/CreateMapMarkerPopup.tsx deleted file mode 100644 index b55c66f..0000000 --- a/admin/inertia/components/maps/CreateMapMarkerPopup.tsx +++ /dev/null @@ -1,115 +0,0 @@ -import { Popup } from 'react-map-gl/maplibre' - -import { PIN_COLORS } from '~/hooks/useMapMarkers' -import type { PinColorId } from '~/hooks/useMapMarkers' - -const MAX_MARKER_NOTES_LENGTH = 1000 - -const inputClass = - 'block w-full appearance-none rounded border border-gray-300 bg-transparent px-2 py-1 text-sm text-gray-900 leading-normal placeholder:text-gray-400 focus:border-gray-500 focus:outline-none' - -type CreateMapMarkerPopupProps = { - longitude: number - latitude: number - markerName: string - markerNotes: string - markerColor: PinColorId - onNameChange: (value: string) => void - onNotesChange: (value: string) => void - onColorChange: (value: PinColorId) => void - onSave: () => void - onCancel: () => void -} - -export default function CreateMapMarkerPopup({ - longitude, - latitude, - markerName, - markerNotes, - markerColor, - onNameChange, - onNotesChange, - onColorChange, - onSave, - onCancel, - }: CreateMapMarkerPopupProps) { - return ( - - - onNameChange(e.target.value)} - onKeyDown={(e) => { - if (e.key === 'Enter') onSave() - if (e.key === 'Escape') onCancel() - }} - className={inputClass} - /> - - { - onNotesChange(e.target.value) - e.currentTarget.style.height = 'auto' - e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px` - }} - className={`mt-1 min-h-[64px] resize-none overflow-hidden ${inputClass}`} - /> - - - {markerNotes.length}/{MAX_MARKER_NOTES_LENGTH} - - - - {PIN_COLORS.map((color) => ( - onColorChange(color.id)} - title={color.label} - className="rounded-full p-0.5 transition-transform" - style={{ - outline: - markerColor === color.id ? `2px solid ${color.hex}` : '2px solid transparent', - outlineOffset: '1px', - }} - > - - - ))} - - - - - Cancel - - - - Save - - - - - ) -} diff --git a/admin/inertia/components/maps/EditMapMarkerPopup.tsx b/admin/inertia/components/maps/EditMapMarkerPopup.tsx deleted file mode 100644 index 1b5919c..0000000 --- a/admin/inertia/components/maps/EditMapMarkerPopup.tsx +++ /dev/null @@ -1,111 +0,0 @@ -import { useState } from 'react' -import { Popup } from 'react-map-gl/maplibre' - -import type { MapMarker, PinColorId } from '~/hooks/useMapMarkers' -import { PIN_COLORS } from '~/hooks/useMapMarkers' - -const MAX_MARKER_NOTES_LENGTH = 1000 - -const inputClass = - 'block w-full rounded border border-gray-300 bg-transparent px-2 py-1 text-sm text-gray-900 leading-normal placeholder:text-gray-400 focus:outline-none focus:border-gray-500' - -type EditMapMarkerPopupProps = { - marker: MapMarker - onSave: (id: number, name: string, notes: string, color: PinColorId) => void - onCancel: () => void -} - -export default function EditMapMarkerPopup({ - marker, - onSave, - onCancel, - }: EditMapMarkerPopupProps) { - const [name, setName] = useState(marker.name) - const [notes, setNotes] = useState(marker.notes ?? '') - const [color, setColor] = useState(marker.color) - - const handleSave = () => { - if (!name.trim()) return - onSave(marker.id, name.trim(), notes.trim(), color) - } - - return ( - - - setName(e.target.value)} - onKeyDown={(e) => { - if (e.key === 'Enter') handleSave() - if (e.key === 'Escape') onCancel() - }} - className={inputClass} - /> - - { - setNotes(e.target.value) - e.currentTarget.style.height = 'auto' - e.currentTarget.style.height = `${e.currentTarget.scrollHeight}px` - }} - className={`mt-1 min-h-[64px] resize-none overflow-hidden ${inputClass}`} - /> - - - {notes.length}/{MAX_MARKER_NOTES_LENGTH} - - - - {PIN_COLORS.map((pinColor) => ( - setColor(pinColor.id)} - title={pinColor.label} - className="rounded-full p-0.5 transition-transform" - style={{ - outline: color === pinColor.id ? `2px solid ${pinColor.hex}` : '2px solid transparent', - outlineOffset: '1px', - }} - > - - - ))} - - - - - Cancel - - - - Save - - - - - ) -}