50 lines
1.6 KiB
Vue
50 lines
1.6 KiB
Vue
<template>
|
|
<mainLayout>
|
|
<div class="p-6">
|
|
<p class="font-serif italic text-[25px] text-D">BRANKAS</p>
|
|
<div class="mb-4">
|
|
<ul class="flex flex-wrap text-center" role="tablist">
|
|
<li v-for="tab in tabs" class="mr-2" role="presentation">
|
|
<button :class="[
|
|
'inline-block p-2 border-b-2 rounded-t-lg',
|
|
activeTab === tab.id
|
|
? 'border-D text-D'
|
|
: 'border-transparent text-D hover:text-D/50 hover:border-D',
|
|
]" @click="activeTab = tab.id" type="button" role="tab" aria-controls="ringkasan-content"
|
|
:aria-selected="activeTab === tab.id">
|
|
{{ tab.name }}
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex justify-end">
|
|
<div class="w-full md:w-64 my-3 mb-9">
|
|
<searchbar v-model:search="searchQuery"/>
|
|
</div>
|
|
</div>
|
|
<template v-if="activeTab == 'tabel'">
|
|
<BrankasTabel :search="searchQuery" />
|
|
</template>
|
|
<template v-if="activeTab == 'card'">
|
|
<BrankasList :search="searchQuery" />
|
|
</template>
|
|
</div>
|
|
</mainLayout>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue';
|
|
import mainLayout from '../layouts/mainLayout.vue'
|
|
import searchbar from '../components/Searchbar.vue';
|
|
import BrankasList from '../components/BrankasList.vue';
|
|
import BrankasTabel from '../components/BrankasTabel.vue';
|
|
const searchQuery = ref("");
|
|
|
|
const activeTab = ref('tabel');
|
|
|
|
const tabs = [
|
|
{ name: 'Tabel', id: 'tabel' },
|
|
{ name: 'Kartu', id: 'card' },
|
|
];
|
|
</script>
|