create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/pagination/Pagination.tsx

@@ -1,36 +1,36 @@
-import React from 'react'
-import PaginationButtons from './PaginationButtons'
-
-export default function Pagination({
-    page,
-    totalCount,
-    limit,
-    route,
-    lang = 'ar',
-    paginationLinksToShow,
-    searchParams = null,
-}: {
-    page: number
-    totalCount: number
-    limit: number
-    route: string
-    lang?: string
-    paginationLinksToShow?: number
-    searchParams?: string | null
-}) {
-    return (
-        <>
-            <div className='my-3 flex w-full items-center justify-center gap-1 p-3 text-center font-bold'>
-                <PaginationButtons
-                    paginationLinksToShow={paginationLinksToShow}
-                    page={page}
-                    totalCount={totalCount}
-                    limit={limit}
-                    route={route}
-                    lang={lang}
-                    searchParams={searchParams}
-                />
-            </div>
-        </>
-    )
-}
+import React from 'react'
+import PaginationButtons from './PaginationButtons'
+
+export default function Pagination({
+    page,
+    totalCount,
+    limit,
+    route,
+    lang = 'ar',
+    paginationLinksToShow,
+    searchParams = null,
+}: {
+    page: number
+    totalCount: number
+    limit: number
+    route: string
+    lang?: string
+    paginationLinksToShow?: number
+    searchParams?: string | null
+}) {
+    return (
+        <>
+            <div className='my-3 flex w-full items-center justify-center gap-1 p-3 text-center font-bold'>
+                <PaginationButtons
+                    paginationLinksToShow={paginationLinksToShow}
+                    page={page}
+                    totalCount={totalCount}
+                    limit={limit}
+                    route={route}
+                    lang={lang}
+                    searchParams={searchParams}
+                />
+            </div>
+        </>
+    )
+}

package/templates/default/components/pagination/PaginationButtons.tsx

