create-nextjs-cms 0.9.30 → 0.9.32

package/templates/default/components/layout/sidebar.tsx

@@ -1,229 +1,229 @@
-import React from 'react'
-import classNames from 'classnames'
-import Link from 'next/link'
-import Image from 'next/image'
-import { SidebarProps } from 'nextjs-cms/core/types'
-import SidebarItem from '@/components/layout/sidebar-item'
-import SidebarDropdownItem from '@/components/layout/sidebar-dropdown-item'
-import SidebarPluginGroup from '@/components/layout/sidebar-plugin-group'
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { useI18n } from 'nextjs-cms/translations/client'
-import ProtectedImage from '@/components/media/protected-image'
-import { trpc } from '@/app/_trpc/client'
-import { useToast } from '@/components/ui/use-toast'
-import { logout, useSession } from 'nextjs-cms/auth/react'
-import { LogOut } from 'lucide-react'
-
-const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string; isRTL: boolean }) => {
-    const t = useI18n()
-    const session = useSession()
-    const [navItems] = trpc.navigation.getSidebar.useSuspenseQuery()
-    const { toast } = useToast()
-    const handleLogout = async (e: React.MouseEvent<HTMLAnchorElement>) => {
-        e.preventDefault()
-        e.stopPropagation()
-        try {
-            await logout()
-        } catch (error: any) {
-            toast({
-                variant: 'destructive',
-                title: t('logoutError'),
-                description: error.message,
-            })
-        }
-    }
-    return (
-        <div
-            className={classNames({
-                'fixed z-20 h-full bg-linear-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950':
-                    true,
-                'transition-all duration-100 ease-in-out': true,
-                'w-[300px] md:w-[275px]': true,
-                // LTR: sidebar on left, slides in from left
-                'left-0': !props.isRTL,
-                'md:translate-x-0': !props.isRTL,
-                '-translate-x-full': !props.isRTL && !props.mobileSidebar,
-                // RTL: sidebar on right, slides in from right
-                'right-0': props.isRTL,
-                'translate-x-full md:translate-x-0': props.isRTL && !props.mobileSidebar,
-                // Mobile sidebar shown (both LTR and RTL)
-                'translate-x-0': props.mobileSidebar,
-            })}
-        >
-            <div
-                className={classNames({
-                    'sticky inset-0 flex h-screen flex-col justify-between overflow-auto md:h-full': true,
-                })}
-            >
-                {/* logo and collapse button */}
-                <div
-                    className={classNames({
-                        'sticky top-0 flex h-[65px] shrink-0 items-center bg-indigo-700 transition-none dark:bg-slate-900': true,
-                        'justify-start gap-2 p-4': true,
-                    })}
-                >
-                    <Image src={props.logoUrlPath} alt={t('logo') as string} width={32} height={32} />
-                    <span className='bg-transparent px-2 font-normal tracking-[0.1em] text-white/90 transition-all duration-150'>
-                        {props.logoText}
-                    </span>
-                </div>
-                <ScrollArea dir={props.isRTL ? 'rtl' : 'ltr'} type='always' className='grow'>
-                    <ul
-                        className={classNames({
-                            'my-2 flex flex-col items-stretch gap-2': true,
-                        })}
-                    >
-                        {navItems && (
-                            <>
-                                {navItems.fixed_sections && navItems.fixed_sections.length > 0 && (
-                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('main')}</h2>
-                                        {navItems.fixed_sections.map((item, index) => {
-                                            return (
-                                                <SidebarItem
-                                                    closeSideBar={props.closeSideBar}
-                                                    key={index}
-                                                    item={item}
-                                                />
-                                            )
-                                        })}
-                                    </div>
-                                )}
-
-                                {navItems.plugin_sections && navItems.plugin_sections.length > 0 && (
-                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('plugins')}</h2>
-                                        {navItems.plugin_sections.map((item, index) => {
-                                            if (item.kind === 'group') {
-                                                return (
-                                                    <SidebarPluginGroup
-                                                        closeSideBar={props.closeSideBar}
-                                                        key={index}
-                                                        group={item}
-                                                    />
-                                                )
-                                            }
-                                            return (
-                                                <SidebarItem
-                                                    closeSideBar={props.closeSideBar}
-                                                    key={index}
-                                                    item={item}
-                                                />
-                                            )
-                                        })}
-                                    </div>
-                                )}
-
-                                {navItems.cat_sections && navItems.cat_sections.length > 0 && (
-                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('categorySections')}</h2>
-                                        {navItems.cat_sections.map((item, index) => {
-                                            return (
-                                                <SidebarItem
-                                                    closeSideBar={props.closeSideBar}
-                                                    key={index}
-                                                    item={item}
-                                                />
-                                            )
-                                        })}
-                                    </div>
-                                )}
-
-                                {navItems.has_items_sections && navItems.has_items_sections.length > 0 && (
-                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('sectionsWithItems')}</h2>
-                                        <div className='flex flex-col gap-y-2'>
-                                            {navItems.has_items_sections.map((item, index) => {
-                                                return (
-                                                    <SidebarDropdownItem
-                                                        closeSideBar={props.closeSideBar}
-                                                        key={index}
-                                                        item={item}
-                                                    />
-                                                )
-                                            })}
-                                        </div>
-                                    </div>
-                                )}
-                                {navItems.simple_sections && navItems.simple_sections.length > 0 && (
-                                    <div className='mx-3 flex flex-col border-b border-blue-900 py-2'>
-                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('simpleSections')}</h2>
-                                        {navItems.simple_sections.map((item, index) => {
-                                            return (
-                                                <SidebarItem
-                                                    closeSideBar={props.closeSideBar}
-                                                    key={index}
-                                                    item={item}
-                                                />
-                                            )
-                                        })}
-                                    </div>
-                                )}
-                                <div className='mx-3 flex flex-col py-2'>
-                                    <h2 className='my-2 text-start text-xs text-gray-300'>{t('settings')}</h2>
-                                    <SidebarItem
-                                        closeSideBar={props.closeSideBar}
-                                        key={101}
-                                        item={{
-                                            path: '/settings',
-                                            title: t('accountSettings'),
-                                            icon: 'cog'
-                                        }}
-                                    />
-                                    <Link
-                                        href='#'
-                                        onClick={handleLogout}
-                                        className={classNames({
-                                            'flex flex-row gap-1 items-center rounded-lg hover:text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
-                                            'transition-colors duration-100': false, //animation
-                                            'gap-4 p-2 text-start': true,
-                                        })}
-                                    >
-                                        <LogOut className='size-4' />
-                                        <span>{t('logout')}</span>
-                                    </Link>
-                                </div>
-                            </>
-                        )}
-                    </ul>
-                </ScrollArea>
-                <div
-                    className={classNames({
-                        'grid place-content-stretch bg-indigo-700 p-2 dark:bg-slate-800': true,
-                    })}
-                >
-                        <div className='flex h-12 items-center gap-4'>
-                        {session?.data?.user.image ? (
-                            <ProtectedImage
-                                section={'admins'}
-                                photo={session.data.user.image}
-                                isThumb={true}
-                                alt={session?.data?.user.name}
-                                width={40}
-                                height={40}
-                                // fill={true}
-                                className='ring-foreground rounded-full ring-3'
-                            />
-                        ) : (
-                            <Image
-                                src='/blank_avatar.png'
-                                height={36}
-                                width={36}
-                                alt={t('profileImage') as string}
-                                className='rounded-full ring-2 ring-amber-300 ring-inset'
-                            />
-                        )}
-
-                        <div className='flex flex-col text-start'>
-                            <span className='my-0 text-indigo-50'>{session?.data?.user.name}</span>
-                            <Link href='/settings' className='text-sm text-indigo-200'>
-                                {t('settings')}
-                            </Link>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
-export default Sidebar
+import React from 'react'
+import classNames from 'classnames'
+import Link from 'next/link'
+import Image from 'next/image'
+import { SidebarProps } from 'nextjs-cms/core/types'
+import SidebarItem from '@/components/layout/sidebar-item'
+import SidebarDropdownItem from '@/components/layout/sidebar-dropdown-item'
+import SidebarPluginGroup from '@/components/layout/sidebar-plugin-group'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { useI18n } from 'nextjs-cms/translations/client'
+import ProtectedImage from '@/components/media/protected-image'
+import { trpc } from '@/app/_trpc/client'
+import { useToast } from '@/components/ui/use-toast'
+import { logout, useSession } from 'nextjs-cms/auth/react'
+import { LogOut } from 'lucide-react'
+
+const Sidebar = (props: SidebarProps & { logoUrlPath: string; logoText: string; isRTL: boolean }) => {
+    const t = useI18n()
+    const session = useSession()
+    const [navItems] = trpc.navigation.getSidebar.useSuspenseQuery()
+    const { toast } = useToast()
+    const handleLogout = async (e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        try {
+            await logout()
+        } catch (error: any) {
+            toast({
+                variant: 'destructive',
+                title: t('logoutError'),
+                description: error.message,
+            })
+        }
+    }
+    return (
+        <div
+            className={classNames({
+                'fixed z-20 h-full bg-linear-to-br from-indigo-600 to-sky-500 text-zinc-50 dark:from-slate-950 dark:to-pink-950':
+                    true,
+                'transition-all duration-100 ease-in-out': true,
+                'w-[300px] md:w-[275px]': true,
+                // LTR: sidebar on left, slides in from left
+                'left-0': !props.isRTL,
+                'md:translate-x-0': !props.isRTL,
+                '-translate-x-full': !props.isRTL && !props.mobileSidebar,
+                // RTL: sidebar on right, slides in from right
+                'right-0': props.isRTL,
+                'translate-x-full md:translate-x-0': props.isRTL && !props.mobileSidebar,
+                // Mobile sidebar shown (both LTR and RTL)
+                'translate-x-0': props.mobileSidebar,
+            })}
+        >
+            <div
+                className={classNames({
+                    'sticky inset-0 flex h-screen flex-col justify-between overflow-auto md:h-full': true,
+                })}
+            >
+                {/* logo and collapse button */}
+                <div
+                    className={classNames({
+                        'sticky top-0 flex h-[65px] shrink-0 items-center bg-indigo-700 transition-none dark:bg-slate-900': true,
+                        'justify-start gap-2 p-4': true,
+                    })}
+                >
+                    <Image src={props.logoUrlPath} alt={t('logo') as string} width={32} height={32} />
+                    <span className='bg-transparent px-2 font-normal tracking-[0.1em] text-white/90 transition-all duration-150'>
+                        {props.logoText}
+                    </span>
+                </div>
+                <ScrollArea dir={props.isRTL ? 'rtl' : 'ltr'} type='always' className='grow'>
+                    <ul
+                        className={classNames({
+                            'my-2 flex flex-col items-stretch gap-2': true,
+                        })}
+                    >
+                        {navItems && (
+                            <>
+                                {navItems.fixed_sections && navItems.fixed_sections.length > 0 && (
+                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('main')}</h2>
+                                        {navItems.fixed_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+
+                                {navItems.plugin_sections && navItems.plugin_sections.length > 0 && (
+                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('plugins')}</h2>
+                                        {navItems.plugin_sections.map((item, index) => {
+                                            if (item.kind === 'group') {
+                                                return (
+                                                    <SidebarPluginGroup
+                                                        closeSideBar={props.closeSideBar}
+                                                        key={index}
+                                                        group={item}
+                                                    />
+                                                )
+                                            }
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+
+                                {navItems.cat_sections && navItems.cat_sections.length > 0 && (
+                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('categorySections')}</h2>
+                                        {navItems.cat_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+
+                                {navItems.has_items_sections && navItems.has_items_sections.length > 0 && (
+                                    <div className='border-primary/40 mx-3 flex flex-col border-b py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('sectionsWithItems')}</h2>
+                                        <div className='flex flex-col gap-y-2'>
+                                            {navItems.has_items_sections.map((item, index) => {
+                                                return (
+                                                    <SidebarDropdownItem
+                                                        closeSideBar={props.closeSideBar}
+                                                        key={index}
+                                                        item={item}
+                                                    />
+                                                )
+                                            })}
+                                        </div>
+                                    </div>
+                                )}
+                                {navItems.simple_sections && navItems.simple_sections.length > 0 && (
+                                    <div className='mx-3 flex flex-col border-b border-blue-900 py-2'>
+                                        <h2 className='my-2 text-start text-xs text-gray-300'>{t('simpleSections')}</h2>
+                                        {navItems.simple_sections.map((item, index) => {
+                                            return (
+                                                <SidebarItem
+                                                    closeSideBar={props.closeSideBar}
+                                                    key={index}
+                                                    item={item}
+                                                />
+                                            )
+                                        })}
+                                    </div>
+                                )}
+                                <div className='mx-3 flex flex-col py-2'>
+                                    <h2 className='my-2 text-start text-xs text-gray-300'>{t('settings')}</h2>
+                                    <SidebarItem
+                                        closeSideBar={props.closeSideBar}
+                                        key={101}
+                                        item={{
+                                            path: '/settings',
+                                            title: t('accountSettings'),
+                                            icon: 'cog'
+                                        }}
+                                    />
+                                    <Link
+                                        href='#'
+                                        onClick={handleLogout}
+                                        className={classNames({
+                                            'flex flex-row gap-1 items-center rounded-lg hover:text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true, //colors
+                                            'transition-colors duration-100': false, //animation
+                                            'gap-4 p-2 text-start': true,
+                                        })}
+                                    >
+                                        <LogOut className='size-4' />
+                                        <span>{t('logout')}</span>
+                                    </Link>
+                                </div>
+                            </>
+                        )}
+                    </ul>
+                </ScrollArea>
+                <div
+                    className={classNames({
+                        'grid place-content-stretch bg-indigo-700 p-2 dark:bg-slate-800': true,
+                    })}
+                >
+                        <div className='flex h-12 items-center gap-4'>
+                        {session?.data?.user.image ? (
+                            <ProtectedImage
+                                section={'admins'}
+                                photo={session.data.user.image}
+                                isThumb={true}
+                                alt={session?.data?.user.name}
+                                width={40}
+                                height={40}
+                                // fill={true}
+                                className='ring-foreground rounded-full ring-3'
+                            />
+                        ) : (
+                            <Image
+                                src='/blank_avatar.png'
+                                height={36}
+                                width={36}
+                                alt={t('profileImage') as string}
+                                className='rounded-full ring-2 ring-amber-300 ring-inset'
+                            />
+                        )}
+
+                        <div className='flex flex-col text-start'>
+                            <span className='my-0 text-indigo-50'>{session?.data?.user.name}</span>
+                            <Link href='/settings' className='text-sm text-indigo-200'>
+                                {t('settings')}
+                            </Link>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Sidebar

package/templates/default/components/layout/theme-provider.tsx

@@ -1,8 +1,8 @@
-'use client'
-
-import * as React from 'react'
-import { ThemeProvider as NextThemesProvider } from 'next-themes'
-
-export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
-    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
-}
+'use client'
+
+import * as React from 'react'
+import { ThemeProvider as NextThemesProvider } from 'next-themes'
+
+export function ThemeProvider({ children, ...props }: React.ComponentProps<typeof NextThemesProvider>) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>
+}

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

@@ -1,39 +1,39 @@
-import { useState, useEffect } from 'react'
-import { useTheme } from 'next-themes'
-import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
-import { Spinner } from '@/components/ui/spinner'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-const ThemeToggle = () => {
-    const t = useI18n()
-    const [mounted, setMounted] = useState(false)
-    const { theme, setTheme } = useTheme()
-
-    useEffect(() => {
-        setMounted(true)
-    }, [])
-
-    if (!mounted) {
-        return <Spinner className='size-6' aria-label={t('loading') as string} />
-    }
-
-    return (
-        <button
-            onClick={() => {
-                setTheme(theme === 'dark' ? 'light' : 'dark')
-            }}
-            type='button'
-            className='text-foreground hover:text-foreground/90 relative flex h-10 items-center justify-center rounded-full focus:outline-hidden cursor-pointer'
-        >
-            <span className='absolute -inset-1.5' />
-            <span className='sr-only'>{t('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
+import { useState, useEffect } from 'react'
+import { useTheme } from 'next-themes'
+import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
+import { Spinner } from '@/components/ui/spinner'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+const ThemeToggle = () => {
+    const t = useI18n()
+    const [mounted, setMounted] = useState(false)
+    const { theme, setTheme } = useTheme()
+
+    useEffect(() => {
+        setMounted(true)
+    }, [])
+
+    if (!mounted) {
+        return <Spinner className='size-6' aria-label={t('loading') as string} />
+    }
+
+    return (
+        <button
+            onClick={() => {
+                setTheme(theme === 'dark' ? 'light' : 'dark')
+            }}
+            type='button'
+            className='text-foreground hover:text-foreground/90 relative flex h-10 items-center justify-center rounded-full focus:outline-hidden cursor-pointer'
+        >
+            <span className='absolute -inset-1.5' />
+            <span className='sr-only'>{t('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