inertia_rails 3.4.0 → 3.5.0

data/lib/generators/inertia_templates/scaffold/templates/react/Form.tsx.tt

@@ -0,0 +1,130 @@
+import { useForm <%= ', InertiaFormProps ' if inertia_js_version.release == Gem::Version.new('1.3.0') %>} from '@inertiajs/react'
+import { FormEvent } from 'react'
+import { <%= inertia_model_form_type %>, <%= inertia_model_type %> } from './types'
+<% if inertia_js_version.release != Gem::Version.new('1.3.0') %>
+// Temporary fix for InertiaFormProps not being exported from @inertiajs/react
+type InertiaFormProps<TForm extends Record<string, any>> = ReturnType<typeof useForm<TForm>>
+<% end %>
+interface FormProps {
+  <%= singular_table_name %>: <%= inertia_model_type %>
+  onSubmit: (form: InertiaFormProps<<%= inertia_model_form_type %>>) => void
+  submitText: string
+}
+
+export default function Form({ <%= singular_table_name %>, onSubmit, submitText }: FormProps) {
+  const form = useForm<<%= inertia_model_form_type %>>({
+<% attributes.reject { |a| a.attachment? || a.attachments? }.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    password: '',
+    password_confirmation: '',
+<% else -%>
+    <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %>,
+<% end -%>
+<% end -%>
+  })
+  const { data, setData, errors, processing } = form
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    onSubmit(form)
+  }
+
+  return (
+    <form onSubmit={handleSubmit}>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+      <div>
+        <label style={{ display: 'block' }} htmlFor="password">
+          Password
+        </label>
+        <input
+          type="password"
+          name="password"
+          id="password"
+          onChange={(e) => setData('password', e.target.value)}
+        />
+        {errors.password && (
+          <div style={{ color: 'red' }}>{errors.password}</div>
+        )}
+      </div>
+
+      <div>
+        <label style={{ display: 'block' }} htmlFor="password_confirmation">
+          Password confirmation
+        </label>
+        <input
+          type="password"
+          name="password_confirmation"
+          id="password_confirmation"
+          onChange={(e) => setData('password_confirmation', e.target.value)}
+        />
+        {errors.password_confirmation && (
+          <div style={{ color: 'red' }}>{errors.password_confirmation}</div>
+        )}
+      </div>
+<% else -%>
+      <div>
+        <label style={{ display: 'block' }} htmlFor="<%= attribute.singular_name %>">
+          <%= attribute.human_name %>
+        </label>
+<% if input_type(attribute) == "text_area" -%>
+        <textarea
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          value={data.<%= attribute.column_name %>}
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
+        />
+<% elsif attribute.attachment? -%>
+        <input
+          type="file"
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          onChange={(e) => setData('<%= attribute.column_name %>', (e.target.files || [])[0])}
+        />
+<% elsif attribute.attachments? -%>
+        <input
+          type="file"
+          multiple
+          name="<%= attribute.singular_name %>[]"
+          id="<%= attribute.singular_name %>"
+          onChange={(e) => setData('<%= attribute.column_name %>', Array.from(e.target.files || []))}
+        />
+<% elsif input_type(attribute) == "checkbox" -%>
+        <input
+          type="<%= input_type(attribute) %>"
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          checked={data.<%= attribute.column_name %>}
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.checked)}
+        />
+<% elsif input_type(attribute) == "number" -%>
+        <input
+          type="<%= input_type(attribute) %>"
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          value={data.<%= attribute.column_name %>}
+          onChange={(e) => setData('<%= attribute.column_name %>', parseInt(e.target.value))}
+        />
+<% else -%>
+        <input
+          type="<%= input_type(attribute) %>"
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          value={data.<%= attribute.column_name %>}
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
+        />
+<% end -%>
+        {errors.<%= attribute.column_name %> && (
+          <div style={{ color: 'red' }}>{errors.<%= attribute.column_name %>}</div>
+        )}
+      </div>
+<% end -%>
+<% end -%>
+      <div>
+        <button type="submit" disabled={processing}>
+          {submitText}
+        </button>
+      </div>
+    </form>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/Index.jsx.tt