@@ -1,147 +1,147 @@
-import React from 'react'
-import Link from 'next/link'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export default function PaginationButtons({
-    page,
-    totalCount,
-    limit,
-    route,
-    lang = 'ar',
-    paginationLinksToShow = 5,
-    searchParams = null,
-    useLangInRoute = false,
-}: {
-    page: number
-    totalCount: number
-    limit: number
-    route: string
-    lang?: string
-    paginationLinksToShow?: number
-    searchParams?: string | null
-    useLangInRoute?: boolean
-}) {
-    const t = useI18n()
-    // Remove first and trailing slashes from route
-    route = route.replace(/^\/|\/$/g, '')
-    const paginationLinksCount = Math.ceil(totalCount / limit)
-    let paginationLinksArray = []
-    switch (page) {
-        case 1: // If first page
-            for (let i = 1; i <= paginationLinksToShow; i++) {
-                if (i > paginationLinksCount) {
-                    continue
-                }
-
-                paginationLinksArray[i] = {
-                    route: route + '/' + i,
-                    html: i,
-                }
-            }
-
-            paginationLinksArray[0] = {
-                route: route + '/' + 1,
-                html: t('firstPage'),
-                disabled: true,
-            }
-
-            let lastDisabled = true
-            if (paginationLinksCount > 1) {
-                lastDisabled = false
-            }
-            paginationLinksArray[paginationLinksCount + 1] = {
-                route: route + '/' + paginationLinksCount,
-                html: t('lastPage'),
-                disabled: lastDisabled,
-            }
-            break
-        case paginationLinksCount: // If last page
-            let j = paginationLinksCount
-            for (j; j > paginationLinksCount - paginationLinksToShow; j--) {
-                if (j < 1) {
-                    continue
-                }
-                paginationLinksArray[j] = {
-                    route: route + '/' + j,
-                    html: j,
-                }
-            }
-
-            paginationLinksArray[0] = {
-                route: route + '/' + 1,
-                html: t('firstPage'),
-            }
-
-            paginationLinksArray[paginationLinksCount + 1] = {
-                route: route + '/' + paginationLinksCount,
-                html: t('lastPage'),
-                disabled: true,
-            }
-            break
-        default: // If in between
-            let start = Math.max(1, page - Math.floor(paginationLinksToShow / 2))
-            let end = Math.min(paginationLinksCount, start + paginationLinksToShow - 1)
-            start = Math.max(1, end - paginationLinksToShow + 1) // Adjust start if end is less than paginationLinksToShow
-
-            for (let i = start; i <= end; i++) {
-                paginationLinksArray[i] = {
-                    route: route + '/' + i,
-                    html: i,
-                }
-            }
-
-            paginationLinksArray[0] = {
-                route: route + '/' + 1,
-                html: t('firstPage'),
-            }
-
-            paginationLinksArray[paginationLinksCount + 1] = {
-                route: route + '/' + paginationLinksCount,
-                html: t('lastPage'),
-            }
-            break
-    }
-
-    if (paginationLinksCount === 0) {
-        paginationLinksArray = []
-    }
-
-    return (
-        <>
-            {paginationLinksArray.map((item, i) => {
-                const href = useLangInRoute ? `${lang}/${item.route}` : item.route
-                if (i === page) {
-                    return (
-                        <div
-                            className='active rounded border border-neutral-400 bg-blue-950 px-3 py-1 text-amber-50 dark:border-neutral-100'
-                            key={i.toString()}
-                        >
-                            <span className='page-link'>{item.html}</span>
-                        </div>
-                    )
-                } else {
-                    if (item.disabled) {
-                        return (
-                            <div
-                                className='active rounded border border-neutral-400 bg-gray-300 px-3 py-1 text-black/40 opacity-70 dark:border-neutral-100 dark:bg-black dark:text-gray-500/60'
-                                key={i.toString()}
-                            >
-                                {item.html}
-                            </div>
-                        )
-                    } else {
-                        return (
-                            <Link
-                                href={searchParams ? `/${href}?${searchParams}` : `/${href}`}
-                                className='active rounded border border-neutral-400 bg-white px-3 py-1 text-blue-950 hover:bg-emerald-100 dark:border-neutral-100 dark:bg-neutral-800 dark:text-gray-50 dark:hover:bg-neutral-600'
-                                key={i.toString()}
-                            >
-                                {item.html}
-                            </Link>
-                        )
-                    }
-                }
-            })}
-        </>
-    )
-}
+import React from 'react'
+import Link from 'next/link'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export default function PaginationButtons({
+    page,
+    totalCount,
+    limit,
+    route,
+    lang = 'ar',
+    paginationLinksToShow = 5,
+    searchParams = null,
+    useLangInRoute = false,
+}: {
+    page: number
+    totalCount: number
+    limit: number
+    route: string
+    lang?: string
+    paginationLinksToShow?: number
+    searchParams?: string | null
+    useLangInRoute?: boolean
+}) {
+    const t = useI18n()
+    // Remove first and trailing slashes from route
+    route = route.replace(/^\/|\/$/g, '')
+    const paginationLinksCount = Math.ceil(totalCount / limit)
+    let paginationLinksArray = []
+    switch (page) {
+        case 1: // If first page
+            for (let i = 1; i <= paginationLinksToShow; i++) {
+                if (i > paginationLinksCount) {
+                    continue
+                }
+
+                paginationLinksArray[i] = {
+                    route: route + '/' + i,
+                    html: i,
+                }
+            }
+
+            paginationLinksArray[0] = {
+                route: route + '/' + 1,
+                html: t('firstPage'),
+                disabled: true,
+            }
+
+            let lastDisabled = true
+            if (paginationLinksCount > 1) {
+                lastDisabled = false
+            }
+            paginationLinksArray[paginationLinksCount + 1] = {
+                route: route + '/' + paginationLinksCount,
+                html: t('lastPage'),
+                disabled: lastDisabled,
+            }
+            break
+        case paginationLinksCount: // If last page
+            let j = paginationLinksCount
+            for (j; j > paginationLinksCount - paginationLinksToShow; j--) {
+                if (j < 1) {
+                    continue
+                }
+                paginationLinksArray[j] = {
+                    route: route + '/' + j,
+                    html: j,
+                }
+            }
+
+            paginationLinksArray[0] = {
+                route: route + '/' + 1,
+                html: t('firstPage'),
+            }
+
+            paginationLinksArray[paginationLinksCount + 1] = {
+                route: route + '/' + paginationLinksCount,
+                html: t('lastPage'),
+                disabled: true,
+            }
+            break
+        default: // If in between
+            let start = Math.max(1, page - Math.floor(paginationLinksToShow / 2))
+            let end = Math.min(paginationLinksCount, start + paginationLinksToShow - 1)
+            start = Math.max(1, end - paginationLinksToShow + 1) // Adjust start if end is less than paginationLinksToShow
+
+            for (let i = start; i <= end; i++) {
+                paginationLinksArray[i] = {
+                    route: route + '/' + i,
+                    html: i,
+                }
+            }
+
+            paginationLinksArray[0] = {
+                route: route + '/' + 1,
+                html: t('firstPage'),
+            }
+
+            paginationLinksArray[paginationLinksCount + 1] = {
+                route: route + '/' + paginationLinksCount,
+                html: t('lastPage'),
+            }
+            break
+    }
+
+    if (paginationLinksCount === 0) {
+        paginationLinksArray = []
+    }
+
+    return (
+        <>
+            {paginationLinksArray.map((item, i) => {
+                const href = useLangInRoute ? `${lang}/${item.route}` : item.route
+                if (i === page) {
+                    return (
+                        <div
+                            className='active rounded border border-neutral-400 bg-blue-950 px-3 py-1 text-amber-50 dark:border-neutral-100'
+                            key={i.toString()}
+                        >
+                            <span className='page-link'>{item.html}</span>
+                        </div>
+                    )
+                } else {
+                    if (item.disabled) {
+                        return (
+                            <div
+                                className='active rounded border border-neutral-400 bg-gray-300 px-3 py-1 text-black/40 opacity-70 dark:border-neutral-100 dark:bg-black dark:text-gray-500/60'
+                                key={i.toString()}
+                            >
+                                {item.html}
+                            </div>
+                        )
+                    } else {
+                        return (
+                            <Link
+                                href={searchParams ? `/${href}?${searchParams}` : `/${href}`}
+                                className='active rounded border border-neutral-400 bg-white px-3 py-1 text-blue-950 hover:bg-emerald-100 dark:border-neutral-100 dark:bg-neutral-800 dark:text-gray-50 dark:hover:bg-neutral-600'
+                                key={i.toString()}
+                            >
+                                {item.html}
+                            </Link>
+                        )
+                    }
+                }
+            })}
+        </>
+    )
+}

