udpate: login | fetch and update layout

AirHopper · Dec 19, 2024 · 0ceefd1 · 0ceefd1
1 parent b452ee8
commit 0ceefd1
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 11 deletions.
diff --git a/public/css/app.css b/public/css/app.css
@@ -797,6 +797,10 @@ video {
   height: 100vh;
 }
 
+.h-12 {
+  height: 3rem;
+}
+
 .max-h-72 {
   max-height: 18rem;
 }
@@ -1183,6 +1187,11 @@ video {
   background-color: rgb(253 224 71 / var(--tw-bg-opacity, 1));
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity, 1));
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -1205,6 +1214,12 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
 
+.from-gray-500 {
+  --tw-gradient-from: #6b7280 var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(107 114 128 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .to-transparent {
   --tw-gradient-to: transparent var(--tw-gradient-to-position);
 }
@@ -1562,6 +1577,18 @@ video {
   opacity: 1;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
+.opacity-30 {
+  opacity: 0.3;
+}
+
+.opacity-70 {
+  opacity: 0.7;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1580,6 +1607,11 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.shadow-white {
+  --tw-shadow-color: #ffffff;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;

diff --git a/src/modules/auth/auth.controller.js b/src/modules/auth/auth.controller.js
@@ -4,7 +4,14 @@ export const loginPage = async (req, res, next) => {
   try {
     const api = process.env.API_URL;
 
-    res.edge("pages/auth/login", { api });
+    const airlineResponse = await axios.get(`${api}/api/v1/airlines/randomLogo`);
+
+    const data = {
+      api: api,
+      airline: airlineResponse.data.data,
+    };
+
+    res.edge("pages/auth/login", data);
   } catch (error) {
     next(error);
   }

diff --git a/src/resources/views/pages/auth/login.edge b/src/resources/views/pages/auth/login.edge
@@ -61,7 +61,6 @@
     </div>
   </div>
 
-  {{--  ini selalu di bawah --}}
   <div
     x-data
     x-init="
@@ -72,18 +71,18 @@
                 content.appendChild(clone);
             });
     "
-    class="absolute bottom-0 w-full bg-gray-900 container-block"
+    class="absolute bottom-0 w-full container-block"
     >
-    <div class="relative w-full py-3 mx-auto overflow-hidden text-lg italic tracking-wide text-white uppercase bg-gray-900 max-w-7xl sm:text-xs md:text-sm lg:text-base xl:text-xl 2xl:text-2xl">
-        <div class="absolute left-0 z-20 w-40 h-full bg-gradient-to-r from-gray-900 to-transparent"></div>
-        <div class="absolute right-0 z-20 w-40 h-full bg-gradient-to-l from-gray-900 to-transparent"></div>
+    <div class="relative w-full mx-auto overflow-hidden text-lg italic tracking-wide text-white uppercase bg-gray-100 opacity-70 sm:text-xs md:text-sm lg:text-base xl:text-xl 2xl:text-2xl">
+        <div class="absolute left-0 z-20 w-40 h-full bg-gradient-to-r from-gray-500 to-transparent"></div>
+        <div class="absolute right-0 z-20 w-40 h-full bg-gradient-to-l from-gray-500 to-transparent"></div>
         <div x-ref="content" class="flex animate-marquee">
             <div x-ref="item" class="flex items-center justify-around flex-shrink-0 w-full py-2 space-x-2 text-white">
-              <h1>Air Hopper 1</h1>
-              <h1>Air Hopper 2</h1>
-              <h1>Air Hopper 3</h1>
-              <h1>Air Hopper 4</h1>
-              <h1>Air Hopper 5</h1>
+              @each(data in airline)
+              <div class="flex items-center justify-center">
+                <img src="{{ data.imageUrl }}" class="h-12" alt="" srcset="">
+              </div>
+              @endeach
       </div>
         </div>
     </div>