create-nextjs-cms 0.9.30 → 0.9.31

package/templates/default/components/pages/admins-page.tsx

@@ -1,43 +1,43 @@
-'use client'
-
-import AdminCard from '@/components/admin/admin-card'
-import { useI18n } from 'nextjs-cms/translations/client'
-import NewAdminForm from '@/components/admin/new-admin-form'
-import ContainerBox from '@/components/container-box'
-import { trpc } from '@/app/_trpc/client'
-import ErrorComponent from '@/components/feedback/error-component'
-
-const AdminsPage = () => {
-    const t = useI18n()
-    const [data, {refetch}] = trpc.admins.list.useSuspenseQuery()
-
-    if (data.error) {
-        return <ErrorComponent message={data.error.message} />
-    }
-    
-    return (
-        <div className='w-full'>
-            <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
-                <h1 className='text-3xl'>{t('admins')}</h1>
-            </div>
-
-            <div className='flex flex-col gap-2 p-4'>
-                <ContainerBox title={t('createNewAdmin')}>
-                    {data && data.privileges && <NewAdminForm action={() => refetch()} privileges={data.privileges} />}
-                </ContainerBox>
-
-                {data && data.admins && data.admins.length > 0 && (
-                    <ContainerBox title={t('adminsList')}>
-                        <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
-                            {data.admins.map((admin) => (
-                                <AdminCard key={admin.id} action={() => refetch()} admin={admin} />
-                            ))}
-                        </div>
-                    </ContainerBox>
-                )}
-            </div>
-        </div>
-    )
-}
-
-export default AdminsPage
+'use client'
+
+import AdminCard from '@/components/admin/admin-card'
+import { useI18n } from 'nextjs-cms/translations/client'
+import NewAdminForm from '@/components/admin/new-admin-form'
+import ContainerBox from '@/components/container-box'
+import { trpc } from '@/app/_trpc/client'
+import ErrorComponent from '@/components/feedback/error-component'
+
+const AdminsPage = () => {
+    const t = useI18n()
+    const [data, {refetch}] = trpc.admins.list.useSuspenseQuery()
+
+    if (data.error) {
+        return <ErrorComponent message={data.error.message} />
+    }
+    
+    return (
+        <div className='w-full'>
+            <div className='bg-linear-to-r from-sky-200 via-emerald-300 to-blue-600 p-8 font-extrabold text-foreground dark:from-blue-800 dark:via-amber-700 dark:to-rose-900'>
+                <h1 className='text-3xl'>{t('admins')}</h1>
+            </div>
+
+            <div className='flex flex-col gap-2 p-4'>
+                <ContainerBox title={t('createNewAdmin')}>
+                    {data && data.privileges && <NewAdminForm action={() => refetch()} privileges={data.privileges} />}
+                </ContainerBox>
+
+                {data && data.admins && data.admins.length > 0 && (
+                    <ContainerBox title={t('adminsList')}>
+                        <div className='mt-2 grid w-full grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3'>
+                            {data.admins.map((admin) => (
+                                <AdminCard key={admin.id} action={() => refetch()} admin={admin} />
+                            ))}
+                        </div>
+                    </ContainerBox>
+                )}
+            </div>
+        </div>
+    )
+}
+
+export default AdminsPage

package/templates/default/components/pages/browse-page.tsx

