tethys.backend/resources/js/Pages/Errors/ServerError.vue

<template>
    <div class="min-h-screen flex items-center justify-center bg-gray-100">
        <div class="max-w-md w-full p-6 bg-white rounded-md shadow-md">
            <h1 class="text-2xl font-bold text-red-500 mb-4">Error!</h1>
            <p class="text-gray-700 mb-4">{{ error }}</p>

            <SectionTitleLineWithButton :icon="mdiLightbulbAlert" :title="code.toString()" :main="true">
                <BaseButton @click.prevent="handleAction" :icon="mdiArrowLeftBoldOutline" label="Dashboard"
                    color="white" rounded-full small />
            </SectionTitleLineWithButton>
        </div>
    </div>
</template>


<script lang="ts">
import { Component, Vue, Prop } from 'vue-facing-decorator';
import { Link, router } from '@inertiajs/vue3';
import SectionTitleLineWithButton from '@/Components/SectionTitleLineWithButton.vue';
import BaseButton from '@/Components/BaseButton.vue';
import { mdiLightbulbAlert, mdiArrowLeftBoldOutline } from '@mdi/js';
import { stardust } from '@eidellev/adonis-stardust/client';

@Component({
    // options: {
    //     layout: DefaultLayout,
    // },
    name: 'AppComponent',

    components: {
        Link,
        BaseButton,
        SectionTitleLineWithButton,
    },
})
export default class AppComponent extends Vue {
    // Component Property
    @Prop({
        type: String,
        default: () => '',
    })
    error: string;

    @Prop({
        type: Number,
        default: () => '',
    })
    code: number;

    // class properties
    mdiLightbulbAlert = mdiLightbulbAlert;
    mdiArrowLeftBoldOutline = mdiArrowLeftBoldOutline;

    public async handleAction() {
        // Add your logic here for handling the button action (e.g., logout or go back)
        await router.get(stardust.route('dashboard'));
    }

}
</script>