carbon-design-system · guidari · Sep 18, 2023 · Sep 18, 2023
diff --git a/README.md b/README.md
@@ -2,7 +2,7 @@
 
 ## Carbon Tutorial for NextJS 13
 
-Base NextJS 13 app using IBM Carbon Design System React components
+Base NextJS 13 app using IBM Carbon Design System React components.
 
 ## Create NextJS 13 app
 

diff --git a/next.config.js b/next.config.js
@@ -1,4 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {}
+const nextConfig = {};
 
-module.exports = nextConfig
+module.exports = nextConfig;
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -21,7 +21,7 @@
 .cds--content {
   margin-top: 3rem;
   padding: 0;
-//  background: var(--cds-background);
+  //  background: var(--cds-background);
 }
 
 .cds--content .cds--css-grid {

diff --git a/src/app/home/_mixins.scss b/src/app/home/_mixins.scss
@@ -4,4 +4,4 @@
 @mixin landing-page-background() {
   background-color: $layer-01;
   position: relative;
-}
+}
diff --git a/src/app/home/_overrides.scss b/src/app/home/_overrides.scss
@@ -15,4 +15,4 @@
 .cds--subgrid--wide {
   //fix needed to keep the subgrid from scrolling horizontally
   margin-right: 1rem;
-}
+}
diff --git a/src/app/home/page.js b/src/app/home/page.js
@@ -14,7 +14,7 @@ import {
 } from '@carbon/react';
 import Image from 'next/image';
 
-export function LandingPage() {
+export default function LandingPage() {
   return (
     <Grid className="landing-page" fullWidth>
       <Column lg={16} md={8} sm={4} className="landing-page__banner">

diff --git a/src/app/layout.js b/src/app/layout.js
@@ -1,11 +1,11 @@
-import './globals.scss'
+import './globals.scss';
 
 import { Providers } from './providers';
 
 export const metadata = {
   title: 'Carbon + Next 13',
   description: 'IBM Carbon Tutorial with NextJS 13',
-}
+};
 
 export default function RootLayout({ children }) {
   return (
@@ -14,5 +14,5 @@ export default function RootLayout({ children }) {
         <Providers>{children}</Providers>
       </body>
     </html>
-  )
+  );
 }
diff --git a/src/app/page.js b/src/app/page.js
@@ -1,5 +1,5 @@
 import LandingPage from './home/page';
 
 export default function Page() {
-    return <LandingPage />;
-  }
+  return <LandingPage />;
+}
diff --git a/src/app/providers.js b/src/app/providers.js
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import { Content, Theme } from '@carbon/react';
 
@@ -7,12 +7,10 @@ import TutorialHeader from '@/components/TutorialHeader/TutorialHeader';
 export function Providers({ children }) {
   return (
     <div>
-        <Theme theme="g100">
-          <TutorialHeader />
-        </Theme>
-        <Content>
-          {children}
-        </Content>
+      <Theme theme="g100">
+        <TutorialHeader />
+      </Theme>
+      <Content>{children}</Content>
     </div>
-  )
+  );
 }
diff --git a/src/app/repos/_repo-page.scss b/src/app/repos/_repo-page.scss
@@ -3,4 +3,4 @@
 .repo-page__r1 {
   padding-top: $spacing-05;
   padding-bottom: $spacing-05;
-}
+}
diff --git a/src/components/TutorialHeader/TutorialHeader.js b/src/components/TutorialHeader/TutorialHeader.js
@@ -1,4 +1,4 @@
-'use client'
+'use client';
 
 import {
   Header,
@@ -14,68 +14,61 @@ import {
   SideNavItems,
   HeaderSideNavItems,
 } from '@carbon/react';
-import {
-  Switcher,
-  Notification,
-  UserAvatar,
-} from '@carbon/icons-react';
+import { Switcher, Notification, UserAvatar } from '@carbon/icons-react';
 
 import Link from 'next/link';
 
 const TutorialHeader = () => (
-    <HeaderContainer
-      render={({ isSideNavExpanded, onClickSideNavExpand }) => (
-        <Header aria-label="Carbon Tutorial">
-          <SkipToContent />
-          <HeaderMenuButton
-            aria-label="Open menu"
-            onClick={onClickSideNavExpand}
-            isActive={isSideNavExpanded}
-          />
-          <Link href="/" passHref legacyBehavior>
-            <HeaderName prefix="IBM">
-              Carbon Tutorial
-            </HeaderName>
-          </Link>     
-           <HeaderNavigation aria-label="Carbon Tutorial">
+  <HeaderContainer
+    render={({ isSideNavExpanded, onClickSideNavExpand }) => (
+      <Header aria-label="Carbon Tutorial">
+        <SkipToContent />
+        <HeaderMenuButton
+          aria-label="Open menu"
+          onClick={onClickSideNavExpand}
+          isActive={isSideNavExpanded}
+        />
+        <Link href="/" passHref legacyBehavior>
+          <HeaderName prefix="IBM">Carbon Tutorial</HeaderName>
+        </Link>
+        <HeaderNavigation aria-label="Carbon Tutorial">
+          <Link href="/repos" passHref legacyBehavior>
+            <HeaderMenuItem>Repositories</HeaderMenuItem>
+          </Link>
+        </HeaderNavigation>
+        <SideNav
+          aria-label="Side navigation"
+          expanded={isSideNavExpanded}
+          isPersistent={false}
+        >
+          <SideNavItems>
+            <HeaderSideNavItems>
               <Link href="/repos" passHref legacyBehavior>
-                <HeaderMenuItem >
-                  Repositories
-                </HeaderMenuItem>
+                <HeaderMenuItem>Repositories</HeaderMenuItem>
               </Link>
-            </HeaderNavigation>
-            <SideNav
-              aria-label="Side navigation"
-              expanded={isSideNavExpanded}
-              isPersistent={false}>
-              <SideNavItems>
-              <HeaderSideNavItems>
-                <Link href="/repos" passHref legacyBehavior>
-                  <HeaderMenuItem >
-                    Repositories
-                  </HeaderMenuItem>
-                </Link>
-              </HeaderSideNavItems>
-              </SideNavItems>
-            </SideNav>
-            <HeaderGlobalBar>
-              <HeaderGlobalAction
-                aria-label="Notifications"
-                tooltipAlignment="center">
-                <Notification size={20} />
-              </HeaderGlobalAction>
-              <HeaderGlobalAction
-                aria-label="User Avatar"
-                tooltipAlignment="center">
-                <UserAvatar size={20} />
-              </HeaderGlobalAction>
-              <HeaderGlobalAction aria-label="App Switcher" tooltipAlignment="end">
-                <Switcher size={20} />
-              </HeaderGlobalAction>
-            </HeaderGlobalBar>
-        </Header>
-      )}
-    />
+            </HeaderSideNavItems>
+          </SideNavItems>
+        </SideNav>
+        <HeaderGlobalBar>
+          <HeaderGlobalAction
+            aria-label="Notifications"
+            tooltipAlignment="center"
+          >
+            <Notification size={20} />
+          </HeaderGlobalAction>
+          <HeaderGlobalAction
+            aria-label="User Avatar"
+            tooltipAlignment="center"
+          >
+            <UserAvatar size={20} />
+          </HeaderGlobalAction>
+          <HeaderGlobalAction aria-label="App Switcher" tooltipAlignment="end">
+            <Switcher size={20} />
+          </HeaderGlobalAction>
+        </HeaderGlobalBar>
+      </Header>
+    )}
+  />
 );
 
 export default TutorialHeader;