@@ -1,106 +1,106 @@
-'use client'
-
-import { useRef } from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import SectionItemCard from '@/components/sections/section-item-card'
-import ContainerBox from '@/components/container-box'
-import Pagination from '@/components/pagination/pagination'
-import { Alert, AlertDescription } from '@/components/ui/alert'
-import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
-import { Input } from '@/components/ui/input'
-import { Button } from '@/components/ui/button'
-import { useRouter, useSearchParams } from 'next/navigation'
-import { trpc } from '@/app/_trpc/client'
-import { capitalizeWords } from 'nextjs-cms/utils'
-import ErrorComponent from '@/components/feedback/error-component'
-
-export default function BrowsePage({ section, page }: { section: string; page: string }) {
-    const t = useI18n()
-    const pageInt = parseInt(page) ?? 1
-    const params = useSearchParams()
-    const router = useRouter()
-    const q = params.get('q') ?? ''
-    const searchInputRef = useRef<HTMLInputElement>(null)
-    const [data, {refetch}] = trpc.hasItemsSections.listItems.useSuspenseQuery({
-        sectionName: section,
-        page: pageInt,
-        q,
-    })
-
-    if (data.error) {
-            return <ErrorComponent message={data.error.message} />
-    }
-
-    return (
-        <div>
-            <div className='text-foreground relative z-1 border-b-2 p-8 pt-12 font-extrabold'>
-                <div className='absolute top-0 left-0 z-2 h-4 w-full bg-linear-to-r from-sky-300 via-gray-300 to-blue-400'></div>
-                <h1 className='text-3xl'>{data?.section?.title}</h1>
-            </div>
-            <div className='p-4'>
-                {data?.section?.hasSearch ? (
-                    <Card className='border-accent-foreground mb-4 border'>
-                        <form
-                            onSubmit={(event) => {
-                                event.preventDefault()
-                                event.stopPropagation()
-
-                                router.push(
-                                    decodeURIComponent(`/browse/${section}?q=${searchInputRef.current?.value || ''}`),
-                                )
-                            }}
-                        >
-                            <CardHeader>
-                                <CardTitle>{t('search')} {data?.section?.title}</CardTitle>
-                                {/*<CardDescription>Search by title</CardDescription>*/}
-                            </CardHeader>
-                            <CardContent>
-                                <Input
-                                    className='border-accent-foreground bg-input'
-                                    ref={searchInputRef}
-                                    placeholder={`${capitalizeWords(t('search'))}...`}
-                                    defaultValue={q || ''}
-                                />
-                            </CardContent>
-                            <CardFooter className='border-t px-6 py-4'>
-                                <Button>{capitalizeWords(t('search'))}</Button>
-                            </CardFooter>
-                        </form>
-                    </Card>
-                ) : null}
-                <ContainerBox title={t('browse')}>
-                    
-                        
-                            { data.items && data.items.length > 0 ? (
-                                <div className='mt-2 grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
-                                    {data.items.map((item, index: number) => (
-                                        <SectionItemCard
-                                            key={`${data.section.name}-${item.id}-${index}`}
-                                            item={item}
-                                            sectionName={data.section.name}
-                                            action={() => refetch()}
-                                        />
-                                    ))}
-                                </div>
-                            ) : (
-                                <Alert variant='default' className='bg-primary text-primary-foreground my-8'>
-                                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
-                                </Alert>
-                            )}
-                     
-                </ContainerBox>
-                {data?.totalCount && data?.totalCount > 0 ? (
-                    <Pagination
-                        page={pageInt}
-                        totalCount={data?.totalCount}
-                        limit={12}
-                        route={`browse/${section}`}
-                        lang='en'
-                        paginationLinksToShow={4}
-                        searchParams={q ? `q=${q}` : null}
-                    />
-                ) : null}
-            </div>
-        </div>
-    )
-}
+'use client'
+
+import { useRef } from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import SectionItemCard from '@/components/sections/section-item-card'
+import ContainerBox from '@/components/container-box'
+import Pagination from '@/components/pagination/pagination'
+import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { useRouter, useSearchParams } from 'next/navigation'
+import { trpc } from '@/app/_trpc/client'
+import { capitalizeWords } from 'nextjs-cms/utils'
+import ErrorComponent from '@/components/feedback/error-component'
+
+export default function BrowsePage({ section, page }: { section: string; page: string }) {
+    const t = useI18n()
+    const pageInt = parseInt(page) ?? 1
+    const params = useSearchParams()
+    const router = useRouter()
+    const q = params.get('q') ?? ''
+    const searchInputRef = useRef<HTMLInputElement>(null)
+    const [data, {refetch}] = trpc.hasItemsSections.listItems.useSuspenseQuery({
+        sectionName: section,
+        page: pageInt,
+        q,
+    })
+
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
+
+    return (
+        <div>
+            <div className='text-foreground relative z-1 border-b-2 p-8 pt-12 font-extrabold'>
+                <div className='absolute top-0 left-0 z-2 h-4 w-full bg-linear-to-r from-sky-300 via-gray-300 to-blue-400'></div>
+                <h1 className='text-3xl'>{data?.section?.title}</h1>
+            </div>
+            <div className='p-4'>
+                {data?.section?.hasSearch ? (
+                    <Card className='border-accent-foreground mb-4 border'>
+                        <form
+                            onSubmit={(event) => {
+                                event.preventDefault()
+                                event.stopPropagation()
+
+                                router.push(
+                                    decodeURIComponent(`/browse/${section}?q=${searchInputRef.current?.value || ''}`),
+                                )
+                            }}
+                        >
+                            <CardHeader>
+                                <CardTitle>{t('search')} {data?.section?.title}</CardTitle>
+                                {/*<CardDescription>Search by title</CardDescription>*/}
+                            </CardHeader>
+                            <CardContent>
+                                <Input
+                                    className='border-accent-foreground bg-input'
+                                    ref={searchInputRef}
+                                    placeholder={`${capitalizeWords(t('search'))}...`}
+                                    defaultValue={q || ''}
+                                />
+                            </CardContent>
+                            <CardFooter className='border-t px-6 py-4'>
+                                <Button>{capitalizeWords(t('search'))}</Button>
+                            </CardFooter>
+                        </form>
+                    </Card>
+                ) : null}
+                <ContainerBox title={t('browse')}>
+                    
+                        
+                            { data.items && data.items.length > 0 ? (
+                                <div className='mt-2 grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'>
+                                    {data.items.map((item, index: number) => (
+                                        <SectionItemCard
+                                            key={`${data.section.name}-${item.id}-${index}`}
+                                            item={item}
+                                            sectionName={data.section.name}
+                                            action={() => refetch()}
+                                        />
+                                    ))}
+                                </div>
+                            ) : (
+                                <Alert variant='default' className='bg-primary text-primary-foreground my-8'>
+                                    <AlertDescription className='font-bold'>{t('noItems')}</AlertDescription>
+                                </Alert>
+                            )}
+                     
+                </ContainerBox>
+                {data?.totalCount && data?.totalCount > 0 ? (
+                    <Pagination
+                        page={pageInt}
+                        totalCount={data?.totalCount}
+                        limit={12}
+                        route={`browse/${section}`}
+                        lang='en'
+                        paginationLinksToShow={4}
+                        searchParams={q ? `q=${q}` : null}
+                    />
+                ) : null}
+            </div>
+        </div>
+    )
+}

