<template>
  <main
    class="flex flex-col justify-between flex-1 px-4 overflow-y-auto bg-white md:mr-3 sm:px-3 md:px-6 rounded-t-2xl md:rounded-t-3xl no-scroll-bar"
  >
    <div v-if="route.path !== '/home'" class="mt-4 lg:mt-6 max-w-7xl">
      <h1 class="text-lg font-semibold md:text-2xl text-dark">{{ pageTitle }}</h1>
    </div>
    <div class="flex-1 mt-2 sm:mt-4 dx-viewport">
      <slot></slot>
    </div>
  </main>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute } from 'vue-router';

// Dapatkan objek route dari vue-router
const route = useRoute()

// Dapatkan nama rute menggunakan computed property
const pageTitle = computed(() => route.name)
</script>