package/templates/default/components/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

package/templates/default/components/ui/accordion.tsx

@@ -1,53 +1,53 @@
-'use client'
-
-import * as React from 'react'
-import * as AccordionPrimitive from '@radix-ui/react-accordion'
-import { ChevronDownIcon } from '@radix-ui/react-icons'
-
-import { cn } from '@/lib/utils'
-
-const Accordion = AccordionPrimitive.Root
-
-const AccordionItem = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Item>,
-    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
->(({ className, ...props }, ref) => (
-    <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
-))
-AccordionItem.displayName = 'AccordionItem'
-
-const AccordionTrigger = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Trigger>,
-    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
-    <AccordionPrimitive.Header className='flex'>
-        <AccordionPrimitive.Trigger
-            ref={ref}
-            className={cn(
-                'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
-                className,
-            )}
-            {...props}
-        >
-            {children}
-            <ChevronDownIcon className='text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200' />
-        </AccordionPrimitive.Trigger>
-    </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
-
-const AccordionContent = React.forwardRef<
-    React.ElementRef<typeof AccordionPrimitive.Content>,
-    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-    <AccordionPrimitive.Content
-        ref={ref}
-        className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
-        {...props}
-    >
-        <div className={cn('pt-0 pb-4', className)}>{children}</div>
-    </AccordionPrimitive.Content>
-))
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
-
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+'use client'
+
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDownIcon } from '@radix-ui/react-icons'
+
+import { cn } from '@/lib/utils'
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Item>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+    <AccordionPrimitive.Item ref={ref} className={cn('border-b', className)} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+const AccordionTrigger = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Header className='flex'>
+        <AccordionPrimitive.Trigger
+            ref={ref}
+            className={cn(
+                'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+            <ChevronDownIcon className='text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200' />
+        </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+    React.ElementRef<typeof AccordionPrimitive.Content>,
+    React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+    <AccordionPrimitive.Content
+        ref={ref}
+        className='data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm'
+        {...props}
+    >
+        <div className={cn('pt-0 pb-4', className)}>{children}</div>
+    </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }