create-nextjs-cms 0.8.10 → 0.9.0

package/templates/default/components/Navbar.tsx

@@ -1,258 +1,258 @@
-import React from 'react'
-import classNames from 'classnames'
-import { MoonIcon, SunIcon, BellIcon, HamburgerMenuIcon } from '@radix-ui/react-icons'
-import { useTheme } from 'next-themes'
-import Link from 'next/link'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { RTL_LOCALES } from 'nextjs-cms/translations'
-import { trpc } from '@/app/_trpc/client'
-import ProtectedImage from '@/components/ProtectedImage'
-import { Spinner } from '@/components/ui/spinner'
-import Image from 'next/image'
-import { LogOut, Settings } from 'lucide-react'
-
-import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuGroup,
-    DropdownMenuItem,
-    DropdownMenuLabel,
-    DropdownMenuSeparator,
-    DropdownMenuShortcut,
-    DropdownMenuTrigger,
-} 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'
-import LocaleDropdown from './locale-dropdown'
-type Props = {
-    /**
-     * Allows the parent component to modify the state when the
-     * menu button is clicked.
-     */
-    onMenuButtonClick(): void
-}
-
-const formatTimestamp = (value?: Date | string | null) => {
-    if (!value) return ''
-    const date = value instanceof Date ? value : new Date(value)
-    if (Number.isNaN(date.getTime())) return ''
-    return date.toLocaleString()
-}
-
-export default function Navbar(props: Props) {
-    const t = useI18n()
-    const session = useSession()
-    const { toast } = useToast()
-    const locale = session?.data?.user?.locale ?? 'en'
-    const isRTL = RTL_LOCALES.has(locale)
-    const logsQuery = trpc.logs.list.useQuery(
-        {
-            limit: 20,
-            offset: 0,
-        },
-        {
-            enabled: false,
-        },
-    )
-
-    const handleNotificationsOpenChange = (open: boolean) => {
-        if (open) {
-            void logsQuery.refetch()
-        }
-    }
-
-    const logs = logsQuery.data?.items ?? []
-    const handleLogout = async (e: React.MouseEvent<HTMLDivElement>) => {
-        e.preventDefault()
-        e.stopPropagation()
-        try {
-            await logout()
-        } catch (error: any) {
-            toast({
-                variant: 'destructive',
-                title: t('logoutError'),
-                description: error.message,
-            })
-        }
-    }
-
-    return (
-        <>
-            <nav
-                className={classNames({
-                    'sticky top-0 h-[65px] bg-white text-zinc-500 drop-shadow-sm dark:bg-slate-800': true, // colors
-                    'top-0 z-10 w-full px-4 shadow-xs md:w-full': true, //positioning & styling
-                })}
-            >
-                <div className='mx-auto px-0 lg:px-2'>
-                    <div className='flex h-16 items-center justify-between'>
-                        <div className='flex items-center'>
-                            <div className='shrink-0'>
-                                <div className='flex md:hidden'>
-                                    {/* Mobile menu button */}
-                                    <button
-                                        onClick={props.onMenuButtonClick}
-                                        className='border-foreground text-foreground hover:text-foreground/90 relative inline-flex items-center justify-center rounded-md border p-2 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden'
-                                    >
-                                        <span className='absolute -inset-0.5' />
-                                        <span className='sr-only'>{t('openMainMenu')}</span>
-                                        <HamburgerMenuIcon className='block h-6 w-6' aria-hidden='true' />
-                                    </button>
-                                </div>
-                            </div>
-
-                            {/*<div className=''>
-                                <div className='flex items-baseline space-x-4'>
-                                    <input
-                                        type='text'
-                                        className='h-full w-full border-0 bg-transparent text-amber-500 outline-0 ring-0'
-                                        placeholder='Search...'
-                                    />
-                                </div>
-                            </div>*/}
-                        </div>
-                        <div className=''>
-                            <div className='ms-4 flex items-center md:ms-6'>
-                                <div className='flex flex-row items-center gap-3'>
-                                    <DropdownMenu onOpenChange={handleNotificationsOpenChange}>
-                                        <DropdownMenuTrigger
-                                            asChild
-                                            className='text-foreground hover:text-foreground/90 cursor-pointer'
-                                        >
-                                            <button
-                                                type='button'
-                                                className='relative flex h-10 items-center justify-center rounded-full focus:outline-hidden'
-                                                aria-label={t('notifications') as string}
-                                            >
-                                                <span className='absolute -inset-1.5' />
-                                                <BellIcon className='h-6 w-6' />
-                                            </button>
-                                        </DropdownMenuTrigger>
-                                        <DropdownMenuContent
-                                            sideOffset={12}
-                                            align={'end'}
-                                            side='bottom'
-                                            className='w-[400px] max-w-full ring-1 ring-sky-400/80 dark:ring-amber-900'
-                                        >
-                                            <DropdownMenuLabel>{t('notifications')}</DropdownMenuLabel>
-                                            <DropdownMenuSeparator />
-                                            <DropdownMenuGroup className='max-h-[320px] overflow-y-auto'>
-                                                {logsQuery.isFetching && logs.length === 0 ? (
-                                                    <DropdownMenuItem disabled className='flex items-center gap-2'>
-                                                        <Spinner className='size-3' />
-                                                        <span>{t('loading')}</span>
-                                                    </DropdownMenuItem>
-                                                ) : logsQuery.isError ? (
-                                                    <DropdownMenuItem disabled>
-                                                        {logsQuery.error?.message || t('noAccessToSection')}
-                                                    </DropdownMenuItem>
-                                                ) : logs.length === 0 ? (
-                                                    <DropdownMenuItem disabled>{t('noData')}</DropdownMenuItem>
-                                                ) : (
-                                                    logs.map((log) => {
-                                                        const actorLabel = log.actorUsername || log.actorId || ''
-                                                        const contextLabel = log.entityLabel || log.sectionName || ''
-                                                        const timestamp = formatTimestamp(log.createdAt)
-                                                        const detailParts: string[] = []
-                                                        if (actorLabel) detailParts.push(actorLabel)
-                                                        if (contextLabel) detailParts.push(contextLabel)
-                                                        if (timestamp) detailParts.push(timestamp)
-                                                        const details = detailParts.join(' | ') || '-'
-
-                                                        return (
-                                                            <DropdownMenuItem
-                                                                key={log.id}
-                                                                className='flex flex-col items-start gap-1 py-2'
-                                                            >
-                                                                <span className='w-full truncate text-sm font-medium'>
-                                                                    {log.eventType}
-                                                                </span>
-                                                                <span className='text-muted-foreground w-full truncate text-xs'>
-                                                                    {details}
-                                                                </span>
-                                                            </DropdownMenuItem>
-                                                        )
-                                                    })
-                                                )}
-                                            </DropdownMenuGroup>
-                                            <DropdownMenuSeparator />
-
-                                            <Link href='/log'>
-                                                <DropdownMenuItem className='cursor-pointer'>
-                                                    <span>{t('seeAll')}</span>
-                                                </DropdownMenuItem>
-                                            </Link>
-                                        </DropdownMenuContent>
-                                    </DropdownMenu>
-                                    <LocaleDropdown />
-                                    <ThemeToggle />
-                                    {/* Profile dropdown */}
-                                    <DropdownMenu>
-                                        <DropdownMenuTrigger
-                                            asChild
-                                            className='relative ms-2 flex max-w-xs cursor-pointer items-center rounded-full bg-gray-800 text-sm hover:ring-3 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden'
-                                        >
-                                            <button
-                                                type='button'
-                                                className='relative flex h-10 items-center justify-center rounded-full'
-                                            >
-                                                <span className='absolute -inset-1.5' />
-                                                <span className='sr-only'>{t('openUserMenu')}</span>
-                                                {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='rounded-full'
-                                                    />
-                                                ) : (
-                                                    <Image
-                                                        src='/blank_avatar.png'
-                                                        height={40}
-                                                        width={40}
-                                                        alt={t('profileImage') as string}
-                                                        className='rounded-full ring-2 ring-amber-300 ring-inset'
-                                                    />
-                                                )}
-                                            </button>
-                                        </DropdownMenuTrigger>
-                                        <DropdownMenuContent
-                                            sideOffset={12}
-                                            align={'end'}
-                                            side='bottom'
-                                            className='w-56 max-w-full ring-1 ring-sky-400/80 dark:ring-amber-900'
-                                        >
-                                            <DropdownMenuLabel>{session.data?.user.name}</DropdownMenuLabel>
-                                            <DropdownMenuSeparator />
-                                            <DropdownMenuGroup>
-                                                <Link href='/settings'>
-                                                    <DropdownMenuItem className='cursor-pointer'>
-                                                        <Settings className='me-2 h-4 w-4' />
-                                                        <span>{t('accountSettings')}</span>
-                                                        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-                                                    </DropdownMenuItem>
-                                                </Link>
-                                            </DropdownMenuGroup>
-                                            <DropdownMenuSeparator />
-
-                                            <DropdownMenuItem className='cursor-pointer' onClick={handleLogout}>
-                                                <LogOut className='me-2 h-4 w-4' />
-                                                <span>{t('logout')}</span>
-                                                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
-                                            </DropdownMenuItem>
-                                        </DropdownMenuContent>
-                                    </DropdownMenu>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </nav>
-        </>
-    )
-}
+import React from 'react'
+import classNames from 'classnames'
+import { MoonIcon, SunIcon, BellIcon, HamburgerMenuIcon } from '@radix-ui/react-icons'
+import { useTheme } from 'next-themes'
+import Link from 'next/link'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { RTL_LANGUAGES } from 'nextjs-cms/translations'
+import { trpc } from '@/app/_trpc/client'
+import ProtectedImage from '@/components/ProtectedImage'
+import { Spinner } from '@/components/ui/spinner'
+import Image from 'next/image'
+import { LogOut, Settings } from 'lucide-react'
+
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuGroup,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuShortcut,
+    DropdownMenuTrigger,
+} 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'
+import LanguageDropdown from './language-dropdown'
+type Props = {
+    /**
+     * Allows the parent component to modify the state when the
+     * menu button is clicked.
+     */
+    onMenuButtonClick(): void
+}
+
+const formatTimestamp = (value?: Date | string | null) => {
+    if (!value) return ''
+    const date = value instanceof Date ? value : new Date(value)
+    if (Number.isNaN(date.getTime())) return ''
+    return date.toLocaleString()
+}
+
+export default function Navbar(props: Props) {
+    const t = useI18n()
+    const session = useSession()
+    const { toast } = useToast()
+    const language = session?.data?.user?.language ?? 'en'
+    const isRTL = RTL_LANGUAGES.has(language)
+    const logsQuery = trpc.logs.list.useQuery(
+        {
+            limit: 20,
+            offset: 0,
+        },
+        {
+            enabled: false,
+        },
+    )
+
+    const handleNotificationsOpenChange = (open: boolean) => {
+        if (open) {
+            void logsQuery.refetch()
+        }
+    }
+
+    const logs = logsQuery.data?.items ?? []
+    const handleLogout = async (e: React.MouseEvent<HTMLDivElement>) => {
+        e.preventDefault()
+        e.stopPropagation()
+        try {
+            await logout()
+        } catch (error: any) {
+            toast({
+                variant: 'destructive',
+                title: t('logoutError'),
+                description: error.message,
+            })
+        }
+    }
+
+    return (
+        <>
+            <nav
+                className={classNames({
+                    'sticky top-0 h-[65px] bg-white text-zinc-500 drop-shadow-sm dark:bg-slate-800': true, // colors
+                    'top-0 z-10 w-full px-4 shadow-xs md:w-full': true, //positioning & styling
+                })}
+            >
+                <div className='mx-auto px-0 lg:px-2'>
+                    <div className='flex h-16 items-center justify-between'>
+                        <div className='flex items-center'>
+                            <div className='shrink-0'>
+                                <div className='flex md:hidden'>
+                                    {/* Mobile menu button */}
+                                    <button
+                                        onClick={props.onMenuButtonClick}
+                                        className='border-foreground text-foreground hover:text-foreground/90 relative inline-flex items-center justify-center rounded-md border p-2 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden'
+                                    >
+                                        <span className='absolute -inset-0.5' />
+                                        <span className='sr-only'>{t('openMainMenu')}</span>
+                                        <HamburgerMenuIcon className='block h-6 w-6' aria-hidden='true' />
+                                    </button>
+                                </div>
+                            </div>
+
+                            {/*<div className=''>
+                                <div className='flex items-baseline space-x-4'>
+                                    <input
+                                        type='text'
+                                        className='h-full w-full border-0 bg-transparent text-amber-500 outline-0 ring-0'
+                                        placeholder='Search...'
+                                    />
+                                </div>
+                            </div>*/}
+                        </div>
+                        <div className=''>
+                            <div className='ms-4 flex items-center md:ms-6'>
+                                <div className='flex flex-row items-center gap-3'>
+                                    <DropdownMenu onOpenChange={handleNotificationsOpenChange}>
+                                        <DropdownMenuTrigger
+                                            asChild
+                                            className='text-foreground hover:text-foreground/90 cursor-pointer'
+                                        >
+                                            <button
+                                                type='button'
+                                                className='relative flex h-10 items-center justify-center rounded-full focus:outline-hidden'
+                                                aria-label={t('notifications') as string}
+                                            >
+                                                <span className='absolute -inset-1.5' />
+                                                <BellIcon className='h-6 w-6' />
+                                            </button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent
+                                            sideOffset={12}
+                                            align={'end'}
+                                            side='bottom'
+                                            className='w-[400px] max-w-full ring-1 ring-sky-400/80 dark:ring-amber-900'
+                                        >
+                                            <DropdownMenuLabel>{t('notifications')}</DropdownMenuLabel>
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuGroup className='max-h-[320px] overflow-y-auto'>
+                                                {logsQuery.isFetching && logs.length === 0 ? (
+                                                    <DropdownMenuItem disabled className='flex items-center gap-2'>
+                                                        <Spinner className='size-3' />
+                                                        <span>{t('loading')}</span>
+                                                    </DropdownMenuItem>
+                                                ) : logsQuery.isError ? (
+                                                    <DropdownMenuItem disabled>
+                                                        {logsQuery.error?.message || t('noAccessToSection')}
+                                                    </DropdownMenuItem>
+                                                ) : logs.length === 0 ? (
+                                                    <DropdownMenuItem disabled>{t('noData')}</DropdownMenuItem>
+                                                ) : (
+                                                    logs.map((log) => {
+                                                        const actorLabel = log.actorUsername || log.actorId || ''
+                                                        const contextLabel = log.entityLabel || log.sectionName || ''
+                                                        const timestamp = formatTimestamp(log.createdAt)
+                                                        const detailParts: string[] = []
+                                                        if (actorLabel) detailParts.push(actorLabel)
+                                                        if (contextLabel) detailParts.push(contextLabel)
+                                                        if (timestamp) detailParts.push(timestamp)
+                                                        const details = detailParts.join(' | ') || '-'
+
+                                                        return (
+                                                            <DropdownMenuItem
+                                                                key={log.id}
+                                                                className='flex flex-col items-start gap-1 py-2'
+                                                            >
+                                                                <span className='w-full truncate text-sm font-medium'>
+                                                                    {log.eventType}
+                                                                </span>
+                                                                <span className='text-muted-foreground w-full truncate text-xs'>
+                                                                    {details}
+                                                                </span>
+                                                            </DropdownMenuItem>
+                                                        )
+                                                    })
+                                                )}
+                                            </DropdownMenuGroup>
+                                            <DropdownMenuSeparator />
+
+                                            <Link href='/log'>
+                                                <DropdownMenuItem className='cursor-pointer'>
+                                                    <span>{t('seeAll')}</span>
+                                                </DropdownMenuItem>
+                                            </Link>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                    <LanguageDropdown />
+                                    <ThemeToggle />
+                                    {/* Profile dropdown */}
+                                    <DropdownMenu>
+                                        <DropdownMenuTrigger
+                                            asChild
+                                            className='relative ms-2 flex max-w-xs cursor-pointer items-center rounded-full bg-gray-800 text-sm hover:ring-3 focus:ring-2 focus:ring-white focus:ring-offset-2 focus:ring-offset-gray-800 focus:outline-hidden'
+                                        >
+                                            <button
+                                                type='button'
+                                                className='relative flex h-10 items-center justify-center rounded-full'
+                                            >
+                                                <span className='absolute -inset-1.5' />
+                                                <span className='sr-only'>{t('openUserMenu')}</span>
+                                                {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='rounded-full'
+                                                    />
+                                                ) : (
+                                                    <Image
+                                                        src='/blank_avatar.png'
+                                                        height={40}
+                                                        width={40}
+                                                        alt={t('profileImage') as string}
+                                                        className='rounded-full ring-2 ring-amber-300 ring-inset'
+                                                    />
+                                                )}
+                                            </button>
+                                        </DropdownMenuTrigger>
+                                        <DropdownMenuContent
+                                            sideOffset={12}
+                                            align={'end'}
+                                            side='bottom'
+                                            className='w-56 max-w-full ring-1 ring-sky-400/80 dark:ring-amber-900'
+                                        >
+                                            <DropdownMenuLabel>{session.data?.user.name}</DropdownMenuLabel>
+                                            <DropdownMenuSeparator />
+                                            <DropdownMenuGroup>
+                                                <Link href='/settings'>
+                                                    <DropdownMenuItem className='cursor-pointer'>
+                                                        <Settings className='me-2 h-4 w-4' />
+                                                        <span>{t('accountSettings')}</span>
+                                                        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+                                                    </DropdownMenuItem>
+                                                </Link>
+                                            </DropdownMenuGroup>
+                                            <DropdownMenuSeparator />
+
+                                            <DropdownMenuItem className='cursor-pointer' onClick={handleLogout}>
+                                                <LogOut className='me-2 h-4 w-4' />
+                                                <span>{t('logout')}</span>
+                                                <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+                                            </DropdownMenuItem>
+                                        </DropdownMenuContent>
+                                    </DropdownMenu>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </nav>
+        </>
+    )
+}