Update next.js example (#24)

* Update next.js example
lukaskupczyk · Oct 23, 2023 · f532b4b · f532b4b
1 parent ed259b7
commit f532b4b
Show file tree

Hide file tree

Showing 15 changed files with 1,102 additions and 925 deletions.
diff --git a/examples/next-v13/.gitignore b/examples/next-v13/.gitignore
@@ -23,7 +23,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
 # local env files
 .env*.local

diff --git a/examples/next-v13/README.md b/examples/next-v13/README.md
@@ -8,15 +8,15 @@ First, run the development server:
 npm run dev
 # or
 yarn dev
+# or
+pnpm dev
+# or
+bun dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
 
 This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
 

diff --git a/examples/next-v13/next.config.js b/examples/next-v13/next.config.js
@@ -1,6 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  reactStrictMode: true,
-}
+const nextConfig = {}
 
 module.exports = nextConfig
diff --git a/examples/next-v13/package.json b/examples/next-v13/package.json
@@ -9,16 +9,17 @@
         "lint": "next lint"
     },
     "dependencies": {
-        "@next/font": "13.1.1",
-        "@types/node": "18.11.18",
-        "@types/react": "18.0.26",
-        "@types/react-dom": "18.0.10",
-        "eslint": "8.31.0",
-        "eslint-config-next": "13.1.1",
-        "next": "13.1.1",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
-        "typescript": "4.9.4",
+        "react": "^18",
+        "react-dom": "^18",
+        "next": "13.5.6"
+    },
+    "devDependencies": {
+        "typescript": "^5",
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "eslint": "^8",
+        "eslint-config-next": "13.5.6",
         "react-hook-consent": "link:../.."
     }
 }
diff --git a/examples/next-v13/pages/_document.tsx b/examples/next-v13/pages/_document.tsx
diff --git a/examples/next-v13/pages/api/hello.ts b/examples/next-v13/pages/api/hello.ts
diff --git a/examples/next-v13/pages/index.tsx b/examples/next-v13/pages/index.tsx
diff --git a/examples/next-v13/public/thirteen.svg b/examples/next-v13/public/thirteen.svg
diff --git a/examples/next-v13/public/favicon.ico → examples/next-v13/src/app/favicon.ico b/examples/next-v13/public/favicon.ico → examples/next-v13/src/app/favicon.ico
diff --git a/examples/next-v13/styles/globals.css → examples/next-v13/src/app/globals.css b/examples/next-v13/styles/globals.css → examples/next-v13/src/app/globals.css
@@ -88,12 +88,11 @@ body {
 body {
   color: rgb(var(--foreground-rgb));
   background: linear-gradient(
-    to bottom,
-    transparent,
-    rgb(var(--background-end-rgb))
-  )
+      to bottom,
+      transparent,
+      rgb(var(--background-end-rgb))
+    )
     rgb(var(--background-start-rgb));
-  font-family: sans-serif;
 }
 
 a {

diff --git a/examples/next-v13/pages/_app.tsx → examples/next-v13/src/app/layout.tsx b/examples/next-v13/pages/_app.tsx → examples/next-v13/src/app/layout.tsx
@@ -1,9 +1,11 @@
-import type { AppProps } from 'next/app';
-import Link from 'next/link';
+'use client';
+import { Inter } from 'next/font/google';
 import { ConsentBanner, ConsentOptions, ConsentProvider } from 'react-hook-consent';
-import '../styles/globals.css';
+import './globals.css';
 import 'react-hook-consent/dist/styles/style.css';
 
+const inter = Inter({ subsets: ['latin'] });
+
 const consentOptions: ConsentOptions = {
     services: [
         {
@@ -31,14 +33,18 @@ const consentOptions: ConsentOptions = {
     // customHash: 'my-custom-hash',
 };
 
-export default function App({ Component, pageProps }: AppProps) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <ConsentProvider options={consentOptions}>
-            <Component {...pageProps} />
-            <ConsentBanner
-                decline={{ hidden: false, label: 'Decline' }}
-                settings={{ modal: { decline: { hidden: true } } }}
-            />
+            <html lang="en">
+                <body className={inter.className}>
+                    {children}
+                    <ConsentBanner
+                        decline={{ hidden: false, label: 'Decline' }}
+                        settings={{ modal: { decline: { hidden: true } } }}
+                    />
+                </body>
+            </html>
         </ConsentProvider>
     );
 }
diff --git a/examples/next-v13/styles/Home.module.css → examples/next-v13/src/app/page.module.css b/examples/next-v13/styles/Home.module.css → examples/next-v13/src/app/page.module.css
@@ -42,8 +42,8 @@
 .grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(25%, auto));
-  width: var(--max-width);
   max-width: 100%;
+  width: var(--max-width);
 }
 
 .card {
@@ -104,53 +104,9 @@
   transform: translateZ(0);
 }
 
-.logo,
-.thirteen {
+.logo {
   position: relative;
 }
-
-.thirteen {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 75px;
-  height: 75px;
-  padding: 25px 10px;
-  margin-left: 16px;
-  transform: translateZ(0);
-  border-radius: var(--border-radius);
-  overflow: hidden;
-  box-shadow: 0px 2px 8px -1px #0000001a;
-}
-
-.thirteen::before,
-.thirteen::after {
-  content: '';
-  position: absolute;
-  z-index: -1;
-}
-
-/* Conic Gradient Animation */
-.thirteen::before {
-  animation: 6s rotate linear infinite;
-  width: 200%;
-  height: 200%;
-  background: var(--tile-border);
-}
-
-/* Inner Square */
-.thirteen::after {
-  inset: 0;
-  padding: 1px;
-  border-radius: var(--border-radius);
-  background: linear-gradient(
-    to bottom right,
-    rgba(var(--tile-start-rgb), 1),
-    rgba(var(--tile-end-rgb), 1)
-  );
-  background-clip: content-box;
-}
-
 /* Enable hover only on non-touch devices */
 @media (hover: hover) and (pointer: fine) {
   .card:hover {
@@ -164,10 +120,6 @@
 }
 
 @media (prefers-reduced-motion) {
-  .thirteen::before {
-    animation: none;
-  }
-
   .card:hover span {
     transform: none;
   }
@@ -262,8 +214,7 @@
     filter: invert(1);
   }
 
-  .logo,
-  .thirteen img {
+  .logo {
     filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
   }
 }