51 lines
2.1 KiB
Vue
51 lines
2.1 KiB
Vue
<script setup>
|
|
defineProps({
|
|
responseMessages: {
|
|
type: Object,
|
|
default: {},
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
.header {
|
|
background: linear-gradient(237.74deg,#1199a5,#436da7 83%);
|
|
}
|
|
.logo-green {
|
|
color: rgb(162, 207, 0);
|
|
}
|
|
</style>
|
|
|
|
<template>
|
|
<div>
|
|
<header class="header">
|
|
<div class="flex gap-5 items-center justify-start max-w-screen-lg mx-auto font-thasadith">
|
|
<InertiaLink href="/dashboard">
|
|
<div
|
|
class="bg-white text-gray-800 pl-10 pr-5 py-2.5 text-4xl"
|
|
>Kamil<span class="logo-green">Craft</span></div>
|
|
</InertiaLink>
|
|
<nav>
|
|
<ul class="flex gap-3 items-center font-bold">
|
|
<li><InertiaLink class="text-white active:text-kamilcraft-green hover:text-black hover:underline" href="/dashboard/cv">CV</InertiaLink></li>
|
|
<li><InertiaLink class="text-white active:text-kamilcraft-green hover:text-black hover:underline" href="/dashboard/message">Msg</InertiaLink></li>
|
|
<li><InertiaLink class="text-white active:text-kamilcraft-green hover:text-black hover:underline" href="/dashboard/note">Notes</InertiaLink></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<div v-if="responseMessages?.info" class="max-w-screen-lg mx-2 lg:mx-auto mt-2 px-2 py-3 rounded-md bg-yellow-100 text-yellow-600 text-center">
|
|
{{ responseMessages.info }}
|
|
</div>
|
|
<div v-if="responseMessages?.error" class="max-w-screen-lg mx-2 lg:mx-auto mt-2 px-2 py-3 rounded-md bg-red-100 text-red-600 text-center">
|
|
{{ responseMessages.error }}
|
|
</div>
|
|
<div v-if="responseMessages?.success" class="max-w-screen-lg mx-2 lg:mx-auto mt-2 px-2 py-3 rounded-md bg-green-100 text-green-600 text-center">
|
|
{{ responseMessages.success }}
|
|
</div>
|
|
<main class="max-w-screen-lg mx-2 lg:mx-auto mt-2 rounded-md bg-gray-50">
|
|
<slot />
|
|
</main>
|
|
</div>
|
|
</template>
|