[examples] Layout nav bar

Xennis · May 29, 2024 · fa2958d · fa2958d
1 parent 9ed5339
commit fa2958d
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 3 deletions.
diff --git a/examples/nextjs/src/app/layout.tsx b/examples/nextjs/src/app/layout.tsx
@@ -14,11 +14,16 @@ export default function RootLayout({
     <html lang="en" suppressHydrationWarning>
       <body className={classNames(inter.className, "dark:bg-slate-800")} suppressHydrationWarning>
         <header className="w-full bg-teal-500">
-          <div className="mx-auto max-w-screen-lg py-2">
+          <div className="mx-auto flex max-w-screen-lg justify-between px-3 py-2">
             <div className="flex gap-4">
               <ToggleDarkModeButton />
               <ToggleRtlDirectionButton />
             </div>
+            <nav>
+              <a className="hover:underline" href="https://github.com/Xennis/react-notion-render" target="_blank">
+                GitHub
+              </a>
+            </nav>
           </div>
         </header>
         <main>{children}</main>

diff --git a/examples/nextjs/src/app/page.tsx b/examples/nextjs/src/app/page.tsx
@@ -16,7 +16,7 @@ const formatDateFn = (date: Date) => {
 export default async function Home() {
   const blocks = await getCachedPageContent(process.env.NOTION_BLOCK_ID!)
   return (
-    <main className="mx-auto max-w-screen-lg">
+    <main className="mx-auto max-w-screen-lg px-3">
       <Render
         blocks={blocks}
         options={{ formatDateFn: formatDateFn, resolveLinkFn: (nId) => ({ href: nId, icon: null }) }}

diff --git a/examples/nextjs/src/components/toggle-button.tsx b/examples/nextjs/src/components/toggle-button.tsx
@@ -6,7 +6,10 @@ import { classNames } from "@react-notion-cms/render/dist/util"
 const Button = ({ className, ...props }: React.ComponentPropsWithoutRef<"button">) => {
   return (
     <button
-      className={classNames("rounded bg-black px-2 py-1 text-sm font-semibold text-white", className ?? "")}
+      className={classNames(
+        "rounded bg-black px-2 py-1 text-sm font-semibold text-white hover:bg-gray-800",
+        className ?? "",
+      )}
       {...props}
     >
       {props.children}