create-nextjs-cms 0.9.22 → 0.9.24

package/templates/default/components/{NewAdminForm.tsx → admin/new-admin-form.tsx}

@@ -1,12 +1,12 @@
 import { useI18n } from 'nextjs-cms/translations/client'
 import React from 'react'
-import useModal from '@/hooks/useModal'
-import InfoCard from '@/components/InfoCard'
+import { useModal } from '@/components/feedback/modal-context'
+import InfoCard from '@/components/feedback/info-card'
 import { useToast } from '@/components/ui/use-toast'
 import { trpc } from '@/app/_trpc/client'
-import AdminRoleCard from '@/components/AdminPrivilegeCard'
+import AdminRoleCard from '@/components/admin/admin-privilege-card'
 import { Button } from '@/components/ui/button'
-import type { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from '@/app/_trpc/types'
 
 export default function NewAdminForm({
     privileges,

package/templates/default/components/{ContainerBox.tsx → container-box.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-// import { Card, CardContent, CardHeader, CardTitle } from './ui/card'
+// import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 export default function ContainerBox({ children, title }: { children: React.ReactNode; title?: string }) {
     return (

package/templates/default/components/{ErrorComponent.tsx → feedback/error-component.tsx}

@@ -1,4 +1,4 @@
-import { Alert, AlertDescription } from './ui/alert'
+import { Alert, AlertDescription } from '@/components/ui/alert'
 import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 
 export default function ErrorComponent({ message }: { message: string }) {

package/templates/default/{context/ModalProvider.tsx → components/feedback/modal-context.tsx}

@@ -1,53 +1,56 @@
-'use client'
-
-import React, { createContext, useState } from 'react'
-
-export type ModalResponse = {
-    message: React.ReactNode | string
-    messageColor?: string
-    borderColor?: string
-    bgColor?: string
-}
-
-export type Modal = {
-    title: string
-    titleColor: string
-    headerColor: string
-    body: React.ReactNode
-    lang: string
-    size?: 'sm' | 'md' | 'lg' | 'xl'
-}
-
-const ModalContext = createContext<{
-    modal: Modal | null
-    setModal: React.Dispatch<React.SetStateAction<Modal | null>>
-    modalResponse: ModalResponse | null
-    setModalResponse: React.Dispatch<React.SetStateAction<ModalResponse | null>>
-}>(
-    {} as {
-        modal: Modal | null
-        setModal: React.Dispatch<React.SetStateAction<Modal | null>>
-        modalResponse: ModalResponse | null
-        setModalResponse: React.Dispatch<React.SetStateAction<ModalResponse | null>>
-    },
-)
-
-export const ModalProvider = ({ children }: { children: React.ReactNode }) => {
-    const [modal, setModal] = useState<Modal | null>(null)
-    const [modalResponse, setModalResponse] = useState<ModalResponse | null>(null)
-
-    return (
-        <ModalContext.Provider
-            value={{
-                modal,
-                setModal,
-                modalResponse,
-                setModalResponse,
-            }}
-        >
-            {children}
-        </ModalContext.Provider>
-    )
-}
-
-export default ModalContext
+'use client'
+
+import React, { createContext, useContext, useState } from 'react'
+
+export type ModalResponse = {
+    message: React.ReactNode | string
+    messageColor?: string
+    borderColor?: string
+    bgColor?: string
+}
+
+export type Modal = {
+    title: string
+    titleColor: string
+    headerColor: string
+    body: React.ReactNode
+    lang: string
+    size?: 'sm' | 'md' | 'lg' | 'xl'
+}
+
+type ModalContextValue = {
+    modal: Modal | null
+    setModal: React.Dispatch<React.SetStateAction<Modal | null>>
+    modalResponse: ModalResponse | null
+    setModalResponse: React.Dispatch<React.SetStateAction<ModalResponse | null>>
+}
+
+const ModalContext = createContext<ModalContextValue | null>(null)
+
+export function ModalProvider({ children }: { children: React.ReactNode }) {
+    const [modal, setModal] = useState<Modal | null>(null)
+    const [modalResponse, setModalResponse] = useState<ModalResponse | null>(null)
+
+    return (
+        <ModalContext.Provider
+            value={{
+                modal,
+                setModal,
+                modalResponse,
+                setModalResponse,
+            }}
+        >
+            {children}
+        </ModalContext.Provider>
+    )
+}
+
+export function useModal() {
+    const context = useContext(ModalContext)
+
+    if (!context) {
+        throw new Error('useModal must be used within ModalProvider')
+    }
+
+    return context
+}

package/templates/default/components/{Modal.tsx → feedback/modal.tsx}

@@ -1,7 +1,7 @@
 'use client'
 
 import { Suspense, useEffect, useRef, useState } from 'react'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import classNames from 'classnames'
 import { X, Loader2 } from 'lucide-react'
 

package/templates/default/components/form/{FormInputs.tsx → form-inputs.tsx}

@@ -1,22 +1,22 @@
 import type { FieldClientConfig } from 'nextjs-cms/core/fields'
 import React from 'react'
-import CheckboxFormInput from '@/components/form/inputs/CheckboxFormInput'
-import ColorFormInput from '@/components/form/inputs/ColorFormInput'
-import DateFormInput from '@/components/form/inputs/DateFormInput'
-import DateRangeFormInput from '@/components/form/inputs/DateRangeFormInput'
-import DocumentFormInput from '@/components/form/inputs/DocumentFormInput'
-import MapFormInput from '@/components/form/inputs/MapFormInput'
-import MultipleSelectFormInput from '@/components/form/inputs/MultipleSelectFormInput'
-import NumberFormInput from '@/components/form/inputs/NumberFormInput'
-import PasswordFormInput from '@/components/form/inputs/PasswordFormInput'
-import PhotoFormInput from '@/components/form/inputs/PhotoFormInput'
-import RichTextFormInput from '@/components/form/inputs/RichTextFormInput'
-import SelectFormInput from '@/components/form/inputs/SelectFormInput'
-import SlugFormInput from '@/components/form/inputs/SlugFormInput'
-import TagsFormInput from '@/components/form/inputs/TagsFormInput'
-import TextareaFormInput from '@/components/form/inputs/TextareaFormInput'
-import TextFormInput from '@/components/form/inputs/TextFormInput'
-import VideoFormInput from '@/components/form/inputs/VideoFormInput'
+import CheckboxFormInput from '@/components/form/inputs/checkbox-form-input'
+import ColorFormInput from '@/components/form/inputs/color-form-input'
+import DateFormInput from '@/components/form/inputs/date-form-input'
+import DateRangeFormInput from '@/components/form/inputs/date-range-form-input'
+import DocumentFormInput from '@/components/form/inputs/document-form-input'
+import MapFormInput from '@/components/form/inputs/map-form-input'
+import MultipleSelectFormInput from '@/components/form/inputs/multiple-select-form-input'
+import NumberFormInput from '@/components/form/inputs/number-form-input'
+import PasswordFormInput from '@/components/form/inputs/password-form-input'
+import PhotoFormInput from '@/components/form/inputs/photo-form-input'
+import RichTextFormInput from '@/components/form/inputs/rich-text-form-input'
+import SelectFormInput from '@/components/form/inputs/select-form-input'
+import SlugFormInput from '@/components/form/inputs/slug-form-input'
+import TagsFormInput from '@/components/form/inputs/tags-form-input'
+import TextareaFormInput from '@/components/form/inputs/textarea-form-input'
+import TextFormInput from '@/components/form/inputs/text-form-input'
+import VideoFormInput from '@/components/form/inputs/video-form-input'
 import {
     CheckboxFieldClientConfig,
     ColorFieldClientConfig,

package/templates/default/components/form/{Form.tsx → form.tsx}

@@ -1,12 +1,11 @@
-import type { RouterOutputs } from 'nextjs-cms/api'
+import type { RouterOutputs } from '@/app/_trpc/types'
 import React, { RefObject, useCallback, useEffect } from 'react'
-import ContainerBox from '@/components/ContainerBox'
-import Dropzone, { DropzoneHandles } from '@/components/Dropzone'
-import { LocalizationProvider } from '@/components/form/ContentLocaleContext'
-import FormInputs from '@/components/form/FormInputs'
+import ContainerBox from '@/components/container-box'
+import Dropzone, { DropzoneHandles } from '@/components/media/dropzone'
+import { LocalizationProvider } from '@/components/form/content-locale-context'
+import FormInputs from '@/components/form/form-inputs'
 import { configLastUpdated } from '@/components/form/helpers/util'
-import NewVariantComponent, { VariantHandles } from '@/components/NewVariantComponent'
-import ProgressBar from '@/components/ProgressBar'
+import ProgressBar from '@/components/feedback/progress-bar'
 import { zodResolver } from '@hookform/resolvers/zod'
 import classNames from 'classnames'
 import { useSession } from 'nextjs-cms/auth/react'
@@ -24,6 +23,7 @@ import {
     SelectFieldClientConfig,
     SelectMultipleFieldClientConfig,
     SlugFieldClientConfig,
+    TagsFieldClientConfig,
     TextAreaFieldClientConfig,
     TextFieldClientConfig,
     VideoFieldClientConfig,
@@ -44,6 +44,7 @@ import {
     selectFieldSchema,
     selectMultipleFieldSchema,
     slugFieldSchema,
+    tagsFieldSchema,
     textareaFieldSchema,
     textFieldSchema,
     videoFieldSchema,
@@ -51,7 +52,7 @@ import {
 import { FormProvider, useForm } from 'react-hook-form'
 import * as z from 'zod'
 
-import PhotoGallery from '../PhotoGallery'
+import PhotoGallery from '@/components/media/photo-gallery'
 
 export const revalidate = 1
 
@@ -59,7 +60,6 @@ export default function Form({
     formType,
     data,
     dropzoneRef,
-    variantRef,
     handleSubmit,
     isSubmitting,
     response,
@@ -102,7 +102,6 @@ export default function Form({
                   | undefined
           }
     dropzoneRef?: RefObject<DropzoneHandles | null>
-    variantRef?: RefObject<VariantHandles[]>
     handleSubmit: any
     isSubmitting: boolean
     response?: any
@@ -230,6 +229,12 @@ export default function Form({
                     })
                     break
 
+                case 'tags':
+                    schema = schema.extend({
+                        [input.name]: tagsFieldSchema(input as TagsFieldClientConfig, language),
+                    })
+                    break
+
                 case 'slug':
                     schema = schema.extend({
                         [input.name]: slugFieldSchema(input as SlugFieldClientConfig, language),
@@ -345,7 +350,8 @@ export default function Form({
                                                             className={classNames({
                                                                 'w-full': buttonType === 'big',
                                                                 'float-end': buttonType === 'small',
-                                                                'bg-linear-to-r rounded px-4 py-2 font-bold text-white drop-shadow-sm': true,
+                                                                'rounded bg-linear-to-r px-4 py-2 font-bold text-white drop-shadow-sm':
+                                                                    true,
                                                                 'from-emerald-700 via-green-700 to-green-500 dark:from-blue-800 dark:via-sky-800 dark:to-slate-500':
                                                                     !isSubmitting,
                                                                 'from-gray-600 via-gray-500 to-gray-400': isSubmitting,

package/templates/default/components/form/helpers/_section-hot-reload.js

@@ -8,4 +8,4 @@ export const revalidate = 0
 
 // @refresh reset
 
-export const configLastUpdated = 1777249094688
+export const configLastUpdated = 1778067978055

package/templates/default/components/form/inputs/{CheckboxFormInput.tsx → checkbox-form-input.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { CheckboxFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 import { Switch } from '@/components/ui/switch'

package/templates/default/components/form/inputs/{ColorFormInput.tsx → color-form-input.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { ColorFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 

package/templates/default/components/form/inputs/{DateFormInput.tsx → date-form-input.tsx}

@@ -1,6 +1,6 @@
 import React from 'react'
 import dayjs from 'dayjs'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'

package/templates/default/components/form/inputs/{DateRangeFormInput.tsx → date-range-form-input.tsx}

@@ -8,7 +8,7 @@ import { CalendarIcon, ChevronDownIcon } from '@radix-ui/react-icons'
 import { Button } from '@/components/ui/button'
 import { Calendar } from '@/components/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import type { DateRangeFieldClientConfig } from 'nextjs-cms/core/fields'
 
 const seasonEmoji: Record<string, string> = {

package/templates/default/components/form/inputs/{DocumentFormInput.tsx → document-form-input.tsx}

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import ProtectedDocument from '@/components/ProtectedDocument'
+import FormInputElement from '@/components/form/form-input-element'
+import ProtectedDocument from '@/components/media/protected-document'
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import { ChevronRight, InfoIcon, Trash2Icon, Undo2Icon, UploadIcon, X } from 'lucide-react'
 import { DocumentFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useI18n } from 'nextjs-cms/translations/client'

package/templates/default/components/form/inputs/{MapFormInput.tsx → map-form-input.tsx}

@@ -1,12 +1,13 @@
 import React, { useEffect } from 'react'
 import { APIProvider, Map, Marker } from '@vis.gl/react-google-maps'
-import ContainerBox from '@/components/ContainerBox'
+import ContainerBox from '@/components/container-box'
 import { Button } from '@/components/ui/button'
-import TooltipComponent from '@/components/TooltipComponent'
+import TooltipComponent from '@/components/feedback/tooltip-component'
 import { useI18n } from 'nextjs-cms/translations/client'
 import { MapFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
+import { env } from '@/env/env'
 
 export default function MapFormInput({ input }: { input: MapFieldClientConfig }) {
     const t = useI18n()
@@ -62,7 +63,7 @@ export default function MapFormInput({ input }: { input: MapFieldClientConfig })
                         onBlur={field.onBlur}
                         ref={field.ref}
                     />
-                    <APIProvider apiKey={process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? ''}>
+                    <APIProvider apiKey={env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY ?? ''}>
                         <Map
                             clickableIcons={false}
                             zoomControl={true}

package/templates/default/components/form/inputs/{MultipleSelectFormInput.tsx → multiple-select-form-input.tsx}

@@ -1,4 +1,4 @@
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { useEffect, useState } from 'react'
 import { SelectMultipleFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'

package/templates/default/components/form/inputs/{NumberFormInput.tsx → number-form-input.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import type { NumberFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 import { isNumber, toNumber } from 'lodash-es'

package/templates/default/components/form/inputs/{PasswordFormInput.tsx → password-form-input.tsx}

@@ -1,5 +1,5 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { PasswordFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'
 

package/templates/default/components/form/inputs/{PhotoFormInput.tsx → photo-form-input.tsx}

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { useI18n } from 'nextjs-cms/translations/client'
-import FormInputElement from '@/components/form/FormInputElement'
-import ProtectedImage from '@/components/ProtectedImage'
+import FormInputElement from '@/components/form/form-input-element'
+import ProtectedImage from '@/components/media/protected-image'
 import Image from 'next/image'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import { ChevronRight, InfoIcon, Trash2Icon, Undo2Icon, UploadIcon, X } from 'lucide-react'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 import { Badge } from '@/components/ui/badge'

package/templates/default/components/form/inputs/{RichTextFormInput.tsx → rich-text-form-input.tsx}

@@ -1,11 +1,11 @@
 import React, { useRef, useState } from 'react'
 import { Editor } from '@tinymce/tinymce-react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 // import { useTheme } from 'next-themes'
-import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
+import { useAxiosPrivate } from 'nextjs-cms/api/client'
 import { RichTextFieldClientConfig } from 'nextjs-cms/core/fields'
 import { FieldError, useFormContext } from 'react-hook-form'
-import { useLocale } from '@/components/form/ContentLocaleContext'
+import { useLocale } from '@/components/form/content-locale-context'
 
 export default function RichTextFormInput({ input }: { input: RichTextFieldClientConfig }) {
     const { setValue, register, formState } = useFormContext()

package/templates/default/components/form/inputs/{SelectFormInput.tsx → select-form-input.tsx}

@@ -1,13 +1,13 @@
 import { useEffect, useState, useMemo } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import SelectBox from '@/components/SelectBox'
-import LoadingSpinners from '@/components/LoadingSpinners'
+import FormInputElement from '@/components/form/form-input-element'
+import SelectBox from '@/components/select-box'
+import LoadingSpinners from '@/components/feedback/loading-spinners'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 import { useI18n } from 'nextjs-cms/translations/client'
 import { useSession } from 'nextjs-cms/auth/react'
 import { trpc } from '@/app/_trpc/client'
 import { SelectFieldClientConfig, SelectOption } from 'nextjs-cms/core/fields'
-import { ConditionalFields } from '@/components/ConditionalFields'
+import { ConditionalFields } from '@/components/sections/conditional-fields'
 import { useController, useFormContext } from 'react-hook-form'
 
 export default function SelectFormInput({

package/templates/default/components/form/inputs/{SlugFormInput.tsx → slug-form-input.tsx}

@@ -1,7 +1,7 @@
 'use client'
 
 import React, { useCallback, useEffect, useRef } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import type { SlugFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useFormContext, useController, useWatch } from 'react-hook-form'
 import { InputGroup, InputGroupInput, InputGroupAddon } from '@/components/ui/input-group'

package/templates/default/components/form/inputs/{TagsFormInput.tsx → tags-form-input.tsx}

@@ -1,4 +1,4 @@
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { useI18n } from 'nextjs-cms/translations/client'
 import { TagsFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useController, useFormContext } from 'react-hook-form'

package/templates/default/components/form/inputs/{TextFormInput.tsx → text-form-input.tsx}

@@ -1,8 +1,8 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import type { TextFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useFormContext, useController } from 'react-hook-form'
-import { useLocale } from '@/components/form/ContentLocaleContext'
+import { useLocale } from '@/components/form/content-locale-context'
 
 export default function TextFormInput({
     input,
@@ -36,7 +36,7 @@ export default function TextFormInput({
             <input
                 placeholder={input.placeholder ? input.placeholder : input.label}
                 type='text'
-                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : (locale?.rtl ? 'rtl' : 'ltr')}
+                dir={input.rtl !== undefined ? (input.rtl ? 'rtl' : 'ltr') : locale?.rtl ? 'rtl' : 'ltr'}
                 readOnly={disabled}
                 disabled={field.disabled}
                 name={field.name}

package/templates/default/components/form/inputs/{TextareaFormInput.tsx → textarea-form-input.tsx}

@@ -1,8 +1,8 @@
 import React from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
+import FormInputElement from '@/components/form/form-input-element'
 import { TextAreaFieldClientConfig } from 'nextjs-cms/core/fields'
 import { FieldError, useController, useFormContext } from 'react-hook-form'
-import { useLocale } from '@/components/form/ContentLocaleContext'
+import { useLocale } from '@/components/form/content-locale-context'
 
 export default function TextareaFormInput({
     input,

package/templates/default/components/form/inputs/{VideoFormInput.tsx → video-form-input.tsx}

@@ -1,9 +1,9 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
-import FormInputElement from '@/components/form/FormInputElement'
-import ProtectedVideo from '@/components/ProtectedVideo'
+import FormInputElement from '@/components/form/form-input-element'
+import ProtectedVideo from '@/components/media/protected-video'
 import { Badge } from '@/components/ui/badge'
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
-import useModal from '@/hooks/useModal'
+import { useModal } from '@/components/feedback/modal-context'
 import { ChevronRight, InfoIcon, Trash2Icon, Undo2Icon, UploadIcon, X } from 'lucide-react'
 import { VideoFieldClientConfig } from 'nextjs-cms/core/fields'
 import { useI18n } from 'nextjs-cms/translations/client'

package/templates/default/components/{Layout.tsx → layout/layout.tsx}

@@ -2,12 +2,12 @@
 
 import classNames from 'classnames'
 import React, { useState } from 'react'
-import Navbar from '@/components/Navbar'
-import Sidebar from '@/components/Sidebar'
-import Modal from '@/components/Modal'
+import Navbar from '@/components/layout/navbar'
+import Sidebar from '@/components/layout/sidebar'
+import Modal from '@/components/feedback/modal'
 import { Toaster } from '@/components/ui/toaster'
 import { useSession } from 'nextjs-cms/auth/react'
-import LoadingSpinners from '@/components/LoadingSpinners'
+import LoadingSpinners from '@/components/feedback/loading-spinners'
 
 function Layout({
     children,

package/templates/default/components/{Navbar.tsx → layout/navbar.tsx}

@@ -6,7 +6,7 @@ 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 ProtectedImage from '@/components/media/protected-image'
 import { Spinner } from '@/components/ui/spinner'
 import Image from 'next/image'
 import { LogOut, Settings } from 'lucide-react'
@@ -24,7 +24,7 @@ import {
 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'
+import LanguageDropdown from '@/components/i18n/language-dropdown'
 type Props = {
     /**
      * Allows the parent component to modify the state when the

package/templates/default/components/{SidebarDropdownItem.tsx → layout/sidebar-dropdown-item.tsx}

@@ -5,7 +5,7 @@ import { SidebarItemProps } from 'nextjs-cms/core/types'
 import { useAutoAnimate } from '@formkit/auto-animate/react'
 import { ChevronDownIcon, ChevronUpIcon, FolderIcon, PlusIcon } from 'lucide-react'
 import { useI18n } from 'nextjs-cms/translations/client'
-import SectionIcon from '@/components/SectionIcon'
+import SectionIcon from '@/components/sections/section-icon'
 
 export default function SidebarDropdownItem({ item, closeSideBar }: SidebarItemProps) {
     const t = useI18n()

package/templates/default/components/{SidebarItem.tsx → layout/sidebar-item.tsx}

@@ -1,7 +1,7 @@
 import Link from 'next/link'
 import classNames from 'classnames'
 import { SidebarItemProps } from 'nextjs-cms/core/types'
-import SectionIcon from '@/components/SectionIcon'
+import SectionIcon from '@/components/sections/section-icon'
 
 export default function SidebarItem({ item, closeSideBar }: SidebarItemProps) {
     return (

package/templates/default/components/layout/sidebar-plugin-group.tsx

@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import classNames from 'classnames'
+import { useState } from 'react'
+import { useAutoAnimate } from '@formkit/auto-animate/react'
+import { ChevronDownIcon, ChevronUpIcon } from 'lucide-react'
+import type { SidebarPluginGroupProps } from 'nextjs-cms/core/types'
+import SectionIcon from '@/components/sections/section-icon'
+
+export default function SidebarPluginGroup({ group, closeSideBar }: SidebarPluginGroupProps) {
+    const [parent] = useAutoAnimate()
+    const [open, setOpen] = useState(false)
+    return (
+        <div ref={parent}>
+            <div
+                className={classNames({
+                    'flex cursor-pointer text-white hover:bg-indigo-900 dark:hover:bg-emerald-600': true,
+                    'gap-4 rounded-md p-2': true,
+                    'rounded-b-none bg-indigo-700 dark:bg-emerald-600': open,
+                })}
+                onClick={() => setOpen((prev) => !prev)}
+            >
+                <li className='relative flex w-full items-center justify-between gap-2'>
+                    <span className='flex items-center gap-2 text-start'>
+                        {group.icon && <SectionIcon name={group.icon} className='size-4' />}
+                        <span>{group.title}</span>
+                    </span>
+                    <span>
+                        {open ? (
+                            <ChevronUpIcon className='h-5 w-5' />
+                        ) : (
+                            <ChevronDownIcon className='h-5 w-5' />
+                        )}
+                    </span>
+                </li>
+            </div>
+            {open && (
+                <div
+                    className={classNames({
+                        'rounded border border-t-0 border-indigo-700/50 text-white dark:border-emerald-600/50': true,
+                        'flex flex-col items-stretch rounded-md rounded-t-none py-2': true,
+                    })}
+                >
+                    {group.children.map((child, index) => (
+                        <Link
+                            key={index}
+                            onClick={closeSideBar}
+                            href={child.path}
+                            className={classNames({
+                                'flex rounded text-white hover:underline': true,
+                                'mx-3 gap-2 p-2': true,
+                            })}
+                        >
+                            <li className='flex flex-row items-center gap-2'>
+                                {child.icon && <SectionIcon name={child.icon} className='size-4' />}
+                                <span>{child.title}</span>
+                            </li>
+                        </Link>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}