52 lines
1.9 KiB
Vue
52 lines
1.9 KiB
Vue
<script setup lang="ts">
|
|
defineProps<{
|
|
statusCode: number
|
|
}>()
|
|
|
|
const router = useRouter()
|
|
</script>
|
|
|
|
<template>
|
|
<div class="h-svh">
|
|
<div class="m-auto flex h-full w-full flex-col items-center justify-center gap-2">
|
|
<template v-if="statusCode === 403">
|
|
<h1 class="text-[7rem] font-bold leading-tight">403</h1>
|
|
<span class="font-medium">Access Forbidden</span>
|
|
<p class="text-muted-foreground text-center">
|
|
You don't have necessary permission <br />
|
|
to access this resource.
|
|
</p>
|
|
</template>
|
|
<template v-else-if="statusCode === 404">
|
|
<h1 class="text-[7rem] font-bold leading-tight">404</h1>
|
|
<span class="font-medium">Page Not Found</span>
|
|
<p class="text-muted-foreground text-center">
|
|
The page you are looking for <br />
|
|
doesn't exist.
|
|
</p>
|
|
</template>
|
|
<template v-else-if="statusCode === 401">
|
|
<h1 class="text-[7rem] font-bold leading-tight">401</h1>
|
|
<span class="font-medium">Unauthorized Access</span>
|
|
<p class="text-muted-foreground text-center">
|
|
Please log in with the appropriate credentials <br />
|
|
to access this resource.
|
|
</p>
|
|
</template>
|
|
<template v-else>
|
|
<h1 class="text-[7rem] font-bold leading-tight">500</h1>
|
|
<span class="font-medium">Internal Server Error</span>
|
|
<p class="text-muted-foreground text-center">
|
|
Something went wrong on our end. <br />
|
|
Please try again later.
|
|
</p>
|
|
</template>
|
|
<div class="mt-6 flex gap-4">
|
|
<Button variant="outline" @click="router.back()"> Kembali </Button>
|
|
<Button v-if="statusCode === 401" @click="router.push('/auth/login')">Login</Button>
|
|
<Button v-else @click="router.push('/')">Kembali ke Dashboard</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|