Do some refactoring

frontend/src/components/BackLink.tsx

@@ -0,0 +1,14 @@
+import { A } from "@solidjs/router"
+
+type BackLinkProps = {
+  href: string
+  label: string
+}
+
+export default function BackLink(props: BackLinkProps) {
+  return (
+    <div class="flex items-center gap-2 mb-6">
+      <A href={props.href} class="text-gray-500 hover:text-gray-700">← {props.label}</A>
+    </div>
+  )
+}

frontend/src/components/PageContainer.tsx

@@ -0,0 +1,12 @@
+import type { JSX } from "solid-js"
+
+type PageContainerProps = {
+  children: JSX.Element
+  size?: "narrow" | "wide"
+}
+
+export default function PageContainer(props: PageContainerProps) {
+  const maxWidthClass = () => (props.size === "narrow" ? "max-w-2xl" : "max-w-4xl")
+
+  return <div class={`${maxWidthClass()} mx-auto px-4 py-8`}>{props.children}</div>
+}

frontend/src/components/ResourceState.tsx

@@ -0,0 +1,22 @@
+import { Show } from "solid-js"
+
+type ResourceStateProps = {
+  loading: boolean
+  error: unknown
+  loadingText: string
+  errorText: string
+  class?: string
+}
+
+export default function ResourceState(props: ResourceStateProps) {
+  return (
+    <>
+      <Show when={props.loading}>
+        <p class={`text-gray-500 ${props.class ?? ""}`.trim()}>{props.loadingText}</p>
+      </Show>
+      <Show when={props.error && !props.loading}>
+        <p class={`text-red-600 ${props.class ?? ""}`.trim()}>{props.errorText}</p>
+      </Show>
+    </>
+  )
+}