test server action

siriwatknp · Feb 19, 2024 · 85087cc · 85087cc
1 parent 3a1e93e
commit 85087cc
Show file tree

Hide file tree

Showing 7 changed files with 262 additions and 9 deletions.
diff --git a/examples/zero-nextjs/next.config.js b/examples/zero-nextjs/next.config.js
@@ -20,6 +20,7 @@ const theme = extendTheme({
       },
     },
   },
+  getSelector: (colorScheme) => (colorScheme ? `.theme-${colorScheme}` : ':root'),
 });
 
 module.exports = withZeroPlugin({}, { theme });
diff --git a/examples/zero-nextjs/src/app/actions.ts b/examples/zero-nextjs/src/app/actions.ts
@@ -0,0 +1,7 @@
+'use server';
+import { cookies } from 'next/headers';
+
+// eslint-disable-next-line import/prefer-default-export
+export async function setTheme(theme: string) {
+  cookies().set('theme', theme);
+}
diff --git a/examples/zero-nextjs/src/app/layout.tsx b/examples/zero-nextjs/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import type { Metadata } from 'next';
+import { cookies } from 'next/headers';
 import '@mui/zero-runtime/styles.css';
 import { css } from '@mui/zero-runtime';
 
@@ -11,8 +12,9 @@ export const metadata: Metadata = {
 };
 
 export default function RootLayout(props: { children: React.ReactNode }) {
+  const mode = cookies().get('theme')?.value || 'light';
   return (
-    <html lang="en">
+    <html lang="en" className={`theme-${mode}`}>
       <body
         className={css(({ theme }) => ({
           color: 'hsl(var(--palette-foreground))',

diff --git a/examples/zero-nextjs/src/app/page.tsx b/examples/zero-nextjs/src/app/page.tsx
@@ -1,6 +1,8 @@
 import * as React from 'react';
+import { cookies } from 'next/headers';
 import { Kalnia, Josefin_Sans } from 'next/font/google';
 import { styled, css, keyframes } from '@mui/zero-runtime';
+import ThemeToggle from '@/components/ThemeToggle';
 
 const kalnia = Kalnia({ subsets: ['latin'] });
 const josefin = Josefin_Sans({ subsets: ['latin'] });
@@ -200,6 +202,8 @@ export default function Home() {
           Roadmap
         </Link>
       </div>
+
+      <ThemeToggle value={cookies().get('theme')?.value || 'light'} />
     </main>
   );
 }
diff --git a/examples/zero-nextjs/src/components/ThemeToggle.tsx b/examples/zero-nextjs/src/components/ThemeToggle.tsx
@@ -0,0 +1,24 @@
+'use client';
+import * as React from 'react';
+import { css } from '@mui/zero-runtime';
+import { setTheme } from '../app/actions';
+
+export default function ThemeToggle({ value }: { value: string }) {
+  return (
+    <select
+      value={value}
+      className={css({
+        position: 'fixed',
+        top: '1rem',
+        right: '1rem',
+        zIndex: 1000,
+      })}
+      onChange={async (event) => {
+        await setTheme(event.target.value);
+      }}
+    >
+      <option value="light">light</option>
+      <option value="dark">dark</option>
+    </select>
+  );
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -20,6 +20,7 @@ const theme = extendTheme({ @@
           },
         },
       },
+      getSelector: (colorScheme) => (colorScheme ? `.theme-${colorScheme}` : ':root'),
     });
     module.exports = withZeroPlugin({}, { theme });