Migrate to tailwind styles

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>