@@ -0,0 +1,26 @@
+import { Head, Link } from '@inertiajs/react'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+
+export default function Index({ <%= plural_table_name %>, flash }) {
+  return (
+    <>
+      <Head title="<%= human_name.pluralize %>" />
+
+      {flash.notice && <p style={{ color: 'green' }}>{flash.notice}</p>}
+
+      <h1><%= human_name.pluralize %></h1>
+      <div>
+        {<%= plural_table_name %>.map((<%= singular_table_name %>) => (
+          <div key={<%= singular_table_name %>.id}>
+            <<%= inertia_component_name %> <%= singular_table_name %>={<%= singular_table_name %>} />
+            <p>
+              <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <Link href="<%= js_new_resource_path %>">New <%= human_name.downcase %></Link>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/Index.tsx.tt

@@ -0,0 +1,32 @@
+import { Head, Link } from '@inertiajs/react'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import { <%= inertia_model_type %> } from './types'
+
+interface IndexProps {
+  <%= plural_table_name %>: <%= inertia_model_type %>[]
+  flash: { notice?: string }
+}
+
+export default function Index({ <%= plural_table_name %>, flash }: IndexProps) {
+  return (
+    <>
+      <Head title="<%= human_name.pluralize %>" />
+
+      {flash.notice && <p style={{ color: 'green' }}>{flash.notice}</p>}
+
+      <h1><%= human_name.pluralize %></h1>
+      <div>
+        {<%= plural_table_name %>.map((<%= singular_table_name %>) => (
+          <div key={<%= singular_table_name %>.id}>
+            <<%= inertia_component_name %> <%= singular_table_name %>={<%= singular_table_name %>} />
+            <p>
+              <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link>
+            </p>
+          </div>
+        ))}
+      </div>
+
+      <Link href="<%= js_new_resource_path %>">New <%= human_name.downcase %></Link>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/New.jsx.tt

@@ -0,0 +1,27 @@
+import { Head, Link } from '@inertiajs/react'
+import Form from './Form'
+
+export default function New({ <%= singular_table_name %> }) {
+  return (
+    <>
+      <Head title="New <%= human_name.downcase %>" />
+
+      <h1>New <%= human_name.downcase %></h1>
+
+      <Form
+        <%= singular_table_name %>={<%= singular_table_name %>}
+        onSubmit={(form) => {
+          form.transform((data) => ({ <%= singular_table_name %>: data }))
+          form.post('<%= js_resources_path %>')
+        }}
+        submitText="Create <%= human_name %>"
+      />
+
+      <br />
+
+      <div>
+        <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/New.tsx.tt

@@ -0,0 +1,32 @@
+import { Head, Link } from '@inertiajs/react'
+import Form from './Form'
+import { <%= inertia_model_type %> } from './types'
+
+interface NewProps {
+  <%= singular_table_name %>: <%= inertia_model_type %>
+}
+
+export default function New({ <%= singular_table_name %> }: NewProps) {
+  return (
+    <>
+      <Head title="New <%= human_name.downcase %>" />
+
+      <h1>New <%= human_name.downcase %></h1>
+
+      <Form
+        <%= singular_table_name %>={<%= singular_table_name %>}
+        onSubmit={(form) => {
+          form.transform((data) => ({ <%= singular_table_name %>: data }))
+          form.post('<%= js_resources_path %>')
+        }}
+        submitText="Create <%= human_name %>"
+      />
+
+      <br />
+
+      <div>
+        <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/One.jsx.tt

@@ -0,0 +1,26 @@
+export default function <%= inertia_component_name %>({ <%= singular_table_name %> }) {
+  return (
+    <div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+      <p>
+        <strong><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+        {<%= singular_table_name %>.<%= attribute.column_name %> && (
+          <a href={<%= singular_table_name %>.<%= attribute.column_name %>.url}>{<%= singular_table_name %>.<%= attribute.column_name %>.filename}</a>
+        )}
+      </p>
+<% elsif attribute.attachments? -%>
+      </p>
+      {<%= singular_table_name %>.<%= attribute.column_name %>.map((file, i) => (
+        <div key={i}>
+          <a href={file.url}>{file.filename}</a>
+        </div>
+      ))}
+<% else -%>
+        {<%= singular_table_name %>.<%= attribute.column_name %>?.toString()}
+      </p>
+<% end -%>
+<% end -%>
+    </div>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/One.tsx.tt

@@ -0,0 +1,32 @@
+import { <%= inertia_model_type %> } from './types'
+
+interface <%= inertia_component_name %>Props {
+  <%= singular_table_name %>: <%= inertia_model_type %>
+}
+
+export default function <%= inertia_component_name %>({ <%= singular_table_name %> }: <%= inertia_component_name %>Props) {
+  return (
+    <div>
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+      <p>
+        <strong><%= attribute.human_name %>:</strong>
+<% if attribute.attachment? -%>
+        {<%= singular_table_name %>.<%= attribute.column_name %> && (
+          <a href={<%= singular_table_name %>.<%= attribute.column_name %>.url}>{<%= singular_table_name %>.<%= attribute.column_name %>.filename}</a>
+        )}
+      </p>
+<% elsif attribute.attachments? -%>
+      </p>
+      {<%= singular_table_name %>.<%= attribute.column_name %>.map((file, i) => (
+        <div key={i}>
+          <a href={file.url}>{file.filename}</a>
+        </div>
+      ))}
+<% else -%>
+        {<%= singular_table_name %>.<%= attribute.column_name %>?.toString()}
+      </p>
+<% end -%>
+<% end -%>
+    </div>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/Show.jsx.tt

@@ -0,0 +1,32 @@
+import { Head, Link } from '@inertiajs/react'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+
+export default function Show({ <%= singular_table_name %>, flash }) {
+  return (
+    <>
+      <Head title={`<%= human_name %> #${<%= singular_table_name %>.id}`} />
+
+      {flash.notice && <p style={{ color: 'green' }}>{flash.notice}</p>}
+
+      <h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+
+      <<%= inertia_component_name %> <%= singular_table_name %>={<%= singular_table_name %>} />
+
+      <div>
+        <Link href={`<%= js_edit_resource_path %>`}>Edit this <%= human_name.downcase %></Link>
+        {' | '}
+        <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+
+        <br />
+
+        <Link
+          href={`<%= js_resource_path %>`}
+          as="button"
+          method="delete"
+        >
+          Destroy this <%= human_name.downcase %>
+        </Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/Show.tsx.tt

@@ -0,0 +1,38 @@
+import { Head, Link } from '@inertiajs/react'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import { <%= inertia_model_type %> } from './types'
+
+interface ShowProps {
+  <%= singular_table_name %>: <%= inertia_model_type %>
+  flash: { notice?: string }
+}
+
+export default function Show({ <%= singular_table_name %>, flash }: ShowProps) {
+  return (
+    <>
+      <Head title={`<%= human_name %> #${<%= singular_table_name %>.id}`} />
+
+      {flash.notice && <p style={{ color: 'green' }}>{flash.notice}</p>}
+
+      <h1><%= human_name %> #{<%= singular_table_name %>.id}</h1>
+
+      <<%= inertia_component_name %> <%= singular_table_name %>={<%= singular_table_name %>} />
+
+      <div>
+        <Link href={`<%= js_edit_resource_path %>`}>Edit this <%= human_name.downcase %></Link>
+        {' | '}
+        <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+
+        <br />
+
+        <Link
+          href={`<%= js_resource_path %>`}
+          as="button"
+          method="delete"
+        >
+          Destroy this <%= human_name.downcase %>
+        </Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_templates/scaffold/templates/react/types.ts.tt

@@ -0,0 +1,19 @@
+export interface <%= inertia_model_type %> {
+  id: number
+<% attributes.reject(&:password_digest?).each do |attribute| -%>
+  <%= attribute.column_name %>: <%= ts_type(attribute) %>
+<% end -%>
+}
+
+export type <%= inertia_model_form_type %> = Omit<<%= inertia_model_type %>, <%= omit_input_attributes.map { |a| "'#{a}'" }.join(' | ') %>><% if custom_form_attributes.any? -%> & {
+<% custom_form_attributes.map do |attribute| -%>
+<% if attribute.password_digest? -%>
+  password: string
+  password_confirmation: string
+<% elsif attribute.attachment? -%>
+  <%= attribute.column_name %>?: File
+<% elsif attribute.attachments? -%>
+  <%= attribute.column_name %>?: File[]
+<% end -%>
+<% end -%>
+}<% end %>

data/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.svelte.tt

@@ -0,0 +1,36 @@
+<script>
+  import { Link } from '@inertiajs/svelte'
+  import Form from './Form.svelte'
+
+  let { <%= singular_table_name %> } = $props()
+
+  const handleSubmit = ({ form }) => {
+    form.transform((data) => ({ <%= singular_table_name %>: data }))
+<% if attributes.any?(&:attachments?) -%>
+    form.post(`<%= js_resource_path %>`, {
+      headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
+    })
+<% else -%>
+    form.patch(`<%= js_resource_path %>`)
+<% end -%>
+  }
+</script>
+
+<svelte:head>
+  <title>Editing <%= human_name.downcase %></title>
+</svelte:head>
+
+<h1>Editing <%= human_name.downcase %></h1>
+
+<Form
+  {<%= singular_table_name %>}
+  submitText="Update <%= human_name %>"
+  onSubmit={handleSubmit}
+/>
+
+<br />
+
+<div>
+  <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link> |
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+</div>

data/lib/generators/inertia_templates/scaffold/templates/svelte/Edit.ts.svelte.tt

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import { Link, type InertiaFormProps } from '@inertiajs/svelte'
+  import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
+  import Form from './Form.svelte'
+
+  let { <%= singular_table_name %> } = $props<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
+
+  const handleSubmit = ({ form }: { form: InertiaFormProps<<%= inertia_model_form_type %>> }) => {
+    form.transform((data) => ({ <%= singular_table_name %>: data }))
+<% if attributes.any?(&:attachments?) -%>
+    form.post(`<%= js_resource_path %>`, {
+      headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
+    })
+<% else -%>
+    form.patch(`<%= js_resource_path %>`)
+<% end -%>
+  }
+</script>
+
+<svelte:head>
+  <title>Editing <%= human_name.downcase %></title>
+</svelte:head>
+
+<h1>Editing <%= human_name.downcase %></h1>
+
+<Form
+  {<%= singular_table_name %>}
+  submitText="Update <%= human_name %>"
+  onSubmit={handleSubmit}
+/>
+
+<br />
+
+<div>
+  <Link href={`<%= js_resource_path %>`}>Show this <%= human_name.downcase %></Link> |
+  <Link href="<%= js_resources_path %>">Back to <%= human_name.pluralize.downcase %></Link>
+</div>

data/lib/generators/inertia_templates/scaffold/templates/svelte/Form.svelte.tt

@@ -0,0 +1,97 @@
+<script>
+  import { useForm } from '@inertiajs/svelte'
+
+  let { <%= singular_table_name %>, submitText, onSubmit } = $props()
+
+  const form = useForm({
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    password: '',
+    password_confirmation: '',
+<% else -%>
+    <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
+<% end -%>
+<% end -%>
+  })
+
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit({ form: $form })
+  }
+</script>
+
+<form onsubmit={handleSubmit}>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+  <div>
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      bind:value={$form.password}
+    />
+    {#if $form.errors.password}
+      <div class="error">{$form.errors.password.join(', ')}</div>
+    {/if}
+  </div>
+
+  <div>
+    <label for="password_confirmation">Password confirmation</label>
+    <input
+      type="password"
+      name="password_confirmation"
+      id="password_confirmation"
+      bind:value={$form.password_confirmation}
+    />
+    {#if $form.errors.password_confirmation}
+      <div class="error">{$form.errors.password_confirmation.join(', ')}</div>
+    {/if}
+  </div>
+<% else -%>
+  <div>
+    <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>}></textarea>
+<% elsif attribute.attachment? -%>
+    <input
+      type="file"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      oninput={(e) => ($form.<%= attribute.column_name %> = e.target.files[0])}
+    />
+<% elsif attribute.attachments? -%>
+    <input
+      type="file"
+      multiple
+      name="<%= attribute.singular_name %>[]"
+      id="<%= attribute.singular_name %>"
+      oninput={(e) => ($form.<%= attribute.column_name %> = Array.from(e.target.files))}
+    />
+<% else -%>
+    <input
+      type="<%= input_type(attribute) %>"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      <%= input_type(attribute) == "checkbox" ? "bind:checked" : "bind:value" %>={$form.<%= attribute.column_name %>}
+    />
+<% end -%>
+    {#if $form.errors.<%= attribute.column_name %>}
+      <div class="error">{$form.errors.<%= attribute.column_name %>.join(', ')}</div>
+    {/if}
+  </div>
+<% end -%>
+<% end -%>
+  <div>
+    <button type="submit" disabled={$form.processing}>{submitText}</button>
+  </div>
+</form>
+
+<style>
+  label {
+    display: block;
+  }
+  .error {
+    color: red;
+  }
+</style>

data/lib/generators/inertia_templates/scaffold/templates/svelte/Form.ts.svelte.tt

@@ -0,0 +1,102 @@
+<script lang="ts">
+  import { useForm, type InertiaFormProps } from '@inertiajs/svelte'
+  import type { <%= inertia_model_type %>, <%= inertia_model_form_type %> } from './types'
+
+  let { <%= singular_table_name %>, submitText, onSubmit } = $props<{
+    <%= singular_table_name %>: <%= inertia_model_type %>
+    onSubmit: (props: { form: InertiaFormProps<<%= inertia_model_form_type %>> }) => void
+    submitText: string
+  }>()
+
+  const form = useForm<<%= inertia_model_form_type %>>({
+<% attributes.reject { |a| a.attachment? || a.attachments? }.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    password: '',
+    password_confirmation: '',
+<% else -%>
+    <%= attribute.column_name %>: <%= singular_table_name %>.<%= attribute.column_name %> || <%= default_value(attribute) %>,
+<% end -%>
+<% end -%>
+  })
+
+  const handleSubmit = (e: SubmitEvent) => {
+    e.preventDefault()
+    onSubmit({ form: $form })
+  }
+</script>
+
+<form onsubmit={handleSubmit}>
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+  <div>
+    <label for="password">Password</label>
+    <input
+      type="password"
+      name="password"
+      id="password"
+      bind:value={$form.password}
+    />
+    {#if $form.errors.password}
+      <div class="error">{$form.errors.password}</div>
+    {/if}
+  </div>
+
+  <div>
+    <label for="password_confirmation">Password confirmation</label>
+    <input
+      type="password"
+      name="password_confirmation"
+      id="password_confirmation"
+      bind:value={$form.password_confirmation}
+    />
+    {#if $form.errors.password_confirmation}
+      <div class="error">{$form.errors.password_confirmation}</div>
+    {/if}
+  </div>
+<% else -%>
+  <div>
+    <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+    <textarea name="<%= attribute.singular_name %>" id="<%= attribute.singular_name %>" bind:value={$form.<%= attribute.column_name %>}></textarea>
+<% elsif attribute.attachment? -%>
+    <input
+      type="file"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      oninput={(e) => ($form.<%= attribute.column_name %> = ((e.target as HTMLInputElement).files || [])[0])}
+    />
+<% elsif attribute.attachments? -%>
+    <input
+      type="file"
+      multiple
+      name="<%= attribute.singular_name %>[]"
+      id="<%= attribute.singular_name %>"
+      oninput={(e) => ($form.<%= attribute.column_name %> = Array.from((e.target as HTMLInputElement).files || []))}
+    />
+<% else -%>
+    <input
+      type="<%= input_type(attribute) %>"
+      name="<%= attribute.singular_name %>"
+      id="<%= attribute.singular_name %>"
+      <%= input_type(attribute) == "checkbox" ? "bind:checked" : "bind:value" %>={$form.<%= attribute.column_name %>}
+    />
+<% end -%>
+    {#if $form.errors.<%= attribute.column_name %>}
+      <div class="error">{$form.errors.<%= attribute.column_name %>}</div>
+    {/if}
+  </div>
+<% end -%>
+<% end -%>
+  <div>
+    <button type="submit" disabled={$form.processing}>{submitText}</button>
+  </div>
+</form>
+
+<style>
+  label {
+    display: block;
+  }
+  .error {
+    color: red;
+  }
+</style>