feat(example): add Head component for dynamic title and description management

aprendendofelipe · aprendendofelipe · commit 7f2e22296487 · 2025-12-30T10:38:05.000-03:00
diff --git a/examples/form/app/layout.jsx b/examples/form/app/layout.jsx
@@ -5,6 +5,11 @@ import { DefaultLayout } from '../components/DefaultLayout.jsx';
 import { DefaultHead } from '../components/Head/Head.App';
 import { NotificationsProvider } from '../components/Notifications';
 
+export const metadata = {
+  title: 'App Router · Default Title',
+  description: 'App Router · Default Description',
+};
+
 export default function Layout({ children }) {
   return (
     <PrimerRoot defaultColorMode="light" lang="pt-BR">
diff --git a/examples/form/components/Head/Head.Pages.jsx b/examples/form/components/Head/Head.Pages.jsx
@@ -9,3 +9,12 @@ export function DefaultHead() {
   // Calling DefaultTags() forces evaluation instead of relying on component mounting.
   return <NextHead>{DefaultTags()}</NextHead>;
 }
+
+export function Head({ title, description }) {
+  return (
+    <NextHead>
+      {title && <title>{title}</title>}
+      {description && <meta name="description" content={description} key="description" />}
+    </NextHead>
+  );
+}
diff --git a/examples/form/pages/_app.js b/examples/form/pages/_app.js
@@ -1,13 +1,14 @@
 import { AutoThemeProvider } from '@barso/ui';
 import '@barso/ui/css';
 
-import { DefaultHead } from '../components/Head/Head.Pages';
+import { DefaultHead, Head } from '../components/Head/Head.Pages';
 import { NotificationsProvider } from '../components/Notifications';
 
 export default function MyApp({ Component, pageProps }) {
   return (
     <AutoThemeProvider defaultColorMode="dark">
       <DefaultHead />
+      <Head title="Pages Router · Default Title" description="Pages Router · Default Description" />
       <NotificationsProvider>
         <Component {...pageProps} />
       </NotificationsProvider>
diff --git a/examples/form/pages/pages_router.jsx b/examples/form/pages/pages_router.jsx
@@ -1,10 +1,12 @@
 import { Checkout } from '../components/Checkout.jsx';
 import { DefaultLayout } from '../components/DefaultLayout.jsx';
+import { Head } from '../components/Head/Head.Pages.jsx';
 import { checkoutFields, product, store } from '../form-config.js';
 
 export default function Home() {
   return (
     <DefaultLayout containerWidth="medium">
+      <Head description="Pages Router · Custom Description" />
       <Checkout fields={checkoutFields} product={product} store={store} />
     </DefaultLayout>
   );
diff --git a/examples/form/pages/registration.jsx b/examples/form/pages/registration.jsx
@@ -1,10 +1,12 @@
 import { DefaultLayout } from '../components/DefaultLayout.jsx';
+import { Head } from '../components/Head/Head.Pages.jsx';
 import { Registration } from '../components/Registration.jsx';
 import { registrationFields, store } from '../form-config.js';
 
 export default function RegistrationPage() {
   return (
     <DefaultLayout containerWidth="small">
+      <Head title="Pages Router · Custom Title" />
       <Registration fields={registrationFields} store={store} />
     </DefaultLayout>
   );
