Added a mostly static location show page

avo-hq · Dec 6, 2024 · 825c595 · 825c595
1 parent 4b4b631
commit 825c595
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 4 deletions.
diff --git a/app/assets/images/icons/address.svg b/app/assets/images/icons/address.svg
diff --git a/app/assets/images/icons/phone_number.svg b/app/assets/images/icons/phone_number.svg
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
@@ -24,6 +24,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap" rel="stylesheet">
+    <link href="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.css" rel="stylesheet">
+    <script src="https://api.mapbox.com/mapbox-gl-js/v3.8.0/mapbox-gl.js"></script>
   </head>
 
   <body>

diff --git a/app/views/locations/_map.html.erb b/app/views/locations/_map.html.erb
@@ -0,0 +1,13 @@
+<section class="mt-6">
+  <h2 class="text-lg font-semibold text-gray-900 mb-2">Where it's located</h2>
+  <div id="map" class="w-full h-72 rounded-xl border border-gray-200"></div>
+</section>
+
+<script>
+	mapboxgl.accessToken = 'pk.eyJ1IjoiZXJvemFzIiwiYSI6ImNsaTliaXBqMzBkeGwzZm51Zmh6dmVsN2gifQ.KANPmPLBiC3CIyCOnPhCnw';
+    const map = new mapboxgl.Map({
+        container: 'map', // container ID
+        center: [26.1171142, 44.4147689],
+        zoom: 13 // starting zoom
+    });
+</script>
diff --git a/app/views/locations/show.html.erb b/app/views/locations/show.html.erb
@@ -13,20 +13,42 @@
     </div>
   </div>
 
-  <%# Location Details %>
   <div class="mt-8 grid grid-cols-12 gap-8">
-    <%# Left column - Description %>
     <div class="col-span-8 space-y-6">
       <div>
         <h2 class="text-2xl font-semibold text-gray-900">About this location</h2>
         <p class="mt-4 text-gray-600"><%= @location.description %></p>
       </div>
+
+      <%= render "map" %>
     </div>
 
     <div class="col-span-4">
       <div class="sticky top-8 bg-white rounded-xl border border-gray-200 p-6 shadow-sm">
-        <h3 class="text-lg font-semibold text-gray-900 mb-4">Location Details</h3>
-        </div>
+        <section class="space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900 mb-4">Location Details</h3>
+
+          <div class="flex flex-row items-center space-x-2">
+            <div class="w-5">
+              <%= inline_svg_tag "icons/address.svg", class: "w-5 h-5 text-zinc-900" %>
+            </div>
+            <p class="text-zinc-600 text-sm"><%= @location.address %></p>
+          </div>
+          <div class="flex flex-row items-center space-x-2">
+            <div class="w-5">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
+              </svg>
+            </div>
+            <p class="text-zinc-600 text-sm"><%= @location.phone_number %></p>
+          </div>
+
+          <div class="flex flex-row items-center space-x-2">
+            <div class="w-5"><div class="w-4 h-4 rounded-full bg-emerald-400"></div></div>
+            <p class="text-zinc-600 text-sm">Currently open</p>
+          </div>
+        </section>
+
       </div>
     </div>
   </div>