paulnicoue/components/AppError.vue

<template>

    <main>
        <section class="error">
            <Transition name="fade-in-from-bottom">
                <h1 class="error__title" v-show="isVisible">{{ errorMessage }}</h1>
            </Transition>
            <Transition name="expand-width">
                <div class="error__separator" aria-hidden="true" v-show="isVisible"></div>
            </Transition>
            <Transition name="fade-in-from-top">
                <div class="error__emoticon" aria-hidden="true" v-show="isVisible">¯\(°_o)/¯</div>
            </Transition>
            <button class="error__button" @click="$emit('handleError')">
                <span class="error__button-text">Retourner à la page d'accueil</span>
                <svg class="error__button-icon" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">
                    <path d="M 2 8.7 L 12 1 L 22 8.7 L 22 20.8 C 22 22.016 21.006 23 19.778 23 L 4.222 23 C 2.995 23 2 22.016 2 20.8 L 2 8.7 Z"/>
                    <polyline points="8.667 23 8.667 12 15.333 12 15.333 23"/>
                </svg>
            </button>
        </section>
    </main>

</template>

<script setup>

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    defineProps({
        errorMessage: String
    });

    const isVisible = ref(false);

    // --------------------------------------------------
    // PROGRAM
    // --------------------------------------------------

    onMounted(() => {
        isVisible.value = true;
    })

    // --------------------------------------------------
    // FORWARDING
    // --------------------------------------------------

    defineEmits([
        'handleError'
    ]);

</script>

<style lang="scss" scoped>

    // --------------------------------------------------
    // STYLE
    // --------------------------------------------------

    main {
        width: 100%;
        padding: 0 2rem;
    }

    .error {
        width: 100%;
        display: grid;
        grid:
            'title' minmax(var(--h1-font-height), auto)
            'separator' 1px
            'emoticon' minmax(var(--h1-font-height), auto)
            '.' 5rem
            'button' auto
            / minmax(30%, auto);
        place-content: center;
        place-items: center;
        gap: 0.5rem;
        text-align: center;

        &__title {
            grid-area: title;
            margin: 0 2rem;
        }

        &__separator {
            grid-area: separator;
            width: 100%;
            height: 1px;
            background-color: var(--accent-color);
        }

        &__emoticon {
            grid-area: emoticon;
            margin: 0 2rem;
            font-family: var(--title-font-family);
            font-size: var(--h1-font-size);
            font-weight: var(--medium-font-weight);
        }

        &__button {
            grid-area: button;
            margin: 0 2rem;

            &-icon {
                display: none;
            }
        }
        
        @media screen and (min-width: $tablet-media-query) {

            &__button {
                @include button-with-icon;
            }
        }
    }
    
    // Transition components

    .fade-in-from-bottom {

        &-enter-from,
        &-leave-to {
            opacity: 0;
            transform: translateY(0.25rem);
        }

        &-enter-active,
        &-leave-active {
            transition:
                opacity 400ms ease-in-out 600ms,
                transform 400ms ease-in-out 600ms;
        }
    }

    .fade-in-from-top {

        &-enter-from,
        &-leave-to {
            opacity: 0;
            transform: translateY(-0.25rem);
        }

        &-enter-active,
        &-leave-active {
            transition:
                opacity 400ms ease-in-out 600ms,
                transform 400ms ease-in-out 600ms;
        }
    }

    .expand-width {

        &-enter-from,
        &-leave-to {
            width: 0;
        }

        &-enter-active,
        &-leave-active {
            transition: width 400ms ease-in-out 200ms;
        }
    }

</style>