stlye: highlight map if location is not selected

src/pages/[id].astro

@@ -17,7 +17,7 @@ import { Separator } from '@/components/ui/separator';
 import type { ContentTable } from '@/lib/db';
 import dayjs from 'dayjs';
 import relativeTime from 'dayjs/plugin/relativeTime';
-import localeTR from 'dayjs/locale/tr';
+import utc from 'dayjs/plugin/utc';
 
 type Content = Omit<ContentTable, 'url'>;
 
@@ -29,12 +29,12 @@ const res = await fetch(
 
 const data: Content | null = res.status === 200 ? await res.json() : null;
 
-dayjs.locale(localeTR);
-
 dayjs.extend(relativeTime);
 
+dayjs.extend(utc);
+
 // @ts-expect-error Generated<string> is string
-const dateFromNow = dayjs(data?.created_at).fromNow();
+const dateFromNow = dayjs(data?.created_at).add(3, 'hour').from(dayjs.utc());
 ---
 
 <Layout>

src/pages/index.astro

@@ -44,7 +44,12 @@ import { Label } from '@/components/ui/label';
           getirilecek.
         </p>
         <div class="grid w-full max-w-sm items-center gap-1.5 mt-4">
-          <Input type="file" name="selected-photo" id="photo-selector" />
+          <Input
+            type="file"
+            name="selected-photo"
+            id="photo-selector"
+            required
+          />
           <p class="text-sm text-muted-foreground">
             Galerinizden bir fotoğraf seçin.
           </p>
@@ -62,14 +67,23 @@ import { Label } from '@/components/ui/label';
           gittiği zaman seçtiğiniz fotoğrafı görebilecek.
         </p>
         <div>
-          <div id="map" class="w-full h-[450px] rounded mt-4"></div>
+          <div
+            id="map"
+            class="w-full h-[450px] rounded mt-4 transition-colors ease-in-out border-2 duration-300"
+          >
+          </div>
           <p class="text-xl mt-2">
             <span class="font-semibold">Seçilen Konum:</span>
           </p>
-          <p class="text-lg" id="coordinates">
+
+          <p
+            class="text-lg transition ease-in-out duration-700"
+            id="coordinates"
+          >
             Henüz konum seçmediniz, konum seçmek için haritadaki bir noktaya
             basınız.
           </p>
+
           <p
             class="text-lg text-muted-foreground mt-2"
             id="location-selected-confirmation"
@@ -92,6 +106,7 @@ import { Label } from '@/components/ui/label';
               id="location-author"
               name="author"
               placeholder="İsminizi buraya yazınız."
+              required
             />
           </div>
           <div class="grid w-full max-w-sm items-center gap-1.5">
@@ -100,6 +115,7 @@ import { Label } from '@/components/ui/label';
               placeholder="Açıklamanızı buraya yazınız."
               name="description"
               id="location-description"
+              required
             />
             <p class="text-sm text-muted-foreground">
               Bir açıklama girin, yüklediğiniz içeriğin üzerine bu metin
@@ -132,6 +148,26 @@ import { Label } from '@/components/ui/label';
   const handleSubmit = async (e: SubmitEvent) => {
     e.preventDefault();
 
+    const locationSelected = document.getElementById(
+      'location-selected-confirmation'
+    )?.innerText;
+
+    if (!locationSelected) {
+      const coordinatesText = document.getElementById('coordinates');
+
+      const mapDiv = document.getElementById('map');
+
+      mapDiv?.classList.add('border-slate-700');
+      coordinatesText?.classList.add('drop-shadow-xl');
+
+      setTimeout(() => {
+        mapDiv?.classList.remove('border-slate-700');
+        coordinatesText?.classList.remove('drop-shadow-xl');
+      }, 500);
+
+      return;
+    }
+
     const submitButton = document.getElementById(
       'submit-button'
     ) as HTMLButtonElement;