RubyGems - inertia_rails - Versions diffs - 3.4.0 → 3.6.0 - Mend

inertia_rails 3.4.0 → 3.6.0

Files changed (205) hide show

data/lib/generators/inertia_templates/scaffold/templates/vue/Show.ts.vue.tt ADDED Viewed

@@ -0,0 +1,41 @@
+<template>
+  <Head :title="`<%= human_name %> #${<%= singular_table_name %>.id}`" />
+  <p v-if="flash.notice" class="notice">{{ 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>
+</template>
+<script setup lang="ts">
+import { Head, Link } from '@inertiajs/vue3'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+import { <%= inertia_model_type %> } from './types'
+const { <%= singular_table_name %>, flash } = defineProps<{
+  <%= singular_table_name %>: <%= inertia_model_type %>
+  flash: { notice?: string }
+}>()
+</script>
+<style scoped>
+.notice {
+  color: green;
+}
+</style>

data/lib/generators/inertia_templates/scaffold/templates/vue/Show.vue.tt ADDED Viewed

@@ -0,0 +1,37 @@
+<template>
+  <Head :title="`<%= human_name %> #${<%= singular_table_name %>.id}`" />
+  <p v-if="flash.notice" class="notice">{{ 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>
+</template>
+<script setup>
+import { Head, Link } from '@inertiajs/vue3'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>.vue'
+const { <%= singular_table_name %>, flash } = defineProps(['<%= singular_table_name %>', 'flash'])
+</script>
+<style scoped>
+.notice {
+  color: green;
+}
+</style>

data/lib/generators/inertia_templates/scaffold/templates/vue/types.ts.tt ADDED Viewed

@@ -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_tw_templates/controller/controller_generator.rb ADDED Viewed

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+require 'inertia_rails/generators/controller_template_base'
+module InertiaTwTemplates
+  module Generators
+    class ControllerGenerator < InertiaRails::Generators::ControllerTemplateBase
+      hide!
+      source_root File.expand_path('./templates', __dir__)
+    end
+  end
+end

data/lib/generators/inertia_tw_templates/controller/templates/react/view.jsx.tt ADDED Viewed

@@ -0,0 +1,8 @@
+export default function <%= @action.camelize %>() {
+  return (
+    <>
+      <h1 className="font-bold text-4xl"><%= class_name %>#<%= @action %></h1>
+      <p>Find me in <%= @path %></p>
+    </>
+  );
+}

data/lib/generators/inertia_tw_templates/controller/templates/react/view.tsx.tt ADDED Viewed

@@ -0,0 +1,8 @@
+export default function <%= @action.camelize %>() {
+  return (
+    <>
+      <h1 className="font-bold text-4xl"><%= class_name %>#<%= @action %></h1>
+      <p>Find me in <%= @path %></p>
+    </>
+  );
+}

data/lib/generators/inertia_tw_templates/controller/templates/svelte/view.svelte.tt ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <h1 class="font-bold text-4xl"><%= class_name %>#<%= @action %></h1>
2	+ <p>Find me in <%= @path %></p>

data/lib/generators/inertia_tw_templates/controller/templates/svelte4/view.svelte.tt ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ <h1 class="font-bold text-4xl"><%= class_name %>#<%= @action %></h1>
2	+ <p>Find me in <%= @path %></p>

data/lib/generators/inertia_tw_templates/controller/templates/vue/view.vue.tt ADDED Viewed

@@ -0,0 +1,4 @@
+<template>
+  <h1 class="font-bold text-4xl"><%= class_name %>#<%= @action %></h1>
+  <p>Find me in <%= @path %></p>
+</template>

data/lib/generators/inertia_tw_templates/scaffold/scaffold_generator.rb ADDED Viewed

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+require 'inertia_rails/generators/scaffold_template_base'
+module InertiaTwTemplates
+  module Generators
+    class ScaffoldGenerator < InertiaRails::Generators::ScaffoldTemplateBase
+      hide!
+      source_root File.expand_path('./templates', __dir__)
+    end
+  end
+end

data/lib/generators/inertia_tw_templates/scaffold/templates/react/Edit.jsx.tt ADDED Viewed

@@ -0,0 +1,42 @@
+import { Head, Link } from '@inertiajs/react'
+import Form from './Form'
+export default function Edit({ <%= singular_table_name %> }) {
+  return (
+    <>
+      <Head title="Editing <%= human_name.downcase %>" />
+      <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+        <h1 className="font-bold text-4xl">Editing <%= human_name.downcase %></h1>
+        <Form
+          <%= singular_table_name %>={<%= singular_table_name %>}
+          onSubmit={(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 -%>
+          }}
+          submitText="Update <%= human_name %>"
+        />
+        <Link
+          href={`<%= js_resource_path %>`}
+          className="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+        >
+          Show this <%= human_name.downcase %>
+        </Link>
+        <Link
+          href="<%= js_resources_path %>"
+          className="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+        >
+          Back to <%= human_name.pluralize.downcase %>
+        </Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_tw_templates/scaffold/templates/react/Edit.tsx.tt ADDED Viewed

@@ -0,0 +1,47 @@
+import { Head, Link } from '@inertiajs/react'
+import Form from './Form'
+import { <%= inertia_model_type %> } from './types'
+interface EditProps {
+  <%= singular_table_name %>: <%= inertia_model_type %>
+}
+export default function Edit({ <%= singular_table_name %> }: EditProps) {
+  return (
+    <>
+      <Head title="Editing <%= human_name.downcase %>" />
+      <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+        <h1 className="font-bold text-4xl">Editing <%= human_name.downcase %></h1>
+        <Form
+          <%= singular_table_name %>={<%= singular_table_name %>}
+          onSubmit={(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 -%>
+          }}
+          submitText="Update <%= human_name %>"
+        />
+        <Link
+          href={`<%= js_resource_path %>`}
+          className="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+        >
+          Show this <%= human_name.downcase %>
+        </Link>
+        <Link
+          href="<%= js_resources_path %>"
+          className="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+        >
+          Back to <%= human_name.pluralize.downcase %>
+        </Link>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.jsx.tt ADDED Viewed

@@ -0,0 +1,122 @@
+import { useForm } from '@inertiajs/react'
+export default function Form({ <%= singular_table_name %>, onSubmit, submitText }) {
+  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 { data, setData, errors, processing } = form
+  const handleSubmit = (e) => {
+    e.preventDefault()
+    onSubmit(form)
+  }
+  return (
+    <form onSubmit={handleSubmit} className="contents">
+<% 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"
+          onChange={(e) => setData('password', e.target.value)}
+        />
+        {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"
+          onChange={(e) => setData('password_confirmation', e.target.value)}
+        />
+        {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 %>"
+          value={data.<%= attribute.column_name %>}
+          rows="4"
+          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
+        />
+<% 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"
+          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 %>"
+          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+          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 %>}
+          className="block mt-2 h-5 w-5"
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.checked)}
+        />
+<% else -%>
+        <input
+          type="<%= input_type(attribute) %>"
+          name="<%= attribute.singular_name %>"
+          id="<%= attribute.singular_name %>"
+          value={data.<%= attribute.column_name %>}
+          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
+        />
+<% 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>
+    </form>
+  )
+}

data/lib/generators/inertia_tw_templates/scaffold/templates/react/Form.tsx.tt ADDED Viewed

@@ -0,0 +1,142 @@
+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} className="contents">
+<% 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"
+          onChange={(e) => setData('password', e.target.value)}
+        />
+        {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"
+          onChange={(e) => setData('password_confirmation', e.target.value)}
+        />
+        {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 %>"
+          value={data.<%= attribute.column_name %>}
+          rows={4}
+          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
+        />
+<% 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"
+          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 %>"
+          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+          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 %>}
+          className="block mt-2 h-5 w-5"
+          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 %>}
+          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+          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 %>}
+          className="block shadow rounded-md border border-gray-400 outline-none px-3 py-2 mt-2 w-full"
+          onChange={(e) => setData('<%= attribute.column_name %>', e.target.value)}
+        />
+<% 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>
+    </form>
+  )
+}

data/lib/generators/inertia_tw_templates/scaffold/templates/react/Index.jsx.tt ADDED Viewed

@@ -0,0 +1,43 @@
+import { Head, Link } from '@inertiajs/react'
+import { Fragment } from 'react'
+import <%= inertia_component_name %> from './<%= inertia_component_name %>'
+export default function Index({ <%= plural_table_name %>, flash }) {
+  return (
+    <>
+      <Head title="<%= human_name.pluralize %>" />
+      <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+        {flash.notice && (
+          <p className="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
+            {flash.notice}
+          </p>
+        )}
+        <div className="flex justify-between items-center">
+          <h1 className="font-bold text-4xl"><%= human_name.pluralize %></h1>
+          <Link
+            href="<%= js_new_resource_path %>"
+            className="rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium"
+          >
+            New <%= human_name.downcase %>
+          </Link>
+        </div>
+        <div className="min-w-full">
+          {<%= plural_table_name %>.map((<%= singular_table_name %>) => (
+            <Fragment key={<%= singular_table_name %>.id}>
+              <<%= inertia_component_name %> <%= singular_table_name %>={<%= singular_table_name %>} />
+              <p>
+                <Link
+                  href={`<%= js_resource_path %>`}
+                  className="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+                >
+                  Show this <%= human_name.downcase %>
+                </Link>
+              </p>
+            </Fragment>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_tw_templates/scaffold/templates/react/Index.tsx.tt ADDED Viewed

@@ -0,0 +1,49 @@
+import { Head, Link } from '@inertiajs/react'
+import { Fragment } from '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 %>" />
+      <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+        {flash.notice && (
+          <p className="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-lg inline-block">
+            {flash.notice}
+          </p>
+        )}
+        <div className="flex justify-between items-center">
+          <h1 className="font-bold text-4xl"><%= human_name.pluralize %></h1>
+          <Link
+            href="<%= js_new_resource_path %>"
+            className="rounded-lg py-3 px-5 bg-blue-600 text-white block font-medium"
+          >
+            New <%= human_name.downcase %>
+          </Link>
+        </div>
+        <div className="min-w-full">
+          {<%= plural_table_name %>.map((<%= singular_table_name %>) => (
+            <Fragment key={<%= singular_table_name %>.id}>
+              <<%= inertia_component_name %> <%= singular_table_name %>={<%= singular_table_name %>} />
+              <p>
+                <Link
+                  href={`<%= js_resource_path %>`}
+                  className="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+                >
+                  Show this <%= human_name.downcase %>
+                </Link>
+              </p>
+            </Fragment>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}

data/lib/generators/inertia_tw_templates/scaffold/templates/react/New.jsx.tt ADDED Viewed

@@ -0,0 +1,30 @@
+import { Head, Link } from '@inertiajs/react'
+import Form from './Form'
+export default function New({ <%= singular_table_name %> }) {
+  return (
+    <>
+      <Head title="New <%= human_name.downcase %>" />
+      <div className="mx-auto md:w-2/3 w-full px-8 pt-8">
+        <h1 className="font-bold text-4xl">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 %>"
+        />
+        <Link
+          href="<%= js_resources_path %>"
+          className="ml-2 rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium"
+        >
+          Back to <%= human_name.pluralize.downcase %>
+        </Link>
+      </div>
+    </>
+  )
+}