diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Datetime.tsx | 6 | ||||
| -rw-r--r-- | src/components/Map.tsx | 5 | ||||
| -rw-r--r-- | src/components/Slider.tsx | 24 |
3 files changed, 10 insertions, 25 deletions
diff --git a/src/components/Datetime.tsx b/src/components/Datetime.tsx index 2010f8b..8b66a4f 100644 --- a/src/components/Datetime.tsx +++ b/src/components/Datetime.tsx @@ -20,9 +20,9 @@ export function DateTime({ images, slider }: DateTimeProps) { const time = datetime ? datetime.toFormat("HH:mm") : ""; return ( - <div id="datetime"> - <div id="date">{date}</div> - <div id="time">{time}</div> + <div id="datetime" className="absolute top-5 left-5 text-white font-mono"> + <div id="date" className="text-xl">{date}</div> + <div id="time" className="text-4xl">{time}</div> </div> ); }
\ No newline at end of file diff --git a/src/components/Map.tsx b/src/components/Map.tsx index 0e39308..070dc5c 100644 --- a/src/components/Map.tsx +++ b/src/components/Map.tsx @@ -99,10 +99,7 @@ export function Map({ slider, images }: MapProps) { return ( <div> - <div ref={mapContainer} className="map-container" style={{ - height: "100vh", - width: "100vw" - }} /> + <div ref={mapContainer} className="map-container h-screen w-screen" /> </div> ); }
\ No newline at end of file diff --git a/src/components/Slider.tsx b/src/components/Slider.tsx index bb1b84f..bdca22c 100644 --- a/src/components/Slider.tsx +++ b/src/components/Slider.tsx @@ -52,30 +52,18 @@ export function Slider({ playback, slider, setSlider }: SliderProps) { const percentage = (slider / max) * 100; return ( - <div id="slider" style={{ padding: '10px 0' }}> + <div id="slider" className="py-2.5 fixed bottom-[8vh] w-[30vw] ml-[35vw] max-[812px]:w-[80vw] max-[812px]:ml-[8vw] max-[812px]:z-10"> <div ref={sliderRef} - style={{ - position: 'relative', - height: '20px', - backgroundColor: '#3498db', - borderRadius: '10px', - cursor: 'pointer' - }} + className="relative h-5 bg-blue-500 rounded-full cursor-pointer" onMouseDown={handleMouseDown} > <div + className={`absolute -top-2.5 w-10 h-10 bg-white rounded-full shadow-md z-[1] ${ + isDragging ? 'cursor-grabbing' : 'cursor-grab' + }`} style={{ - position: 'absolute', - top: '-10px', - left: `calc(${percentage}% - 20px)`, - width: '40px', - height: '40px', - backgroundColor: '#fff', - borderRadius: '50%', - boxShadow: '.5px .5px 2px 1px rgba(0,0,0,.32)', - cursor: isDragging ? 'grabbing' : 'grab', - zIndex: 1 + left: `calc(${percentage}% - 20px)` }} /> </div> |