create-nextjs-cms 0.8.10 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-nextjs-cms",
-  "version": "0.8.10",
+  "version": "0.9.1",
   "private": false,
   "type": "module",
   "bin": {
@@ -28,8 +28,8 @@
     "prettier": "^3.3.3",
     "tsx": "^4.20.6",
     "typescript": "^5.9.2",
-    "@lzcms/prettier-config": "0.1.0",
     "@lzcms/eslint-config": "0.3.0",
+    "@lzcms/prettier-config": "0.1.0",
     "@lzcms/tsconfig": "0.1.0"
   },
   "prettier": "@lzcms/prettier-config",

package/templates/default/app/(auth)/auth/login/LoginPage.tsx

@@ -11,9 +11,9 @@ import { Button } from '@/components/ui/button'
 import { MoonIcon, SunIcon } from '@radix-ui/react-icons'
 import { useTheme } from 'next-themes'
 import { login, useSession } from 'nextjs-cms/auth/react'
-import { wasLocaleChangedOnLogin } from 'nextjs-cms/translations'
-import LoginLocaleDropdown from '@/components/login-locale-dropdown'
-import { useAuthLocale } from '../../auth-locale-provider'
+import { wasLanguageChangedOnLogin } from 'nextjs-cms/translations'
+import LoginLanguageDropdown from '@/components/login-language-dropdown'
+import { useAuthLanguage } from '../../auth-language-provider'
 
 type fromErrors = {
     username?: string | null
@@ -23,7 +23,7 @@ type fromErrors = {
 }
 
 export default function LoginPage() {
-    const { supportedLanguages, fallbackLanguage, initialLocale } = useAuthLocale()
+    const { supportedLanguages, fallbackLanguage, initialLanguage } = useAuthLanguage()
     const t = useI18n()
     const session = useSession()
     const searchParams = useSearchParams()
@@ -39,13 +39,13 @@ export default function LoginPage() {
             loginButtonRef.current.innerHTML = t('loading')
         }
         try {
-            // Only send locale if user explicitly changed it on login page
+            // Only send language if user explicitly changed it on login page
             // Otherwise, server will use admin's stored DB preference
-            const localeChanged = wasLocaleChangedOnLogin()
+            const languageChanged = wasLanguageChangedOnLogin()
             await login({
                 username: formRef.current?.username.value,
                 password: formRef.current?.password.value,
-                locale: localeChanged ? initialLocale : undefined,
+                language: languageChanged ? initialLanguage : undefined,
             })
         } catch (error: any) {
             if (loginButtonRef.current) {
@@ -83,10 +83,10 @@ export default function LoginPage() {
         <>
             <div className='bg-background text-foreground fixed top-0 left-0 h-full w-full flex-1 flex-col justify-center overflow-auto px-6 py-12 lg:px-8'>
                 <div className='flex w-full items-center justify-end gap-2 absolute end-10 top-10'>
-                    <LoginLocaleDropdown
+                    <LoginLanguageDropdown
                         supportedLanguages={supportedLanguages}
                         fallbackLanguage={fallbackLanguage}
-                        initialLocale={initialLocale}
+                        initialLanguage={initialLanguage}
                     />
                     <Button
                         variant='default'

package/templates/default/app/(auth)/auth-language-provider.tsx

@@ -0,0 +1,34 @@
+'use client'
+
+import { createContext, useContext, type ReactNode } from 'react'
+
+export interface AuthLanguageValue {
+    supportedLanguages: readonly string[]
+    fallbackLanguage: string
+    initialLanguage: string
+}
+
+const AuthLanguageContext = createContext<AuthLanguageValue | null>(null)
+
+export function AuthLanguageProvider({
+    supportedLanguages,
+    fallbackLanguage,
+    initialLanguage,
+    children,
+}: AuthLanguageValue & { children: ReactNode }) {
+    return (
+        <AuthLanguageContext.Provider
+            value={{ supportedLanguages, fallbackLanguage, initialLanguage }}
+        >
+            {children}
+        </AuthLanguageContext.Provider>
+    )
+}
+
+export function useAuthLanguage(): AuthLanguageValue {
+    const ctx = useContext(AuthLanguageContext)
+    if (!ctx) {
+        throw new Error('useAuthLanguage must be used within AuthLanguageProvider')
+    }
+    return ctx
+}

package/templates/default/app/(auth)/layout.tsx

@@ -8,10 +8,10 @@ import Providers from '@/app/providers'
 import auth from 'nextjs-cms/auth'
 import { getCMSConfig } from 'nextjs-cms/core'
 import { I18nProviderClient } from 'nextjs-cms/translations/client'
-import { resolveLocale, RTL_LOCALES, LOCALE_COOKIE_NAME } from 'nextjs-cms/translations'
+import { resolveLanguage, RTL_LANGUAGES, LANGUAGE_COOKIE_NAME } from 'nextjs-cms/translations'
 import { getClientDictionaries } from 'nextjs-cms/translations/server'
 import { redirect } from 'next/navigation'
-import { AuthLocaleProvider } from './auth-locale-provider'
+import { AuthLanguageProvider } from './auth-language-provider'
 import { DirectionProvider } from "@/components/ui/direction"
 
 const inter = Inter({
@@ -44,13 +44,13 @@ export default async function RootLayout({ children }: { children: React.ReactNo
 
     const { supportedLanguages, fallbackLanguage } = cmsConfig.i18n
     const cookieStore = await cookies()
-    const cookieLocale = cookieStore.get(LOCALE_COOKIE_NAME)?.value
-    const locale = resolveLocale(cookieLocale, supportedLanguages, fallbackLanguage)
-    const isRTL = RTL_LOCALES.has(locale)
+    const cookieLanguage = cookieStore.get(LANGUAGE_COOKIE_NAME)?.value
+    const language = resolveLanguage(cookieLanguage, supportedLanguages, fallbackLanguage)
+    const isRTL = RTL_LANGUAGES.has(language)
     const dictionaries = getClientDictionaries(supportedLanguages)
 
     return (
-        <html lang={locale} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
+        <html lang={language} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
             <body
                 className={cn(
                     'bg-background min-h-screen font-sans antialiased',
@@ -58,20 +58,20 @@ export default async function RootLayout({ children }: { children: React.ReactNo
                 )}
             >
                 <DirectionProvider dir={isRTL ? 'rtl' : 'ltr'} direction={isRTL ? 'rtl' : 'ltr'}>
-                <I18nProviderClient locale={locale} dictionaries={dictionaries}>
+                <I18nProviderClient locale={language} dictionaries={dictionaries}>
                     <ThemeProvider
                         attribute='class'
                         defaultTheme={cmsConfig.ui.defaultTheme}
                         enableSystem
                         disableTransitionOnChange
                     >
-                        <AuthLocaleProvider
+                        <AuthLanguageProvider
                             supportedLanguages={supportedLanguages}
                             fallbackLanguage={fallbackLanguage}
-                            initialLocale={locale}
+                            initialLanguage={language}
                         >
                             <Providers session={undefined}>{children}</Providers>
-                        </AuthLocaleProvider>
+                        </AuthLanguageProvider>
                     </ThemeProvider>
                 </I18nProviderClient>
                 </DirectionProvider>

package/templates/default/app/(rootLayout)/edit/[section]/[itemId]/page.tsx

@@ -1,12 +1,15 @@
 import ItemEditPage from '@/components/ItemEditPage'
 import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
 type Params = Promise<{ section: string; itemId: string }>
+type SearchParams = Promise<{ locale?: string }>
 
-export default async function Page(props: { params: Params }) {
+export default async function Page(props: { params: Params; searchParams: SearchParams }) {
     const params = await props.params
+    const searchParams = await props.searchParams
     await api.hasItemsSections.editItem.prefetch({
         sectionName: params.section,
         sectionItemId: params.itemId,
+        locale: searchParams.locale,
     })
 
     return (

package/templates/default/app/(rootLayout)/layout.tsx

@@ -7,7 +7,7 @@ import Providers from '@/app/providers'
 import auth from 'nextjs-cms/auth'
 import { getCMSConfig } from 'nextjs-cms/core'
 import { I18nProviderClient } from 'nextjs-cms/translations/client'
-import { resolveLocale, RTL_LOCALES } from 'nextjs-cms/translations'
+import { resolveLanguage, RTL_LANGUAGES } from 'nextjs-cms/translations'
 import { getClientDictionaries } from 'nextjs-cms/translations/server'
 import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
 import Layout from '@/components/Layout'
@@ -44,12 +44,12 @@ export default async function CMSLayout({ children }: { children: React.ReactNod
     }
 
     const { supportedLanguages, fallbackLanguage } = cmsConfig.i18n
-    const locale = resolveLocale(session.user.locale, supportedLanguages, fallbackLanguage)
-    const isRTL = RTL_LOCALES.has(locale)
+    const language = resolveLanguage(session.user.language, supportedLanguages, fallbackLanguage)
+    const isRTL = RTL_LANGUAGES.has(language)
     const dictionaries = getClientDictionaries(supportedLanguages)
 
     return (
-        <html lang={locale} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
+        <html lang={language} dir={isRTL ? 'rtl' : 'ltr'} suppressHydrationWarning>
             <body
                 className={cn(
                     'bg-background min-h-screen font-sans antialiased',
@@ -57,7 +57,7 @@ export default async function CMSLayout({ children }: { children: React.ReactNod
                 )}
             >
                 <DirectionProvider dir={isRTL ? 'rtl' : 'ltr'} direction={isRTL ? 'rtl' : 'ltr'}>
-                <I18nProviderClient locale={locale} dictionaries={dictionaries}>
+                <I18nProviderClient locale={language} dictionaries={dictionaries}>
                     <ThemeProvider
                         attribute='class'
                         defaultTheme={cmsConfig.ui.defaultTheme}

package/templates/default/app/(rootLayout)/section/[section]/page.tsx

@@ -1,11 +1,14 @@
 import SectionPage from '@/components/SectionPage'
 import { api, HydrateClient } from 'nextjs-cms/api/trpc/server'
 type Params = Promise<{ section: string }>
+type SearchParams = Promise<{ locale?: string }>
 
-export default async function Page(props: { params: Params }) {
+export default async function Page(props: { params: Params; searchParams: SearchParams }) {
     const params = await props.params
+    const searchParams = await props.searchParams
     await api.simpleSections.create.prefetch({
         sectionName: params.section,
+        locale: searchParams.locale,
     })
 
     return (

package/templates/default/app/api/auth/route.ts

@@ -4,9 +4,9 @@ import { deleteSession, login } from 'nextjs-cms/auth/actions'
 import { getRequestMetadataFromHeaders, recordLog } from 'nextjs-cms/logging'
 
 export async function POST(request: NextRequest) {
-    const { username, password, locale } = await request.json()
+    const { username, password, language } = await request.json()
     try {
-        const loginResult = await login({ username, password, locale })
+        const loginResult = await login({ username, password, language })
         const requestMetadata = getRequestMetadataFromHeaders(request.headers)
 
         await recordLog({

package/templates/default/app/api/submit/section/item/[slug]/route.ts

@@ -1,7 +1,10 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { EditSubmit } from 'nextjs-cms/core/submit'
+import { EditSubmit, LocaleSubmit } from 'nextjs-cms/core/submit'
 import auth from 'nextjs-cms/auth'
 import { getRequestMetadataFromHeaders } from 'nextjs-cms/logging'
+import { getCMSConfig } from 'nextjs-cms/core/config'
+import { resolveLocale } from 'nextjs-cms/core/localization'
+import getString from 'nextjs-cms/translations'
 
 export async function PUT(request: NextRequest, { params }: { params: Promise<{ slug: string }> }) {
     const session = await auth()
@@ -39,13 +42,39 @@ export async function PUT(request: NextRequest, { params }: { params: Promise<{
         )
     }
 
-    const submit = new EditSubmit({
+    const localeCode = formData.get('locale')
+    const localeValue = typeof localeCode === 'string' ? localeCode : undefined
+    const cmsConfig = await getCMSConfig()
+    const localeResult = resolveLocale({
+        localization: cmsConfig.localization,
+        locale: localeValue,
+    })
+    const isLocaleSubmit = localeValue && localeResult.localizationEnabled && localeResult.isDefault === false
+    const localeForSubmit = localeResult.resolvedLocale?.code
+
+    if (isLocaleSubmit && !localeForSubmit) {
+        return NextResponse.json(
+            {
+                error: getString('invalidLocale', user.language, {
+                    locale: localeValue,
+                    locales: localeResult.availableLocales.map((l) => l.code).join(', '),
+                }),
+            },
+            { status: 400 },
+        )
+    }
+
+    const config = {
         itemId: itemId as string,
         sectionName,
         user,
         postData: formData,
         requestMetadata,
-    })
+    }
+
+    const submit = isLocaleSubmit
+        ? new LocaleSubmit({ ...config, locale: localeForSubmit as string })
+        : new EditSubmit(config)
 
     await submit.initialize()
     await submit.submit()

package/templates/default/app/api/submit/section/simple/route.ts

@@ -1,7 +1,10 @@
 import { NextRequest, NextResponse } from 'next/server'
-import { SimpleSectionSubmit } from 'nextjs-cms/core/submit'
+import { SimpleSectionSubmit, LocaleSubmit } from 'nextjs-cms/core/submit'
 import auth from 'nextjs-cms/auth'
 import { getRequestMetadataFromHeaders } from 'nextjs-cms/logging'
+import { getCMSConfig } from 'nextjs-cms/core/config'
+import { resolveLocale } from 'nextjs-cms/core/localization'
+import getString from 'nextjs-cms/translations'
 
 export async function PUT(request: NextRequest) {
     const session = await auth()
@@ -29,13 +32,39 @@ export async function PUT(request: NextRequest) {
         )
     }
 
-    const submit = new SimpleSectionSubmit({
+    const localeCode = formData.get('locale')
+    const localeValue = typeof localeCode === 'string' ? localeCode : undefined
+    const cmsConfig = await getCMSConfig()
+    const localeResult = resolveLocale({
+        localization: cmsConfig.localization,
+        locale: localeValue,
+    })
+    const isLocaleSubmit = localeValue && localeResult.localizationEnabled && localeResult.isDefault === false
+    const localeForSubmit = localeResult.resolvedLocale?.code
+
+    if (isLocaleSubmit && !localeForSubmit) {
+        return NextResponse.json(
+            {
+                error: getString('invalidLocale', user.language, {
+                    locale: localeValue,
+                    locales: localeResult.availableLocales.map((l) => l.code).join(', '),
+                }),
+            },
+            { status: 400 },
+        )
+    }
+
+    const config = {
         itemId: '1',
         sectionName,
         user,
         postData: formData,
         requestMetadata,
-    })
+    }
+
+    const submit = isLocaleSubmit
+        ? new LocaleSubmit({ ...config, locale: localeForSubmit as string })
+        : new SimpleSectionSubmit(config)
 
     await submit.initialize()
     await submit.submit()

package/templates/default/app/globals.css

@@ -48,6 +48,9 @@
   --color-warning: hsl(var(--warning));
   --color-warning-foreground: hsl(var(--warning-foreground));
 
+  --color-info: hsl(var(--info));
+  --color-info-foreground: hsl(var(--info-foreground));
+
   --color-destructive: hsl(var(--destructive));
   --color-destructive-foreground: hsl(var(--destructive-foreground));
 
@@ -129,6 +132,9 @@
     --warning: 45 100% 50%;
     --warning-foreground: 210 40% 98%;
 
+    --info: 213 80% 52%;
+    --info-foreground: 222 80% 52%;
+
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
 
@@ -170,6 +176,9 @@
     --warning: 45 100% 50%;
     --warning-foreground: 210 40% 98%;
 
+    --info: 213 60% 52%;
+    --info-foreground: 200 80% 52%;
+
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
 

package/templates/default/cms.config.ts

@@ -1,7 +1,8 @@
-import type { CMSConfig } from 'nextjs-cms/core/config'
+import { defineConfig, type CMSConfig } from 'nextjs-cms/core/config'
 import { resolve } from 'path'
 
-export const config: CMSConfig = {
+export const config: CMSConfig = defineConfig({
+    ui: {
         title: 'NEXTJS CMS',
         defaultTheme: 'dark',
     },
@@ -52,6 +53,5 @@ export const config: CMSConfig = {
                 columns: 'camelCase',
             },
         },
-    },
     },
-}
+})

package/templates/default/components/ItemEditPage.tsx

@@ -1,19 +1,23 @@
 'use client'
 
 import { useAxiosPrivate } from 'nextjs-cms/auth/hooks'
-import { RefObject, useEffect, useRef, useState } from 'react'
+import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
 import { SectionType } from 'nextjs-cms/core/types'
 import { useI18n } from 'nextjs-cms/translations/client'
 import useModal from '@/hooks/useModal'
 import { AxiosError } from 'axios'
 import InfoCard from '@/components/InfoCard'
-import { useRouter } from 'next/navigation'
+import { useRouter, useSearchParams } from 'next/navigation'
 import { useToast } from '@/components/ui/use-toast'
 import { DropzoneHandles } from '@/components/Dropzone'
 import { VariantHandles } from '@/components/NewVariantComponent'
 import { trpc } from '@/app/_trpc/client'
 import Form from '@/components/form/Form'
 import ErrorComponent from '@/components/ErrorComponent'
+import LocaleSwitcher from '@/components/LocaleSwitcher'
+import { Trash2 } from 'lucide-react'
+import { Alert, AlertDescription } from './ui/alert'
+import { ExclamationTriangleIcon } from '@radix-ui/react-icons'
 
 export default function ItemEditPage({
     section,
@@ -36,17 +40,47 @@ export default function ItemEditPage({
     const [progress, setProgress] = useState(0)
     const [progressVariant, setProgressVariant] = useState<'determinate' | 'query'>('determinate')
     const [isSubmitting, setIsSubmitting] = useState(false)
+    const [submitSuccessCount, setSubmitSuccessCount] = useState(0)
     const { setModal } = useModal()
     const axiosPrivate = useAxiosPrivate()
     const controller = new AbortController()
     const { toast } = useToast()
     const router = useRouter()
+    const searchParams = useSearchParams()
+    const locale = searchParams.get('locale') ?? undefined
+    const [formDirty, setFormDirty] = useState(false)
+    const handleDirtyChange = useCallback((isDirty: boolean) => setFormDirty(isDirty), [])
     const dropzoneRef: RefObject<DropzoneHandles | null> = useRef(null)
     const variantRef: RefObject<VariantHandles[]> = useRef([])
     const [data, {refetch}] = trpc.hasItemsSections.editItem.useSuspenseQuery({
         sectionName: section,
         sectionItemId: itemId,
+        locale,
     })
+    const deleteLocaleMutation = trpc.hasItemsSections.deleteLocaleTranslation.useMutation()
+
+    const handleDeleteLocale = async () => {
+        if (!locale) return
+        if (!window.confirm(t('deleteLocaleTranslationText'))) return
+
+        try {
+            await deleteLocaleMutation.mutateAsync({
+                sectionName: section,
+                sectionItemId: itemId,
+                locale,
+            })
+            toast({
+                variant: 'success',
+                description: t('localeTranslationDeleted'),
+            })
+            router.push(`/edit/${section}/${itemId}`)
+        } catch (error: any) {
+            toast({
+                variant: 'destructive',
+                description: error?.message ?? t('somethingWentWrong'),
+            })
+        }
+    }
 
     const handleSubmit = async (formData: FormData) => {
         setIsSubmitting(true)
@@ -57,6 +91,10 @@ export default function ItemEditPage({
         formData.append('formType', 'edit')
         formData.append('sectionType', sectionType)
 
+        if (locale) {
+            formData.append('locale', locale)
+        }
+
         // Retrieve the files from the Dropzone's state
         if (dropzoneRef.current) {
             const files: File[] = dropzoneRef.current.getFiles()
@@ -128,6 +166,7 @@ export default function ItemEditPage({
                         })
                     }
                     await refetch()
+                    setSubmitSuccessCount((currentCount) => currentCount + 1)
                     switch (sectionType) {
                         case 'categorized':
                             // Just close the modal and refetch the page
@@ -197,7 +236,44 @@ export default function ItemEditPage({
                         /{t('edit')} {data.section?.title.singular}
                     </span>
                 </div>
+                {data.localization && (
+                    <div className="px-4 pt-4">
+                        <LocaleSwitcher
+                            section={section}
+                            itemId={itemId}
+                            currentLocale={data.localization.currentLocale}
+                            defaultLocale={data.localization.defaultLocale}
+                            existingTranslations={data.localization.existingTranslations}
+                            locales={data.localization.locales}
+                            hasUnsavedChanges={formDirty}
+                        />
+                        {locale && (
+                            <Alert variant='info' className='mt-2 w-full'>
+                            <AlertDescription className='text-md font-bold'>
+                                <div className='flex items-center justify-between'>
+                                <span>
+                                    {t('editingContentTranslation', { locale })}
+                                </span>
+                                {data.localization.existingTranslations.includes(locale) && (
+                                    <button
+                                        type='button'
+                                        onClick={handleDeleteLocale}
+                                        disabled={deleteLocaleMutation.isPending}
+                                        className='inline-flex items-center gap-1.5 rounded-md bg-red-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-red-700 disabled:opacity-50'
+                                    >
+                                        <Trash2 className='h-3.5 w-3.5' />
+                                        {deleteLocaleMutation.isPending ? t('loading') : t('deleteLocaleTranslation')}
+                                    </button>
+                                )}
+                            </div>
+                                    
+                            </AlertDescription>
+                        </Alert>
+                        )}
+                    </div>
+                )}
                 <Form
+                    key={locale ?? 'default'}
                     formType='edit'
                     progressVariant={progressVariant}
                     response={response}
@@ -207,6 +283,10 @@ export default function ItemEditPage({
                     variantRef={variantRef}
                     handleSubmit={handleSubmit}
                     isSubmitting={isSubmitting}
+                    submitSuccessCount={submitSuccessCount}
+                    contentLocale={data.localization?.currentLocale}
+                    defaultLocale={data.localization?.defaultLocale}
+                    onDirtyChange={handleDirtyChange}
                 />
             </div>
         </div>

package/templates/default/components/LocaleSwitcher.tsx

@@ -0,0 +1,89 @@
+'use client'
+
+import Link from 'next/link'
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-react'
+import { useI18n } from 'nextjs-cms/translations/client'
+import { useSession } from 'nextjs-cms/auth/react'
+import ContainerBox from './ContainerBox'
+
+type LocaleConfig = {
+    code: string
+    label: string
+    rtl?: boolean
+}
+
+type Props = {
+    section: string
+    itemId?: string
+    currentLocale: LocaleConfig
+    defaultLocale: LocaleConfig
+    existingTranslations: string[]
+    locales: LocaleConfig[]
+    hasUnsavedChanges?: boolean
+    /** Base path for locale links. Defaults to `/edit/${section}/${itemId}` for hasItems sections. */
+    basePath?: string
+}
+
+export default function LocaleSwitcher({
+    section,
+    itemId,
+    currentLocale,
+    defaultLocale,
+    existingTranslations,
+    locales,
+    hasUnsavedChanges,
+    basePath,
+}: Props) {
+    const t = useI18n()
+    const resolvedBasePath = basePath ?? `/edit/${section}/${itemId}`
+
+    const getHref = (localeCode: string) => {
+        if (localeCode === defaultLocale.code) {
+            return resolvedBasePath
+        }
+        return `${resolvedBasePath}?locale=${localeCode}`
+    }
+
+    const handleClick = (e: React.MouseEvent, localeCode: string) => {
+        if (localeCode === currentLocale.code) {
+            e.preventDefault()
+            return
+        }
+        if (hasUnsavedChanges) {
+            if (!window.confirm(t('unsavedChangesConfirm'))) {
+                e.preventDefault()
+            }
+        }
+    }
+
+    return (
+        <ContainerBox title={t('localesHeading')}>
+            <div className="flex flex-wrap items-center gap-2">
+            {locales.map((locale) => {
+                const isActive = locale.code === currentLocale.code
+                const hasTranslation = locale.code === defaultLocale.code || existingTranslations.includes(locale.code)
+                const isDefault = locale.code === defaultLocale.code
+
+                return (
+                    <Link
+                        key={locale.code}
+                        href={getHref(locale.code)}
+                        onClick={(e) => handleClick(e, locale.code)}
+                        className={cn(
+                            'inline-flex border border-primary/20 items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
+                            isActive
+                                ? 'bg-success text-success-foreground'
+                                : 'bg-muted text-muted-foreground hover:bg-accent hover:text-accent-foreground',
+                        )}
+                    >
+                        {locale.label}
+                        {isDefault && <span className="text-[10px] opacity-70">{t('baseLocaleBadge')}</span>}
+                        {hasTranslation && !isDefault && <Check className="h-3 w-3" />}
+                    </Link>
+                )
+            })}
+            </div>
+        </ContainerBox>
+    )
+}