48 lines
2.1 KiB
JavaScript
48 lines
2.1 KiB
JavaScript
import { createApp, h } from 'vue';
|
|
import '../../resources/css/app.css';
|
|
import AppearanceTabs from '../../resources/js/components/AppearanceTabs.vue';
|
|
import AlertError from '../../resources/js/components/AlertError.vue';
|
|
import { Button } from '../../resources/js/components/ui/button';
|
|
import { createAppearance } from '../../resources/js/composables/useAppearance';
|
|
import { createLocalization } from '../../resources/js/lib/localization';
|
|
|
|
const localization = createLocalization();
|
|
createApp({
|
|
render: () =>
|
|
h('main', { class: 'mx-auto grid max-w-xl gap-column p-page' }, [
|
|
h('h1', { class: 'text-headline' }, 'Emerald design system'),
|
|
h(AppearanceTabs),
|
|
h(
|
|
'section',
|
|
{
|
|
class: 'grid gap-column rounded-md border bg-card p-card text-card-foreground',
|
|
},
|
|
[
|
|
h('h2', { class: 'text-title' }, 'Readable surfaces'),
|
|
h(
|
|
'p',
|
|
{ class: 'text-muted-foreground' },
|
|
'Inter, emerald actions and a visible keyboard focus.',
|
|
),
|
|
h('label', { for: 'sample-input' }, 'Sample input'),
|
|
h('input', {
|
|
id: 'sample-input',
|
|
class: 'min-h-control rounded-md border border-input bg-background px-3',
|
|
placeholder: 'Type here',
|
|
}),
|
|
h('div', { class: 'flex flex-wrap gap-stack' }, [
|
|
h(Button, {}, () => localization.t('common.save')),
|
|
h(Button, { variant: 'secondary' }, () =>
|
|
localization.t('common.cancel'),
|
|
),
|
|
h(Button, { variant: 'destructive' }, () => 'Delete'),
|
|
]),
|
|
h(AlertError, { errors: ['A readable validation error.'] }),
|
|
],
|
|
),
|
|
]),
|
|
})
|
|
.use(localization)
|
|
.use(createAppearance())
|
|
.mount('#app');
|