create-nextjs-cms 0.8.9 → 0.9.0

package/templates/default/components/ProtectedVideo.tsx

@@ -1,76 +1,76 @@
-import React, { useEffect } from 'react'
-import { useRefreshToken } from 'nextjs-cms/auth/hooks'
-import { useSession } from 'nextjs-cms/auth/react'
-
-const ProtectedVideo = ({
-    section,
-    fieldName,
-    file,
-    width,
-    height,
-    className = 'rounded-3xl object-cover',
-}: {
-    section: string
-    fieldName: string
-    file: string
-    width: number
-    height: number
-    className?: string
-}) => {
-    const refresh = useRefreshToken()
-    const ref = React.useRef<HTMLVideoElement>(null)
-    const [currentTime, setCurrentTime] = React.useState(0)
-    const [isSeeking, setIsSeeking] = React.useState(false)
-
-    const session = useSession()
-    useEffect(() => {
-        if (ref.current && currentTime) {
-            ref.current.currentTime = currentTime
-            ref.current.play().then(() => {})
-        }
-    }, [session])
-
-    return (
-        <div className={className}>
-            {/**
-             * The video will stream as long as the access token is valid
-             * If the access token expires, the video will pause
-             * A refresh token request will be sent to `/api/auth/refresh`
-             * If the refresh token is valid, the video will resume playing
-             * If the refresh token is invalid, the user will be logged out
-             */}
-            <video
-                ref={ref}
-                src={`/api/video?sectionName=${section}&fieldName=${fieldName}&name=${file}`}
-                className='max-w-full'
-                width={width}
-                controls={true}
-                height={height}
-                onErrorCapture={async (e) => {
-                    if (isSeeking) return
-                    setIsSeeking(true)
-                    // console.log('seeked')
-                    /**
-                     * Pause the video
-                     */
-                    e.currentTarget.pause()
-                    /**
-                     * Get the current time of the video and save it in the state
-                     */
-                    setCurrentTime(e.currentTarget.currentTime)
-                    /**
-                     * Refresh the access token
-                     * This will trigger the `useEffect` hook
-                     * and set the current time of the video
-                     * to the time it was paused at
-                     * and play the video
-                     */
-                    await refresh()
-                    setIsSeeking(false)
-                }}
-            />
-        </div>
-    )
-}
-
-export default ProtectedVideo
+import React, { useEffect } from 'react'
+import { useRefreshToken } from 'nextjs-cms/auth/hooks'
+import { useSession } from 'nextjs-cms/auth/react'
+
+const ProtectedVideo = ({
+    section,
+    fieldName,
+    file,
+    width,
+    height,
+    className = 'rounded-3xl object-cover',
+}: {
+    section: string
+    fieldName: string
+    file: string
+    width: number
+    height: number
+    className?: string
+}) => {
+    const refresh = useRefreshToken()
+    const ref = React.useRef<HTMLVideoElement>(null)
+    const [currentTime, setCurrentTime] = React.useState(0)
+    const [isSeeking, setIsSeeking] = React.useState(false)
+
+    const session = useSession()
+    useEffect(() => {
+        if (ref.current && currentTime) {
+            ref.current.currentTime = currentTime
+            ref.current.play().then(() => {})
+        }
+    }, [session])
+
+    return (
+        <div className={className}>
+            {/**
+             * The video will stream as long as the access token is valid
+             * If the access token expires, the video will pause
+             * A refresh token request will be sent to `/api/auth/refresh`
+             * If the refresh token is valid, the video will resume playing
+             * If the refresh token is invalid, the user will be logged out
+             */}
+            <video
+                ref={ref}
+                src={`/api/video?sectionName=${section}&fieldName=${fieldName}&name=${file}`}
+                className='max-w-full'
+                width={width}
+                controls={true}
+                height={height}
+                onErrorCapture={async (e) => {
+                    if (isSeeking) return
+                    setIsSeeking(true)
+                    // console.log('seeked')
+                    /**
+                     * Pause the video
+                     */
+                    e.currentTarget.pause()
+                    /**
+                     * Get the current time of the video and save it in the state
+                     */
+                    setCurrentTime(e.currentTarget.currentTime)
+                    /**
+                     * Refresh the access token
+                     * This will trigger the `useEffect` hook
+                     * and set the current time of the video
+                     * to the time it was paused at
+                     * and play the video
+                     */
+                    await refresh()
+                    setIsSeeking(false)
+                }}
+            />
+        </div>
+    )
+}
+
+export default ProtectedVideo

package/templates/default/components/SectionIcon.tsx

@@ -1,8 +1,8 @@
-'use client'
-
-import {DynamicIcon} from 'lucide-react/dynamic'
-import type { IconName } from 'lucide-react/dynamic'
-
-export default function SectionIcon({ name, className }: { name: string; className?: string }) {
-    return <DynamicIcon name={name as IconName} className={className} />
-}
+'use client'
+
+import {DynamicIcon} from 'lucide-react/dynamic'
+import type { IconName } from 'lucide-react/dynamic'
+
+export default function SectionIcon({ name, className }: { name: string; className?: string }) {
+    return <DynamicIcon name={name as IconName} className={className} />
+}

