Make AlertMessage a component
This commit is contained in:
parent
a5d9282b77
commit
199955d907
|
@ -1,5 +1,14 @@
|
|||
<template>
|
||||
<div>
|
||||
<alert-message>
|
||||
<p>
|
||||
A clone of <a href="https://platform.sh">Platform.sh</a>’s new hosting dashboard.<br class="md:hidden">
|
||||
Built with <a href="https://vuejs.org">Vue.js</a>
|
||||
and <a href="https://tailwindcss.com">Tailwind CSS</a>
|
||||
by <a href="https://www.oliverdavies.uk">Oliver Davies</a>.
|
||||
</p>
|
||||
</alert-message>
|
||||
|
||||
<router-view/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
16
src/components/AlertMessage.vue
Normal file
16
src/components/AlertMessage.vue
Normal file
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<section class="bg-gun-powder p-3 text-center text-white text-sm font-semibold">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style type="postcss" scoped>
|
||||
a {
|
||||
@apply underline;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@apply no-underline
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -4,6 +4,7 @@ import router from './router'
|
|||
|
||||
Vue.config.productionTip = false
|
||||
|
||||
Vue.component('alert-message', require('@/components/AlertMessage').default)
|
||||
Vue.component('page-title', require('@/components/PageTitle').default)
|
||||
|
||||
new Vue({
|
||||
|
|
|
@ -1,14 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<section class="bg-gun-powder p-3 text-center text-white text-sm font-semibold">
|
||||
<p>
|
||||
A clone of <a class="underline hocus:no-underline" href="https://platform.sh">Platform.sh</a>’s new hosting dashboard.<br class="md:hidden">
|
||||
Built with <a class="underline hocus:no-underline" href="https://vuejs.org">Vue.js</a>
|
||||
and <a class="underline hocus:no-underline" href="https://tailwindcss.com">Tailwind CSS</a>
|
||||
by <a class="underline hocus:no-underline" href="https://www.oliverdavies.uk">Oliver Davies</a>.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<header class="bg-gray-900 text-white pt-4 pb-12">
|
||||
<div class="max-w-6xl mx-auto px-4">
|
||||
<div class="flex justify-between items-center -mx-4">
|
||||
|
|
Loading…
Reference in a new issue