56 lines
2.1 KiB
Vue
56 lines
2.1 KiB
Vue
<script setup lang="ts">
|
|
import type { NuxtError } from '#app'
|
|
import { computed } from 'vue'
|
|
|
|
import BrandLogo from './components/BrandLogo.vue'
|
|
|
|
const props = defineProps<{
|
|
error: NuxtError
|
|
}>()
|
|
|
|
const isNotFound = computed(() => props.error.statusCode === 404)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-dvh">
|
|
<header class="border-border bg-surface h-14 border-b shadow-[0_1px_2px_rgba(0,0,0,.03)]">
|
|
<div class="mx-auto flex h-full w-full max-w-[1120px] items-center px-4 sm:px-6 lg:px-8">
|
|
<BrandLogo />
|
|
</div>
|
|
</header>
|
|
|
|
<main class="mx-auto flex w-full max-w-[760px] items-center px-4 py-12 sm:min-h-[calc(100dvh-3.5rem)] sm:px-6 sm:py-16">
|
|
<section
|
|
class="card border-border bg-surface w-full border p-6 sm:p-8"
|
|
aria-labelledby="error-title"
|
|
>
|
|
<div class="bg-accent text-brand mb-5 grid size-12 place-items-center rounded-lg" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" class="size-6" fill="none" stroke="currentColor" stroke-width="1.8">
|
|
<path d="M12 8v5m0 3.5v.01" stroke-linecap="round" />
|
|
<circle cx="12" cy="12" r="9" />
|
|
</svg>
|
|
</div>
|
|
|
|
<p class="text-brand mb-2 text-sm font-bold">خطای {{ error.statusCode }}</p>
|
|
<h1 id="error-title" class="text-foreground text-2xl leading-[1.5] font-extrabold sm:text-3xl">
|
|
{{ isNotFound ? 'صفحه پیدا نشد' : 'خطایی رخ داده است' }}
|
|
</h1>
|
|
<p class="text-muted mt-3 max-w-[560px] text-sm leading-8 sm:text-[15px]">
|
|
{{
|
|
isNotFound
|
|
? 'نشانی واردشده معتبر نیست یا صفحه موردنظر جابهجا شده است.'
|
|
: 'در نمایش این صفحه مشکلی پیش آمد. لطفاً دوباره تلاش کنید.'
|
|
}}
|
|
</p>
|
|
|
|
<a
|
|
href="/"
|
|
class="bg-brand hover:bg-brand-hover text-on-brand mt-6 inline-flex min-h-11 items-center justify-center rounded-lg px-5 text-sm font-bold transition-colors"
|
|
>
|
|
بازگشت به صفحه اصلی
|
|
</a>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
</template>
|