Updated layout-component with new feature layout.js

vercel · Jul 4, 2024 · eabd29d · eabd29d
1 parent b262547
commit eabd29d
Show file tree

Hide file tree

Showing 9 changed files with 35 additions and 91 deletions.
diff --git a/...t-component/components/sidebar.module.css → ...ponent/app/_components/sidebar.module.css b/...t-component/components/sidebar.module.css → ...ponent/app/_components/sidebar.module.css
diff --git a/...s/layout-component/components/sidebar.tsx → ...out-component/app/_components/sidebar.tsx b/...s/layout-component/components/sidebar.tsx → ...out-component/app/_components/sidebar.tsx
diff --git a/examples/layout-component/pages/about.tsx → examples/layout-component/app/about/page.tsx b/examples/layout-component/pages/about.tsx → examples/layout-component/app/about/page.tsx
@@ -1,16 +1,11 @@
-import type { NextPageWithLayout } from "./_app";
-import Layout from "../components/layout";
-import Sidebar from "../components/sidebar";
-
-const About: NextPageWithLayout = () => {
+export default function Home() {
   return (
     <section>
       <h2>Layout Example (About)</h2>
       <p>
-        This example adds a property <code>getLayout</code> to your page,
-        allowing you to return a React component for the layout. This allows you
-        to define the layout on a per-page basis. Since we're returning a
-        function, we can have complex nested layouts if desired.
+        You can define a layout by default exporting a React component from 
+        a layout.js file. The component should accept a children prop that will
+        be populated with a child layout (if it exists) or a page during rendering.
       </p>
       <p>
         When navigating between pages, we want to persist page state (input
@@ -33,13 +28,3 @@ const About: NextPageWithLayout = () => {
   );
 };
 
-export default About;
-
-About.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <Layout>
-      <Sidebar />
-      {page}
-    </Layout>
-  );
-};
diff --git a/examples/layout-component/pages/contact.tsx → ...les/layout-component/app/contact/page.tsx b/examples/layout-component/pages/contact.tsx → ...les/layout-component/app/contact/page.tsx
@@ -1,16 +1,11 @@
-import type { NextPageWithLayout } from "./_app";
-import Layout from "../components/layout";
-import Sidebar from "../components/sidebar";
-
-const Contact: NextPageWithLayout = () => {
+export default function Home() {
   return (
     <section>
       <h2>Layout Example (Contact)</h2>
       <p>
-        This example adds a property <code>getLayout</code> to your page,
-        allowing you to return a React component for the layout. This allows you
-        to define the layout on a per-page basis. Since we're returning a
-        function, we can have complex nested layouts if desired.
+        You can define a layout by default exporting a React component from 
+        a layout.js file. The component should accept a children prop that will
+        be populated with a child layout (if it exists) or a page during rendering.
       </p>
       <p>
         When navigating between pages, we want to persist page state (input
@@ -33,13 +28,3 @@ const Contact: NextPageWithLayout = () => {
   );
 };
 
-export default Contact;
-
-Contact.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <Layout>
-      <Sidebar />
-      {page}
-    </Layout>
-  );
-};
diff --git a/...ut-component/components/layout.module.css → ...es/layout-component/app/layout.module.css b/...ut-component/components/layout.module.css → ...es/layout-component/app/layout.module.css
diff --git a/examples/layout-component/app/layout.tsx b/examples/layout-component/app/layout.tsx
@@ -0,0 +1,23 @@
+import Sidebar from "./_components/sidebar";
+import styles from "./layout.module.css";
+
+export const metadata = {
+  title: "Layouts Example"
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <main className={styles.main}>      
+        <Sidebar />
+        {children}
+        </main>
+      </body>
+    </html>
+  );
+}
diff --git a/examples/layout-component/pages/index.tsx → examples/layout-component/app/page.tsx b/examples/layout-component/pages/index.tsx → examples/layout-component/app/page.tsx
@@ -1,16 +1,11 @@
-import type { NextPageWithLayout } from "./_app";
-import Layout from "../components/layout";
-import Sidebar from "../components/sidebar";
-
-const Index: NextPageWithLayout = () => {
+export default function Home() {
   return (
     <section>
       <h2>Layout Example (Index)</h2>
       <p>
-        This example adds a property <code>getLayout</code> to your page,
-        allowing you to return a React component for the layout. This allows you
-        to define the layout on a per-page basis. Since we're returning a
-        function, we can have complex nested layouts if desired.
+        You can define a layout by default exporting a React component from 
+        a layout.js file. The component should accept a children prop that will
+        be populated with a child layout (if it exists) or a page during rendering.
       </p>
       <p>
         When navigating between pages, we want to persist page state (input
@@ -33,13 +28,3 @@ const Index: NextPageWithLayout = () => {
   );
 };
 
-export default Index;
-
-Index.getLayout = function getLayout(page: React.ReactElement) {
-  return (
-    <Layout>
-      <Sidebar />
-      {page}
-    </Layout>
-  );
-};
diff --git a/examples/layout-component/components/layout.tsx b/examples/layout-component/components/layout.tsx
diff --git a/examples/layout-component/pages/_app.tsx b/examples/layout-component/pages/_app.tsx