44 lines
1.1 KiB
Text
44 lines
1.1 KiB
Text
---
|
|
import { Submit, FormGroup, FormControl } from './core';
|
|
import Field from './components/Field.astro';
|
|
import FieldSet from './components/FieldSet.astro';
|
|
|
|
export interface Props {
|
|
formGroups: FormGroup | FormGroup[];
|
|
submitControl?: Submit;
|
|
theme?: 'light' | 'dark';
|
|
}
|
|
|
|
const { submitControl, formGroups: form, theme } = Astro.props;
|
|
|
|
const formTheme = theme ?? 'light';
|
|
---
|
|
|
|
<form class={formTheme}>
|
|
{
|
|
Array.isArray(form)
|
|
? form?.map((group) => <FieldSet group={group} />)
|
|
: form?.controls.map((control) => <Field control={control} />)
|
|
}
|
|
{submitControl && <Field control={new FormControl(submitControl)} />}
|
|
</form>
|
|
|
|
<style>
|
|
.light {
|
|
/**
|
|
* run dev server with: "npm start",
|
|
* then open browser to "localhost:3000"
|
|
* add a class="light" to the <form> element above to test changes
|
|
* INSERT STYLES FOR LIGHT MODE BELOW: */
|
|
}
|
|
|
|
.dark {
|
|
/**
|
|
* run dev server with: "npm start",
|
|
* then open browser to "localhost:3000"
|
|
* add a class="dark" to the <form> element above to test changes
|
|
* INSERT STYLES FOR DARK MODE BELOW: */
|
|
background-color: #333;
|
|
color: white;
|
|
}
|
|
</style>
|