Update pages router example

examples/nextjs-pages/src/pages/_app.tsx

@@ -3,12 +3,15 @@ import type { AppProps } from "next/app";
 import { Core } from "nextjs-darkmode";
 import { Layout } from "@repo/shared/dist/server";
 import { Header } from "@repo/shared";
+import { Inter } from "next/font/google";
+
+const inter = Inter({ subsets: ["latin"] });
 
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <>
       <Core t="all .5s" />
-      <Layout>
+      <Layout className={inter.className}>
         <Header />
         <Component {...pageProps} />;
       </Layout>

examples/nextjs-pages/src/pages/index.tsx

@@ -1,10 +1,7 @@
 import Head from "next/head";
-import { Inter } from "next/font/google";
 import { LandingPage } from "@repo/shared/dist/server";
 import { Demo } from "@repo/shared";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export default function Home() {
   return (
     <>

examples/nextjs/next-env.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
+/// <reference types="next/navigation-types/compat/navigation" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/basic-features/typescript for more information.

lib/package.json

@@ -41,11 +41,11 @@
       "import": "./dist/hooks/index.mjs",
       "types": "./dist/hooks/index.d.ts"
     },
-    "./css": "./dist/client/switch/index.css",
-    "./dist/client/switch/index.css": "./dist/client/switch/index.css"
+    "./css": "./dist/index.css",
+    "./dist/index.css": "./dist/index.css"
   },
   "scripts": {
-    "build": "tsup && tsc -p tsconfig-build.json",
+    "build": "tsup && tsc -p tsconfig-build.json && cp ./dist/client/switch/index.css ./dist/index.css",
     "clean": "rm -rf dist",
     "dev": "tsup --watch && tsc -p tsconfig-build.json -w",
     "typecheck": "tsc --noEmit",

packages/shared/src/global.scss

@@ -1,4 +1,5 @@
 @import "@mayank1513/fork-me/index.css";
+@import "nextjs-darkmode/dist/index.css";
 
 * {
   box-sizing: border-box;

packages/shared/src/server/layout/layout.tsx

@@ -1,21 +1,17 @@
-import { ReactNode } from "react";
+import { HTMLProps, ReactNode } from "react";
 import styles from "./layout.module.scss";
 import { ForkMe } from "@mayank1513/fork-me/server";
 import config from "@repo/scripts/rebrand.config.json";
-import "nextjs-darkmode/css";
 
 const { owner, repo } = config;
-interface LayoutProps {
-  children?: ReactNode;
-}
 
 /**
  * # Layout
  * The default layout shared by all examples.
  */
-export function Layout({ children }: LayoutProps) {
+export function Layout({ children, className, ...props }: HTMLProps<HTMLDivElement>) {
   return (
-    <div className={styles.container}>
+    <div className={[styles.container, className ?? ""].join(" ")} {...props}>
       {children}
       <ForkMe
         gitHubUrl={`https://github.com/${owner}/${repo}`}