Skip to content
Snippets Groups Projects
Commit f913a42d authored by fernaldyl's avatar fernaldyl
Browse files

feat: facility styling

parent 47b8ba18
Branches schedule
Tags
1 merge request!2Schedule
......@@ -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>
......
......@@ -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>
......
......@@ -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"
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment