s
<template>
  <v-app dark>
    <NavBar></NavBar>
    <v-main
      class="tw-bg-[#ffffff] tw-px-[30px] tw-mt-[60px] tw-mb-[242px] md:tw-px-[90px] md:tw-mt-[90px] md:tw-mb-[285px] xl:tw-px-[60px] xl:tw-mb-[319px]">
      <h1 v-if="error.statusCode === 404">
        <div class="xl:tw-grid xl:tw-grid-cols-2 xl:tw-items-center">
          <div class="xl:tw-ml-[60px]">
            <div class="t24 tw-text-[#ee9546] md:tw-text-[40px] md:tw-mb-[20px]">
              Ooops...
            </div>
            <div class="tw-body-1 tw-text-primary-1 tw-mb-[20px] md:tw-text-[40px]">
              Page Not Found
            </div>
            <div class="tw-body-5 tw-text-neutrals-500 tw-mb-[20px] md:tw-body-3">
              Sorry. the content you’re looking for doesn’t exist.<br />Either
              it was removed, or you mistyped the link.
            </div>
          </div>

          <img src="~/assets/svg/404_notFound.svg" class="tw-w-full xl:tw-pr-[60px]" />
        </div>
      </h1>
      <h1 v-else>
        {{ otherError }}
      </h1>
    </v-main>

    <Footer></Footer>
  </v-app>
</template>

<script>
import NavBar from "../components/NavBar.vue";
import Footer from "../components/Footer.vue";
export default {
  name: "EmptyLayout",
  layout: "empty",
  components: {
    Footer,
    NavBar,
  },
  props: {
    error: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      pageNotFound: "404 Not Found",
      otherError: "An error occurred",
    };
  },
  head() {
    const title =
      this.error.statusCode === 404 ? this.pageNotFound : this.otherError;
    return {
      title,
    };
  },
};
</script>

<style scoped>
h1 {
  font-size: 20px;
}
</style>