create-nextjs-cms 0.5.76 → 0.5.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.5.76",
+  "version": "0.5.78",
   "private": false,
   "type": "module",
   "bin": {
@@ -28,8 +28,8 @@
     "prettier": "^3.3.3",
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
-    "@lzcms/eslint-config": "0.3.0",
     "@lzcms/prettier-config": "0.1.0",
+    "@lzcms/eslint-config": "0.3.0",
     "@lzcms/tsconfig": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",

package/templates/default/components/Navbar.tsx

@@ -20,6 +20,7 @@ import {
 } from '@/components/ui/dropdown-menu'
 import { useToast } from '@/components/ui/use-toast'
 import { logout, useSession } from 'nextjs-cms/auth/react'
+import ThemeToggle from './theme-toggle'
 type Props = {
     /**
      * Allows the parent component to modify the state when the
@@ -104,21 +105,7 @@ export default function Navbar(props: Props) {
                                             </Link>
                                         </DropdownMenuContent>
                                     </DropdownMenu>
-                                    <button
-                                        onClick={() => {
-                                            setTheme(theme === 'dark' ? 'light' : 'dark')
-                                        }}
-                                        type='button'
-                                        className='text-foreground hover:text-foreground/90 relative rounded-full p-1 focus:outline-hidden'
-                                    >
-                                        <span className='absolute -inset-1.5' />
-                                        <span className='sr-only'>Theme</span>
-                                        {theme === 'dark' ? (
-                                            <SunIcon className='h-6 w-6' aria-hidden='true' />
-                                        ) : (
-                                            <MoonIcon className='h-6 w-6' aria-hidden='true' />
-                                        )}
-                                    </button>
+                                    <ThemeToggle />
                                     {/* Profile dropdown */}
                                     <DropdownMenu>
                                         <DropdownMenuTrigger

package/templates/default/components/form/helpers/_section-hot-reload.js

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1768221970917
+export const configLastUpdated = 1768394841557

package/templates/default/components/form/helpers/util.ts

@@ -1,4 +1,4 @@
-let configLastUpdated: number = Date.now()
+let configLastUpdated: number = 0
 
 // Use new Function to bypass next.js dynamic import restriction
 const loadHotReloadFile = async () => {
@@ -6,9 +6,9 @@ const loadHotReloadFile = async () => {
         // This approach completely bypasses next.js dynamic import restriction
         const importFn = new Function('path', 'return import(path)')
         const sectionInfo = await importFn('./_section-hot-reload.js')
-        configLastUpdated = sectionInfo?.configLastUpdated ?? Date.now()
+        configLastUpdated = sectionInfo?.configLastUpdated ?? 0
     } catch {
-        configLastUpdated = Date.now()
+        configLastUpdated = 0
     }
 }
 

package/templates/default/components/spinner.tsx

@@ -0,0 +1,11 @@
+import { Loader2Icon } from 'lucide-react'
+
+import { cn } from '@/lib/utils'
+
+function Spinner({ className, ...props }: React.ComponentProps<'svg'>) {
+    return (
+        <Loader2Icon role='status' aria-label='Loading' className={cn('size-4 animate-spin', className)} {...props} />
+    )
+}
+
+export { Spinner }

package/templates/default/components/theme-toggle.tsx

@@ -0,0 +1,37 @@
+import { useState, useEffect } from 'react'
+import { useTheme } from 'next-themes'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { Spinner } from './spinner'
+
+const ThemeToggle = () => {
+    const [mounted, setMounted] = useState(false)
+    const { theme, setTheme } = useTheme()
+
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) {
+        return <Spinner className='size-6' />
+    }
+
+    return (
+        <button
+            onClick={() => {
+                setTheme(theme === 'dark' ? 'light' : 'dark')
+            }}
+            type='button'
+            className='text-foreground hover:text-foreground/90 relative rounded-full p-1 focus:outline-hidden'
+        >
+            <span className='absolute -inset-1.5' />
+            <span className='sr-only'>Theme</span>
+            {theme === 'dark' ? (
+                <SunIcon className='h-6 w-6' aria-hidden='true' />
+            ) : (
+                <MoonIcon className='h-6 w-6' aria-hidden='true' />
+            )}
+        </button>
+    )
+}
+
+export default ThemeToggle

package/templates/default/package.json

@@ -64,7 +64,7 @@
     "nanoid": "^5.1.2",
     "next": "16.1.1",
     "next-themes": "^0.4.6",
-    "nextjs-cms": "0.5.76",
+    "nextjs-cms": "0.5.78",
     "plaiceholder": "^3.0.0",
     "prettier-plugin-tailwindcss": "^0.7.2",
     "qrcode": "^1.5.4",
@@ -97,7 +97,7 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "fs-extra": "^11.3.3",
-    "nextjs-cms-kit": "0.5.76",
+    "nextjs-cms-kit": "0.5.78",
     "postcss": "^8.5.1",
     "prettier": "3.5.0",
     "raw-loader": "^4.0.2",