flavored.astro

---
import Layout from '../Layout.astro';

// -----------------------------------------------------------------------------

import type { FromSchema, JSONSchema7, UiSchema } from '@jsfe/form';

const mySchema = {
	type: 'object',
	properties: {
		foo: {
			type: 'string',
		},
		bar: {
			type: 'boolean',
		},
	},
} as const satisfies JSONSchema7;
type MyData = FromSchema<typeof mySchema>;

const uiSchema: UiSchema = {
	bar: {
		'ui:widget': 'switch',
	},
};

const dataInAstro: MyData = {
	foo: 'hello',
};

// -----------------------------------------------------------------------------

const themes = [
	//
	'shoelace',
	'material',
	'carbon',
	'wired',
	'system',
];
---

<Layout>
	<article id="astro">
		{
			themes.map((theme) => {
				const FlavoredFormTagName = `jsf-${theme}`;

				return (
					<section>
						<header>
							<h2>{theme}</h2>
							<code>{`<jsf-${theme}></jsf-${theme}>`}</code>
						</header>

						<FlavoredFormTagName
							schema={JSON.stringify(mySchema)}
							uiSchema={JSON.stringify(uiSchema)}
							data={JSON.stringify(dataInAstro)}
						/>
					</section>
				);
			})
		}
	</article>
</Layout>

<script>
	import '@jsfe/shoelace';
	import '@jsfe/material';
	import '@jsfe/carbon';
	import '@jsfe/wired';
	import '@jsfe/system';

	import '../themes/material.js';
</script>

<style is:global>
	@import '../themes/shoelace.scss';
	@import '../themes/material.scss';
	@import '../themes/carbon.scss';
	@import '../themes/wired.scss';
</style>