87 lines
3.2 KiB
JavaScript
87 lines
3.2 KiB
JavaScript
import { createApp, h } from 'vue';
|
|
import { createInertiaApp, Head, usePage } from '@inertiajs/vue3';
|
|
import '../../resources/css/app.css';
|
|
import AppLayout from '../../resources/js/layouts/AppLayout.vue';
|
|
import { createAppearance } from '../../resources/js/composables/useAppearance';
|
|
import { createLocalization } from '../../resources/js/lib/localization';
|
|
|
|
const Preview = {
|
|
setup() {
|
|
const page = usePage();
|
|
return () => {
|
|
const title = page.url
|
|
.split('?')[0]
|
|
.split('/')
|
|
.filter(Boolean)
|
|
.at(-1);
|
|
return h(
|
|
AppLayout,
|
|
{
|
|
breadcrumbs: [
|
|
{ title: 'Projects', href: '/projects' },
|
|
...(page.props.navigation.project
|
|
? [
|
|
{
|
|
title: page.props.navigation.project.name,
|
|
href: '/projects/7',
|
|
},
|
|
]
|
|
: []),
|
|
{ title, href: page.url },
|
|
],
|
|
},
|
|
() => [
|
|
h(Head, { title }),
|
|
h('div', { class: 'grid gap-column p-page' }, [
|
|
h(
|
|
'h1',
|
|
{
|
|
class: 'text-headline',
|
|
'data-test': 'page-title',
|
|
},
|
|
title,
|
|
),
|
|
h(
|
|
'p',
|
|
{ class: 'text-muted-foreground' },
|
|
'Navigation preview with isolated test data.',
|
|
),
|
|
h(
|
|
'div',
|
|
{
|
|
class: 'grid gap-column sm:grid-cols-2 xl:grid-cols-3',
|
|
},
|
|
['To do', 'In progress', 'Done'].map((label) =>
|
|
h(
|
|
'section',
|
|
{
|
|
class: 'grid gap-stack rounded-md border bg-card p-card',
|
|
},
|
|
[
|
|
h('h2', { class: 'text-title' }, label),
|
|
h(
|
|
'p',
|
|
{},
|
|
'Plan and track the next iteration.',
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
]),
|
|
],
|
|
);
|
|
};
|
|
},
|
|
};
|
|
|
|
createInertiaApp({
|
|
resolve: () => Preview,
|
|
setup: ({ el, App, props, plugin }) =>
|
|
createApp({ render: () => h(App, props) })
|
|
.use(plugin)
|
|
.use(createLocalization())
|
|
.use(createAppearance())
|
|
.mount(el),
|
|
});
|