import { Head } from '@inertiajs/react'; import axios from 'axios'; import { useState, useMemo } from 'react'; import { toast } from 'sonner'; import type { Project, BreadcrumbItem } from '@/types/index.d'; import AppLayout from '@/layouts/app-layout'; import ProjectSettingsLayout from './layout'; import HeadingSmall from '@/components/heading-small'; import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import MultiSelect from '@/components/ui/select/Select'; // Locales JSON map import localesMap from '@/lib/locales.json'; import { Trash2 } from 'lucide-react'; type ProjectWithLocales = Project & { locales: string[] }; interface Props { project: Project; } export default function LocalizationSettings({ project: initialProject }: Props) { const [project, setProject] = useState(initialProject as ProjectWithLocales); const [selectedLocale, setSelectedLocale] = useState(null); const breadcrumbs: BreadcrumbItem[] = [ { title: project.name, href: route('projects.show', project.id) }, { title: 'Settings', href: route('projects.settings.project', project.id) }, { title: 'Localization', href: route('projects.settings.localization', project.id) }, ]; const localesArray = Array.isArray(project.locales) ? project.locales : (project.locales ? [project.locales as unknown as string] : []); const availableLocaleOptions = useMemo(() => { return Object.entries(localesMap) .filter(([code]) => !localesArray.includes(code)) .map(([code, name]) => ({ value: code, label: `${code} - ${name}` })); }, [project]); const addLocale = async () => { if (!selectedLocale) return; try { const res = await axios.post(route('projects.settings.locales.add', project.id), { locale: selectedLocale.value, }); setProject(res.data as ProjectWithLocales); setSelectedLocale(null); toast.success('Locale added'); } catch (e: any) { toast.error(e.response?.data?.message || 'Failed to add locale'); } }; const setDefault = async (locale: string) => { try { const res = await axios.put(route('projects.settings.locales.default', project.id), { locale }); setProject(res.data as ProjectWithLocales); toast.success('Default locale updated'); } catch (e: any) { toast.error('Failed to update default locale'); } }; const deleteLocale = async (locale: string) => { try { const res = await axios.delete(route('projects.settings.locales.delete', [project.id, locale])); setProject(res.data as ProjectWithLocales); toast.success('Locale deleted'); } catch (e: any) { toast.error(e.response?.data?.message || 'Failed to delete locale'); } }; return (
{/* Existing locales */}
{localesArray.map((loc) => ( ))} {localesArray.length === 0 && ( )}
{loc} {(localesMap as any)[loc] || '-'} {loc === project.default_locale ? ( Default ) : ( )} {loc !== project.default_locale && ( )}
No locales yet.
{/* Add locale */}
); }