Unify page layouts, compact headers and shared UI styling

2026-09-06 19:52:39 +12:00
parent 4d67567d4c
commit dec1dd902c
27 changed files with 480 additions and 179 deletions
@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+import MagentMark from './MagentMark'
+
+export default function AuthLayout({ title, description, children, footer }: {
+  title: string
+  description: string
+  children: ReactNode
+  footer?: ReactNode
+}) {
+  return (
+    <main className="login-page">
+      <section className="login-card" aria-labelledby="login-title">
+        <div className="login-brand"><a href="/login" aria-label="Magent sign in"><MagentMark /><span>Magent</span></a><span className="login-beta">Beta</span></div>
+        <header><h1 id="login-title">{title}</h1><p>{description}</p></header>
+        {children}
+        {footer && <footer>{footer}</footer>}
+      </section>
+      <p className="login-credit">Grizzlyflix · Request. Watch. Enjoy.</p>
+    </main>
+  )
+}