package/templates/default/components/pages/categorized-section-page.tsx

@@ -1,31 +1,31 @@
-'use client'
-
-import { trpc } from '@/app/_trpc/client'
-import CategorySectionSelectInput from '@/components/sections/category-section-select-input'
-import ErrorComponent from '@/components/feedback/error-component'
-
-export default function CategorizedSectionPage({ section }: { section: string }) {
-    const [data, {refetch}] = trpc.categorySections.get.useSuspenseQuery({
-        sectionName: section,
-    })
-
-    if (data.error) {
-            return <ErrorComponent message={data.error.message} />
-    }
-
-    return (
-        <div>
-            <div className='w-full'>
-                <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
-                    <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-rose-200 via-rose-400 to-sky-400'></div>{' '}
-                    {data && data.section && <h1 className='text-3xl'>{data?.section?.title.section}</h1>}
-                </div>
-                <div className='flex w-full flex-col'>
-                    <div className='rounded-xl p-4 shadow-sm'>
-                        {data && data.data ? <CategorySectionSelectInput refetch={refetch} input={data.data} /> : null}
-                    </div>
-                </div>
-            </div>
-        </div>
-    )
-}
+'use client'
+
+import { trpc } from '@/app/_trpc/client'
+import CategorySectionSelectInput from '@/components/sections/category-section-select-input'
+import ErrorComponent from '@/components/feedback/error-component'
+
+export default function CategorizedSectionPage({ section }: { section: string }) {
+    const [data, {refetch}] = trpc.categorySections.get.useSuspenseQuery({
+        sectionName: section,
+    })
+
+    if (data.error) {
+            return <ErrorComponent message={data.error.message} />
+    }
+
+    return (
+        <div>
+            <div className='w-full'>
+                <div className='relative z-1 border-b-2 p-8 pt-12 font-extrabold text-foreground'>
+                    <div className='absolute left-0 top-0 z-2 h-4 w-full bg-linear-to-r from-rose-200 via-rose-400 to-sky-400'></div>{' '}
+                    {data && data.section && <h1 className='text-3xl'>{data?.section?.title.section}</h1>}
+                </div>
+                <div className='flex w-full flex-col'>
+                    <div className='rounded-xl p-4 shadow-sm'>
+                        {data && data.data ? <CategorySectionSelectInput refetch={refetch} input={data.data} /> : null}
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}

package/templates/default/components/pages/dashboard-page-alt.tsx

@@ -1,45 +1,45 @@
-import { Metadata } from 'next'
-import Image from 'next/image'
-import { useI18n } from 'nextjs-cms/translations/client'
-
-export const metadata: Metadata = {
-    title: 'Dashboard',
-    description: 'Example dashboard app built using the components.',
-}
-
-export default function DashboardPage() {
-    const t = useI18n()
-    return (
-        <>
-            <div className='md:hidden'>
-                <Image
-                    src='/examples/dashboard-light.png'
-                    width={1280}
-                    height={866}
-                    alt={t('dashboard') as string}
-                    className='block dark:hidden'
-                />
-                <Image
-                    src='/examples/dashboard-dark.png'
-                    width={1280}
-                    height={866}
-                    alt={t('dashboard') as string}
-                    className='hidden dark:block'
-                />
-            </div>
-            <div className='hidden flex-col md:flex'>
-                <div className='border-b'>
-                    <div className='flex h-16 items-center px-4'>
-                        <div className='ml-auto flex items-center space-x-4'></div>
-                    </div>
-                </div>
-                <div className='flex-1 space-y-4 p-8 pt-6'>
-                    <div className='flex items-center justify-between space-y-2'>
-                        <h2 className='text-3xl font-bold tracking-tight'>{t('dashboard')}</h2>
-                        <div className='flex items-center space-x-2'></div>
-                    </div>
-                </div>
-            </div>
-        </>
-    )
-}
+import { Metadata } from 'next'
+import Image from 'next/image'
+import { useI18n } from 'nextjs-cms/translations/client'
+
+export const metadata: Metadata = {
+    title: 'Dashboard',
+    description: 'Example dashboard app built using the components.',
+}
+
+export default function DashboardPage() {
+    const t = useI18n()
+    return (
+        <>
+            <div className='md:hidden'>
+                <Image
+                    src='/examples/dashboard-light.png'
+                    width={1280}
+                    height={866}
+                    alt={t('dashboard') as string}
+                    className='block dark:hidden'
+                />
+                <Image
+                    src='/examples/dashboard-dark.png'
+                    width={1280}
+                    height={866}
+                    alt={t('dashboard') as string}
+                    className='hidden dark:block'
+                />
+            </div>
+            <div className='hidden flex-col md:flex'>
+                <div className='border-b'>
+                    <div className='flex h-16 items-center px-4'>
+                        <div className='ml-auto flex items-center space-x-4'></div>
+                    </div>
+                </div>
+                <div className='flex-1 space-y-4 p-8 pt-6'>
+                    <div className='flex items-center justify-between space-y-2'>
+                        <h2 className='text-3xl font-bold tracking-tight'>{t('dashboard')}</h2>
+                        <div className='flex items-center space-x-2'></div>
+                    </div>
+                </div>
+            </div>
+        </>
+    )
+}