inertia_rails 3.12.1 → 3.13.0

data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Edit.jsx.tt → edit.jsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
+import Form from './form'
 
 export default function Edit({ <%= singular_table_name %> }) {
   return (
@@ -11,16 +11,13 @@ export default function Edit({ <%= singular_table_name %> }) {
 
         <Form
           <%= singular_table_name %>={<%= singular_table_name %>}
-          onSubmit={(form) => {
-            form.transform((data) => ({ <%= singular_table_name %>: data }))
+            action={`<%= js_resource_path %>`}
 <% if attributes.any?(&:attachments?) -%>
-            form.post(`<%= js_resource_path %>`, {
-              headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
-            })
+            method="post"
+            headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
 <% else -%>
-            form.patch(`<%= js_resource_path %>`)
+            method="patch"
 <% end -%>
-          }}
           submitText="Update <%= human_name %>"
         />
 

data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Edit.tsx.tt → edit.tsx.tt}

@@ -1,6 +1,6 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
-import { <%= inertia_model_type %> } from './types'
+import Form from './form'
+import type { <%= inertia_model_type %> } from './types'
 
 interface EditProps {
   <%= singular_table_name %>: <%= inertia_model_type %>
@@ -16,16 +16,13 @@ export default function Edit({ <%= singular_table_name %> }: EditProps) {
 
         <Form
           <%= singular_table_name %>={<%= singular_table_name %>}
-          onSubmit={(form) => {
-            form.transform((data) => ({ <%= singular_table_name %>: data }))
+            action={`<%= js_resource_path %>`}
 <% if attributes.any?(&:attachments?) -%>
-            form.post(`<%= js_resource_path %>`, {
-              headers: { 'X-HTTP-METHOD-OVERRIDE': 'put' },
-            })
+            method="post"
+            headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
 <% else -%>
-            form.patch(`<%= js_resource_path %>`)
+            method="patch"
 <% end -%>
-          }}
           submitText="Update <%= human_name %>"
         />
 

data/lib/generators/inertia_tw_templates/scaffold/templates/react/form.jsx.tt

@@ -0,0 +1,106 @@
+import { Form as InertiaForm } from '@inertiajs/react'
+
+export default function Form({ <%= singular_table_name %>, submitText, ...formProps }) {
+  return (
+    <InertiaForm
+      transform={data => ({ <%= singular_table_name %>: data })}
+      className="contents"
+      {...formProps}
+    >
+      {({ errors, processing }) => (
+        <>
+<% attributes.each do |attribute| -%>
+          <div className="my-5">
+<% if attribute.password_digest? -%>
+            <label htmlFor="password">Password</label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+            {errors.password && (
+              <div className="text-red-500 px-3 py-2 font-medium">
+                {errors.password.join(', ')}
+              </div>
+            )}
+          </div>
+
+          <div className="my-5">
+            <label htmlFor="password_confirmation">Password confirmation</label>
+            <input
+              type="password"
+              name="password_confirmation"
+              id="password_confirmation"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+            {errors.password_confirmation && (
+              <div className="text-red-500 px-3 py-2 font-medium">
+                {errors.password_confirmation.join(', ')}
+              </div>
+            )}
+<% else -%>
+            <label htmlFor="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+            <textarea
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+              rows="4"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% elsif attribute.attachment? -%>
+            <input
+              type="file"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% elsif attribute.attachments? -%>
+            <input
+              type="file"
+              multiple
+              name="<%= attribute.singular_name %>[]"
+              id="<%= attribute.singular_name %>"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% elsif input_type(attribute) == "checkbox" -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+              className="block mt-2 h-5 w-5"
+            />
+<% else -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% end -%>
+            {errors.<%= attribute.column_name %> && (
+              <div className="text-red-500 px-3 py-2 font-medium">
+                {errors.<%= attribute.column_name %>.join(', ')}
+              </div>
+            )}
+<% end -%>
+          </div>
+
+<% end -%>
+          <div className="inline">
+            <button
+              type="submit"
+              disabled={processing}
+              className="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
+            >
+              {submitText}
+            </button>
+          </div>
+        </>
+      )}
+    </InertiaForm>
+  )
+}

data/lib/generators/inertia_tw_templates/scaffold/templates/react/form.tsx.tt

@@ -0,0 +1,122 @@
+import { Form as InertiaForm } from '@inertiajs/react'
+import { type ComponentProps } from 'react'
+
+import { <%= inertia_model_type %> } from './types'
+
+type FormProps = Omit<ComponentProps<typeof InertiaForm>, 'children'> & {
+  <%= singular_table_name %>: <%= inertia_model_type %>
+  submitText: string
+}
+
+export default function Form({ <%= singular_table_name %>, submitText, ...formProps }: FormProps) {
+  return (
+    <InertiaForm
+      transform={data => ({ <%= singular_table_name %>: data })}
+      className="contents"
+      {...formProps}
+    >
+      {({ errors, processing }) => (
+        <>
+<% attributes.each do |attribute| -%>
+          <div className="my-5">
+<% if attribute.password_digest? -%>
+            <label htmlFor="password">Password</label>
+            <input
+              type="password"
+              name="password"
+              id="password"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+            {errors.password && (
+              <div className="text-red-500 px-3 py-2 font-medium">
+                {errors.password}
+              </div>
+            )}
+          </div>
+
+          <div className="my-5">
+            <label htmlFor="password_confirmation">Password confirmation</label>
+            <input
+              type="password"
+              name="password_confirmation"
+              id="password_confirmation"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+            {errors.password_confirmation && (
+              <div className="text-red-500 px-3 py-2 font-medium">
+                {errors.password_confirmation}
+              </div>
+            )}
+<% else -%>
+            <label htmlFor="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+            <textarea
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+              rows={4}
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% elsif attribute.attachment? -%>
+            <input
+              type="file"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% elsif attribute.attachments? -%>
+            <input
+              type="file"
+              multiple
+              name="<%= attribute.singular_name %>[]"
+              id="<%= attribute.singular_name %>"
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% elsif input_type(attribute) == "checkbox" -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+              className="block mt-2 h-5 w-5"
+            />
+<% elsif input_type(attribute) == "number" -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% else -%>
+            <input
+              type="<%= input_type(attribute) %>"
+              name="<%= attribute.singular_name %>"
+              id="<%= attribute.singular_name %>"
+              defaultValue={<%= singular_table_name %>.<%= attribute.column_name %>}
+              className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+            />
+<% end -%>
+            {errors.<%= attribute.column_name %> && (
+              <div className="text-red-500 px-3 py-2 font-medium">
+                {errors.<%= attribute.column_name %>}
+              </div>
+            )}
+<% end -%>
+          </div>
+
+<% end -%>
+          <div className="inline">
+            <button
+              type="submit"
+              disabled={processing}
+              className="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
+            >
+              {submitText}
+            </button>
+          </div>
+        </>
+      )}
+    </InertiaForm>
+  )
+}

data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Index.jsx.tt → index.jsx.tt}

@@ -1,6 +1,6 @@
 import { Head, Link } from '@inertiajs/react'
 import { Fragment } from 'react'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import <%= inertia_component_name %> from './<%= singular_name %>'
 
 export default function Index({ <%= plural_table_name %>, flash }) {
   return (

data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Index.tsx.tt → index.tsx.tt}

@@ -1,6 +1,6 @@
 import { Head, Link } from '@inertiajs/react'
 import { Fragment } from 'react'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import <%= inertia_component_name %> from './<%= singular_name %>'
 import { <%= inertia_model_type %> } from './types'
 
 interface IndexProps {

data/lib/generators/inertia_tw_templates/scaffold/templates/react/{New.jsx.tt → new.jsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
+import Form from './form'
 
 export default function New({ <%= singular_table_name %> }) {
   return (
@@ -11,10 +11,8 @@ export default function New({ <%= singular_table_name %> }) {
 
         <Form
           <%= singular_table_name %>={<%= singular_table_name %>}
-          onSubmit={(form) => {
-            form.transform((data) => ({ <%= singular_table_name %>: data }))
-            form.post('<%= js_resources_path %>')
-          }}
+          method="post"
+          action="<%= js_resources_path %>"
           submitText="Create <%= human_name %>"
         />
 

data/lib/generators/inertia_tw_templates/scaffold/templates/react/{New.tsx.tt → new.tsx.tt}

@@ -1,6 +1,6 @@
 import { Head, Link } from '@inertiajs/react'
-import Form from './Form'
-import { <%= inertia_model_type %> } from './types'
+import Form from './form'
+import type { <%= inertia_model_type %> } from './types'
 
 interface NewProps {
   <%= singular_table_name %>: <%= inertia_model_type %>
@@ -16,10 +16,8 @@ export default function New({ <%= singular_table_name %> }: NewProps) {
 
         <Form
           <%= singular_table_name %>={<%= singular_table_name %>}
-          onSubmit={(form) => {
-            form.transform((data) => ({ <%= singular_table_name %>: data }))
-            form.post('<%= js_resources_path %>')
-          }}
+          method="post"
+          action="<%= js_resources_path %>"
           submitText="Create <%= human_name %>"
         />
 

data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Show.jsx.tt → show.jsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import <%= inertia_component_name %> from './<%= singular_name %>'
 
 export default function Show({ <%= singular_table_name %>, flash }) {
   return (

data/lib/generators/inertia_tw_templates/scaffold/templates/react/{Show.tsx.tt → show.tsx.tt}

@@ -1,5 +1,5 @@
 import { Head, Link } from '@inertiajs/react'
-import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+import <%= inertia_component_name %> from './<%= singular_name %>'
 import { <%= inertia_model_type %> } from './types'
 
 interface ShowProps {

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/{Edit.svelte.tt → edit.svelte.tt}

@@ -1,19 +1,9 @@
 <script>
   import { Link } from '@inertiajs/svelte'
-  import Form from './Form.svelte'
 
-  let { <%= singular_table_name %> } = $props()
+  import Form from './form.svelte'
 
-  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 -%>
-  }
+  let { <%= singular_table_name %> } = $props()
 </script>
 
 <svelte:head>
@@ -26,7 +16,13 @@
   <Form
     {<%= singular_table_name %>}
     submitText="Update <%= human_name %>"
-    onSubmit={handleSubmit}
+    action={`<%= js_resource_path %>`}
+<% if attributes.any?(&:attachments?) -%>
+    method="post"
+    headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
+<% else -%>
+    method="patch"
+<% end -%>
   />
 
   <Link

data/lib/generators/inertia_tw_templates/scaffold/templates/{svelte4/Edit.svelte.tt → svelte/edit.ts.svelte.tt}

@@ -1,20 +1,10 @@
-<script>
+<script lang="ts">
   import { Link } from '@inertiajs/svelte'
-  import Form from './Form.svelte'
 
-  export let <%= singular_table_name %>
+  import type { <%= inertia_model_type %> } from './types'
+  import Form from './form.svelte'
 
-  const handleSubmit = (e) => {
-    const { form } = e.detail
-    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 -%>
-  }
+  let { <%= singular_table_name %> } = $props<{ <%= singular_table_name %>: <%= inertia_model_type %> }>()
 </script>
 
 <svelte:head>
@@ -27,7 +17,13 @@
   <Form
     {<%= singular_table_name %>}
     submitText="Update <%= human_name %>"
-    on:submit={handleSubmit}
+    action={`<%= js_resource_path %>`}
+<% if attributes.any?(&:attachments?) -%>
+    method="post"
+    headers={{ 'X-HTTP-METHOD-OVERRIDE': 'patch' }}
+<% else -%>
+    method="patch"
+<% end -%>
   />
 
   <Link

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/form.svelte.tt

@@ -0,0 +1,109 @@
+<script>
+  import { Form } from '@inertiajs/svelte'
+
+  let { <%= singular_table_name %>, submitText, ...restProps } = $props()
+</script>
+
+<Form
+  class="contents"
+  transform={(data) => ({ <%= singular_table_name %>: data })}
+  {...restProps}
+>
+  {#snippet children({
+    errors,
+    processing,
+  })}
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div class="my-5">
+      <label for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+      {#if errors.password}
+        <div class="text-red-500 px-3 py-2 font-medium">
+          {errors.password.join(', ')}
+        </div>
+      {/if}
+    </div>
+
+    <div class="my-5">
+      <label for="password_confirmation">Password confirmation</label>
+      <input
+        type="password"
+        name="password_confirmation"
+        id="password_confirmation"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+      {#if errors.password_confirmation}
+        <div class="text-red-500 px-3 py-2 font-medium">
+          {errors.password_confirmation.join(', ')}
+        </div>
+      {/if}
+    </div>
+<% else -%>
+    <div class="my-5">
+      <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+      <textarea
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultValue={<%= singular_table_name %>.<%= attribute.column_name %> ?? ''}
+        rows="4"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      ></textarea>
+<% elsif attribute.attachment? -%>
+      <input
+        type="file"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% elsif attribute.attachments? -%>
+      <input
+        type="file"
+        multiple
+        name="<%= attribute.singular_name %>[]"
+        id="<%= attribute.singular_name %>"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% elsif input_type(attribute) == "checkbox" -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+        class="block mt-2 h-5 w-5"
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultValue={<%= singular_table_name %>.<%= attribute.column_name %> ?? ''}
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% end -%>
+      {#if errors.<%= attribute.column_name %>}
+        <div class="text-red-500 px-3 py-2 font-medium">
+          {errors.<%= attribute.column_name %>.join(', ')}
+        </div>
+      {/if}
+    </div>
+<% end -%>
+
+<% end -%>
+    <div class="inline">
+      <button
+        type="submit"
+        disabled={processing}
+        class="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
+      >
+        {submitText}
+      </button>
+    </div>
+  {/snippet}
+</Form>

data/lib/generators/inertia_tw_templates/scaffold/templates/svelte/form.ts.svelte.tt

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { type FormComponentSlotProps } from "@inertiajs/core"
+  import { Form } from '@inertiajs/svelte'
+  import type { ComponentProps } from 'svelte'
+
+  import type { <%= inertia_model_type %> } from './types'
+
+  let { <%= singular_table_name %>, submitText, ...restProps } = $props<{
+    <%= singular_table_name %>: <%= inertia_model_type %>
+    submitText: string
+  } & ComponentProps<Form>>()
+</script>
+
+<Form
+  transform={(data) => ({ <%= singular_table_name %>: data })}
+  {...restProps}
+>
+  {#snippet children({
+    errors,
+    processing,
+  }: FormComponentSlotProps)}
+<% attributes.each do |attribute| -%>
+<% if attribute.password_digest? -%>
+    <div class="my-5">
+      <label for="password">Password</label>
+      <input
+        type="password"
+        name="password"
+        id="password"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+      {#if errors.password}
+        <div class="text-red-500 px-3 py-2 font-medium">
+          {errors.password}
+        </div>
+      {/if}
+    </div>
+
+    <div class="my-5">
+      <label for="password_confirmation">Password confirmation</label>
+      <input
+        type="password"
+        name="password_confirmation"
+        id="password_confirmation"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+      {#if errors.password_confirmation}
+        <div class="text-red-500 px-3 py-2 font-medium">
+          {errors.password_confirmation}
+        </div>
+      {/if}
+    </div>
+<% else -%>
+    <div class="my-5">
+      <label for="<%= attribute.singular_name %>"><%= attribute.human_name %></label>
+<% if input_type(attribute) == "text_area" -%>
+      <textarea
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultValue={<%= singular_table_name %>.<%= attribute.column_name %> ?? ''}
+        rows="4"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      ></textarea>
+<% elsif attribute.attachment? -%>
+      <input
+        type="file"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% elsif attribute.attachments? -%>
+      <input
+        type="file"
+        multiple
+        name="<%= attribute.singular_name %>[]"
+        id="<%= attribute.singular_name %>"
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% elsif input_type(attribute) == "checkbox" -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultChecked={<%= singular_table_name %>.<%= attribute.column_name %>}
+        class="block mt-2 h-5 w-5"
+      />
+<% else -%>
+      <input
+        type="<%= input_type(attribute) %>"
+        name="<%= attribute.singular_name %>"
+        id="<%= attribute.singular_name %>"
+        defaultValue={<%= singular_table_name %>.<%= attribute.column_name %> ?? ''}
+        class="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+      />
+<% end -%>
+      {#if errors.<%= attribute.column_name %>}
+        <div class="text-red-500 px-3 py-2 font-medium">
+          {errors.<%= attribute.column_name %>}
+        </div>
+      {/if}
+    </div>
+<% end -%>
+
+<% end -%>
+    <div class="inline">
+      <button
+        type="submit"
+        disabled={processing}
+        class="rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer"
+      >
+        {submitText}
+      </button>
+    </div>
+  {/snippet}
+</Form>