package/templates/default/components/SectionItemCard.tsx

@@ -1,144 +1,144 @@
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import useModal from '@/hooks/useModal'
-import ProtectedImage from '@/components/ProtectedImage'
-import SectionItemStatusBadge from '@/components/SectionItemStatusBadge'
-import { displayDateFromString } from 'nextjs-cms/utils'
-import Link from 'next/link'
-import { CardTitle, CardHeader, CardFooter, Card, CardContent } from '@/components/ui/card'
-import { Button } from '@/components/ui/button'
-import { PersonIcon } from '@radix-ui/react-icons'
-import { trpc } from '@/app/_trpc/client'
-import type { RouterOutputs } from 'nextjs-cms/api'
-
-// Used to get elements of array types as types
-type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never
-
-export default function SectionItemCard({
-    sectionName,
-    item,
-    action,
-}: {
-    sectionName: string
-    item: ArrElement<RouterOutputs['hasItemsSections']['listItems']['items']>
-    action: any
-}) {
-    const t = useI18n()
-    const { setModal } = useModal()
-    const utils = trpc.useUtils()
-    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
-        onError: (error) => {
-            setModal({
-                title: t('delete'),
-                body: (
-                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
-                        {error.message}
-                    </div>
-                ),
-                headerColor: 'bg-red-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-
-        onSuccess: async (data) => {
-            await utils.hasItemsSections.listItems.invalidate({
-                sectionName: sectionName,
-            })
-            action()
-            setModal({
-                title: t('delete'),
-                body: (
-                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
-                        {t('itemDeletedSuccessfully')}
-                    </div>
-                ),
-                headerColor: 'bg-green-700',
-                titleColor: 'text-white',
-                lang: 'en',
-            })
-        },
-    })
-    const handleDelete = async () => {
-        deleteMutation.mutate({
-            sectionName: sectionName,
-            sectionItemId: item.id,
-        })
-    }
-
-    return (
-        <>
-            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow-sm'>
-                {item.coverPhoto ? (
-                    <div className='relative h-[200px]'>
-                        {[0, 1].includes(item.permission) ? <SectionItemStatusBadge status={item.permission} /> : null}
-                        <ProtectedImage
-                            className='h-64 w-full object-cover'
-                            photo={item.coverPhoto}
-                            section={sectionName}
-                            isThumb={true}
-                            alt={'item'}
-                            width={100}
-                            height={50}
-                            fill={true}
-                        />
-                    </div>
-                ) : null}
-                <CardHeader className='p-6'>
-                    <CardTitle className='text-xl font-bold'>{item.headingTitle}</CardTitle>
-                </CardHeader>
-                <CardContent className='mt-2'>
-                    <div className='flex flex-row flex-wrap gap-1'>
-                        <PersonIcon fontSize='small' /> {item.createdBy},{' '}
-                        {displayDateFromString(item.createdAt, 'en', false, ',')}
-                    </div>
-                </CardContent>
-                <CardFooter className='absolute bottom-0 start-0 flex h-[85px] w-full justify-between p-6'>
-                    <Link
-                        href={`/edit/${sectionName}/${item.id}`}
-                        className='rounded bg-primary px-3 py-1 font-semibold text-primary-foreground'
-                    >
-                        {t('edit')}
-                    </Link>
-                    <Button
-                        onClick={() => {
-                            setModal({
-                                title: t('delete'),
-                                body: (
-                                    <div className='p-4'>
-                                        <div className='flex flex-col gap-4'>
-                                            <div>{t('deleteItemText')}</div>
-                                            <div className='flex gap-2'>
-                                                <button
-                                                    className='rounded bg-success px-2 py-1 text-success-foreground'
-                                                    onClick={handleDelete}
-                                                >
-                                                    Yes
-                                                </button>
-                                                <button
-                                                    className='rounded bg-destructive px-2 py-1 text-destructive-foreground'
-                                                    onClick={() => {
-                                                        setModal(null)
-                                                    }}
-                                                >
-                                                    No
-                                                </button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                ),
-                                headerColor: 'bg-red-700',
-                                titleColor: 'text-white',
-                                lang: 'en',
-                            })
-                        }}
-                        variant='destructive'
-                        className='rounded px-3 py-1 font-semibold'
-                    >
-                        {t('delete')}
-                    </Button>
-                </CardFooter>
-            </Card>
-        </>
-    )
-}
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import useModal from '@/hooks/useModal'
+import ProtectedImage from '@/components/ProtectedImage'
+import SectionItemStatusBadge from '@/components/SectionItemStatusBadge'
+import { displayDateFromString } from 'nextjs-cms/utils'
+import Link from 'next/link'
+import { CardTitle, CardHeader, CardFooter, Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { PersonIcon } from '@radix-ui/react-icons'
+import { trpc } from '@/app/_trpc/client'
+import type { RouterOutputs } from 'nextjs-cms/api'
+
+// Used to get elements of array types as types
+type ArrElement<ArrType> = ArrType extends readonly (infer ElementType)[] ? ElementType : never
+
+export default function SectionItemCard({
+    sectionName,
+    item,
+    action,
+}: {
+    sectionName: string
+    item: ArrElement<RouterOutputs['hasItemsSections']['listItems']['items']>
+    action: any
+}) {
+    const t = useI18n()
+    const { setModal } = useModal()
+    const utils = trpc.useUtils()
+    const deleteMutation = trpc.hasItemsSections.deleteItem.useMutation({
+        onError: (error) => {
+            setModal({
+                title: t('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-red-500 bg-red-100 p-2 text-red-800'>
+                        {error.message}
+                    </div>
+                ),
+                headerColor: 'bg-red-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+
+        onSuccess: async (data) => {
+            await utils.hasItemsSections.listItems.invalidate({
+                sectionName: sectionName,
+            })
+            action()
+            setModal({
+                title: t('delete'),
+                body: (
+                    <div className='rounded border-2 border-dashed border-green-500 bg-green-100 p-2 text-green-800'>
+                        {t('itemDeletedSuccessfully')}
+                    </div>
+                ),
+                headerColor: 'bg-green-700',
+                titleColor: 'text-white',
+                lang: 'en',
+            })
+        },
+    })
+    const handleDelete = async () => {
+        deleteMutation.mutate({
+            sectionName: sectionName,
+            sectionItemId: item.id,
+        })
+    }
+
+    return (
+        <>
+            <Card className='relative mx-auto w-full max-w-md overflow-hidden rounded-lg border-secondary-foreground pb-[85px] shadow-sm'>
+                {item.coverPhoto ? (
+                    <div className='relative h-[200px]'>
+                        {[0, 1].includes(item.permission) ? <SectionItemStatusBadge status={item.permission} /> : null}
+                        <ProtectedImage
+                            className='h-64 w-full object-cover'
+                            photo={item.coverPhoto}
+                            section={sectionName}
+                            isThumb={true}
+                            alt={'item'}
+                            width={100}
+                            height={50}
+                            fill={true}
+                        />
+                    </div>
+                ) : null}
+                <CardHeader className='p-6'>
+                    <CardTitle className='text-xl font-bold'>{item.headingTitle}</CardTitle>
+                </CardHeader>
+                <CardContent className='mt-2'>
+                    <div className='flex flex-row flex-wrap gap-1'>
+                        <PersonIcon fontSize='small' /> {item.createdBy},{' '}
+                        {displayDateFromString(item.createdAt, 'en', false, ',')}
+                    </div>
+                </CardContent>
+                <CardFooter className='absolute bottom-0 start-0 flex h-[85px] w-full justify-between p-6'>
+                    <Link
+                        href={`/edit/${sectionName}/${item.id}`}
+                        className='rounded bg-primary px-3 py-1 font-semibold text-primary-foreground'
+                    >
+                        {t('edit')}
+                    </Link>
+                    <Button
+                        onClick={() => {
+                            setModal({
+                                title: t('delete'),
+                                body: (
+                                    <div className='p-4'>
+                                        <div className='flex flex-col gap-4'>
+                                            <div>{t('deleteItemText')}</div>
+                                            <div className='flex gap-2'>
+                                                <button
+                                                    className='rounded bg-success px-2 py-1 text-success-foreground'
+                                                    onClick={handleDelete}
+                                                >
+                                                    Yes
+                                                </button>
+                                                <button
+                                                    className='rounded bg-destructive px-2 py-1 text-destructive-foreground'
+                                                    onClick={() => {
+                                                        setModal(null)
+                                                    }}
+                                                >
+                                                    No
+                                                </button>
+                                            </div>
+                                        </div>
+                                    </div>
+                                ),
+                                headerColor: 'bg-red-700',
+                                titleColor: 'text-white',
+                                lang: 'en',
+                            })
+                        }}
+                        variant='destructive'
+                        className='rounded px-3 py-1 font-semibold'
+                    >
+                        {t('delete')}
+                    </Button>
+                </CardFooter>
+            </Card>
+        </>
+    )
+}

package/templates/default/components/SectionItemStatusBadge.tsx

@@ -1,17 +1,17 @@
-import React from 'react'
-import { useI18n } from 'nextjs-cms/translations/client'
-import { Badge } from '@/components/ui/badge'
-
-const SectionItemStatusBadge = ({ status }: { status: number }) => {
-    const t = useI18n()
-    return (
-        <Badge
-            variant={status === 1 ? 'success' : 'destructive'}
-            className='absolute top-3 shadow-sm left-3 z-30 font-bold'
-        >
-            {status === 1 ? t('approved') : t('pendingApproval')}
-        </Badge>
-    )
-}
-
-export default SectionItemStatusBadge
+import React from 'react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { Badge } from '@/components/ui/badge'
+
+const SectionItemStatusBadge = ({ status }: { status: number }) => {
+    const t = useI18n()
+    return (
+        <Badge
+            variant={status === 1 ? 'success' : 'destructive'}
+            className='absolute top-3 shadow-sm left-3 z-30 font-bold'
+        >
+            {status === 1 ? t('approved') : t('pendingApproval')}
+        </Badge>
+    )
+}
+
+export default SectionItemStatusBadge