update with-app-dir example (#266)

upd Co-authored-by: paco <34928425+pacocoursey@users.noreply.github.com>
pacocoursey · Mar 13, 2024 · c665793 · c665793
1 parent 725983c
commit c665793
Show file tree

Hide file tree

Showing 9 changed files with 155 additions and 33 deletions.
diff --git a/README.md b/README.md
@@ -549,7 +549,7 @@ If we didn't distinguish between `theme` and `resolvedTheme`, the UI would show
 
 `resolvedTheme` is then useful for modifying behavior or styles at runtime:
 
-```js
+```jsx
 const { resolvedTheme } = useTheme()
 
 <div style={{ color: resolvedTheme === 'dark' ? white : black }}>

diff --git a/examples/with-app-dir/next.config.js b/examples/with-app-dir/next.config.js
diff --git a/examples/with-app-dir/package.json b/examples/with-app-dir/package.json
@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^13.4.19",
+    "next": "^14.1.3",
     "next-themes": "workspace:*",
     "react": "18.2.0",
     "react-dom": "18.2.0"

diff --git a/...th-app-dir/src/components/ThemeToggle.tsx → ...ples/with-app-dir/src/app/ThemeToggle.tsx b/...th-app-dir/src/components/ThemeToggle.tsx → ...ples/with-app-dir/src/app/ThemeToggle.tsx
@@ -2,9 +2,8 @@
 
 import { useTheme } from 'next-themes'
 
-function ThemeToggle() {
-  const { theme, resolvedTheme, setTheme } = useTheme()
-
+export function ThemeToggle() {
+  const { resolvedTheme, setTheme } = useTheme()
   return (
     <button
       className="mt-16 px-4 py-2 text-white dark:text-black bg-black dark:bg-white font-semibold rounded-md"
@@ -16,5 +15,3 @@ function ThemeToggle() {
     </button>
   )
 }
-
-export default ThemeToggle
diff --git a/examples/with-app-dir/src/app/layout.tsx b/examples/with-app-dir/src/app/layout.tsx
@@ -1,10 +1,10 @@
 import './globals.css'
-import { ThemeProvider } from '../components/ThemeProvider'
+import { ThemeProvider } from 'next-themes'
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body className="bg-white dark:bg-black min-h-[100dvh]">
+      <body className="bg-white dark:bg-black min-h-dvh">
         <ThemeProvider attribute="class">{children}</ThemeProvider>
       </body>
     </html>

diff --git a/examples/with-app-dir/src/app/page.tsx b/examples/with-app-dir/src/app/page.tsx
@@ -1,4 +1,4 @@
-import ThemeToggle from '../components/ThemeToggle'
+import { ThemeToggle } from './ThemeToggle'
 
 export default function Home() {
   return (

diff --git a/examples/with-app-dir/src/components/ThemeProvider.tsx b/examples/with-app-dir/src/components/ThemeProvider.tsx
diff --git a/examples/with-app-dir/tailwind.config.ts b/examples/with-app-dir/tailwind.config.ts
@@ -1,9 +1,8 @@
 import type { Config } from 'tailwindcss'
 
-const config: Config = {
+export default {
   darkMode: 'class',
-  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
   theme: {},
   plugins: []
-}
-export default config
+} satisfies Config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml