feat: facility styling

frontend/src/App.vue

@@ -2,6 +2,8 @@
 // import CatalogueView from "./views/CatalogueView.vue";
 import LandingView from "./views/LandingView.vue";
 import Navbar from "./components/navbar/navbar.vue";
+import FacilityView from "./views/FacilityView.vue";
+import { FacilityViewProps } from "./views/FacilityView.vue";
 </script>
 
 <template>
@@ -9,8 +11,9 @@ import Navbar from "./components/navbar/navbar.vue";
     <Navbar />
   </div>
   <div class="app-container">
+    <!-- <LandingView /> -->
     <!-- <CatalogueView v-bind="catalogues" /> -->
-    <LandingView />
+    <FacilityView v-bind="facilities" />
   </div>
 </template>
 

frontend/src/components/facility/FacilityEntry.vue

@@ -7,21 +7,24 @@ export interface FacilityEntryProps {
   imageUrl: string;
 }
 
-defineProps<FacilityEntryProps>();
+const props = defineProps<FacilityEntryProps>();
+const formattedPrice: String = `Rp${props.price.toLocaleString("id-ID")}`;
 </script>
 
 <template>
-  <div class="max-w-sm rounded overflow-hidden shadow-lg">
-    <img class="w-full" :src="imageUrl" />
+  <div class="w-80 rounded overflow-hidden shadow-lg">
+    <img class="w-full max-h-40" :src="imageUrl" />
     <div class="px-6 py-4">
-      <div class="font-bold text-xl mb-2">{{ facilityName }}</div>
-      <h5 class="text-gray-700 text-base">{{ facilityNumber }}</h5>
-      <p class="text-gray-700 text-base">{{ address }}</p>
+      <h4 class="font-bold text-xl mb-2 break-all">
+        {{ facilityName }}
+      </h4>
+      <h5 class="text-gray-700 text-base break-all">{{ facilityNumber }}</h5>
+      <p class="text-gray-700 text-base break-all">{{ address }}</p>
     </div>
-    <div class="px-6 pt-4 pb-2">
+    <div class="px-4 pb-10">
       <span
-        class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2"
-        >{{ price }}</span
+        class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2 float-right"
+        >{{ formattedPrice }}</span
       >
     </div>
   </div>

frontend/src/views/FacilityView.vue

@@ -11,10 +11,42 @@ defineProps<FacilityViewProps>();
 </script>
 
 <template>
-  <h2 class="text-center text-xl font-semibold tracking-wide my-4">
-    {{ facilityType }}
-  </h2>
-  <div>
+  <div class="flex flex-row justify-between mx-8 mb-6 pt-4">
+    <h2 class="text-left text-3xl font-semibold tracking-wide my-4">
+      {{ facilityType }}
+    </h2>
+    <form>
+      <div class="relative w-48 h-auto">
+        <div
+          class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none"
+        >
+          <svg
+            aria-hidden="true"
+            class="w-5 h-5 text-gray-500 dark:text-gray-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+            ></path>
+          </svg>
+        </div>
+        <input
+          type="search"
+          id="default-search"
+          class="block w-full p-4 pl-10 text-sm text-gray-900 border border-gray-300 rounded-lg bg-gray-50"
+          placeholder="Cari Nama Fasilitas"
+          required
+        />
+      </div>
+    </form>
+  </div>
+  <div class="flex flex-col gap-8 place-items-center">
     <FacilityEntry
       v-for="(facility, index) in facilities"
       v-bind="facility"