112 lines
2.3 KiB
Vue
112 lines
2.3 KiB
Vue
<template>
|
|
<section
|
|
class="min-h-screen px-8 py-20 dark:text-white bg-woot-25 dark:bg-slate-900"
|
|
>
|
|
<div class="relative max-w-lg mx-auto">
|
|
<div
|
|
id="steps"
|
|
class="rounded-md w-48 -left-52 dark:shadow-[#000] p-1 border shadow-sm border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900 absolute grid gap-1"
|
|
>
|
|
<h6
|
|
class="px-2 pt-1 font-bold tracking-widest uppercase text-xxs text-slate-500"
|
|
>
|
|
Get Started
|
|
</h6>
|
|
<modal-step
|
|
v-for="(step, index) in steps"
|
|
:key="step.name"
|
|
v-bind="step"
|
|
:step-number="index + 1"
|
|
/>
|
|
</div>
|
|
<div
|
|
id="modal-body"
|
|
class="dark:shadow-[#000] rounded-md mx-auto p-9 border shadow border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-900"
|
|
>
|
|
<h2 class="text-lg font-bold tracking-tight">
|
|
<slot name="title">
|
|
{{ title }}
|
|
</slot>
|
|
</h2>
|
|
<slot name="body">
|
|
<p class="mt-2 text-sm dark:text-slate-200">
|
|
{{ body }}
|
|
</p>
|
|
</slot>
|
|
<div class="mt-8">
|
|
<slot />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script>
|
|
import ModalStep from './ModalStep.vue';
|
|
|
|
const UISteps = [
|
|
{
|
|
name: 'profile',
|
|
title: 'Setup Profile',
|
|
isActive: false,
|
|
isComplete: false,
|
|
},
|
|
{
|
|
name: 'company',
|
|
title: 'Setup Company',
|
|
isActive: false,
|
|
isComplete: false,
|
|
},
|
|
{
|
|
name: 'invite',
|
|
title: 'Invite your team',
|
|
isActive: false,
|
|
isComplete: false,
|
|
},
|
|
{
|
|
name: 'founders-note',
|
|
title: "Founder's Note",
|
|
hidden: true,
|
|
isActive: false,
|
|
isComplete: false,
|
|
},
|
|
];
|
|
|
|
export default {
|
|
components: {
|
|
ModalStep,
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
body: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
currentStep: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
steps() {
|
|
let foundCurrentStep = false;
|
|
|
|
return UISteps.map(step => {
|
|
if (step.name === this.currentStep) {
|
|
foundCurrentStep = true;
|
|
}
|
|
|
|
return {
|
|
...step,
|
|
isActive: step.name === this.currentStep,
|
|
isComplete: !foundCurrentStep,
|
|
};
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|