complete share link i18n

src/app/[orgId]/settings/sites/[niceId]/SiteInfoCard.tsx

@@ -9,11 +9,13 @@ import {
     InfoSections,
     InfoSectionTitle
 } from "@app/components/InfoSection";
+import { useTranslations } from 'next-intl';
 
 type SiteInfoCardProps = {};
 
 export default function SiteInfoCard({}: SiteInfoCardProps) {
     const { site, updateSite } = useSiteContext();
+    const t = useTranslations();
 
     const getConnectionTypeString = (type: string) => {
         if (type === "newt") {
@@ -21,7 +23,7 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
         } else if (type === "wireguard") {
             return "WireGuard";
         } else if (type === "local") {
-            return "Local";
+            return t('local');
         } else {
             return "Unknown";
         }
@@ -30,23 +32,23 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
     return (
         <Alert>
             <InfoIcon className="h-4 w-4" />
-            <AlertTitle className="font-semibold">Site Information</AlertTitle>
+            <AlertTitle className="font-semibold">{t('siteInfo')}</AlertTitle>
             <AlertDescription className="mt-4">
                 <InfoSections cols={2}>
                     {(site.type == "newt" || site.type == "wireguard") && (
                         <>
                             <InfoSection>
-                                <InfoSectionTitle>Status</InfoSectionTitle>
+                                <InfoSectionTitle>{t('status')}</InfoSectionTitle>
                                 <InfoSectionContent>
                                     {site.online ? (
                                         <div className="text-green-500 flex items-center space-x-2">
                                             <div className="w-2 h-2 bg-green-500 rounded-full"></div>
-                                            <span>Online</span>
+                                            <span>{t('online')}</span>
                                         </div>
                                     ) : (
                                         <div className="text-neutral-500 flex items-center space-x-2">
                                             <div className="w-2 h-2 bg-gray-500 rounded-full"></div>
-                                            <span>Offline</span>
+                                            <span>{t('offline')}</span>
                                         </div>
                                     )}
                                 </InfoSectionContent>
@@ -54,7 +56,7 @@ export default function SiteInfoCard({}: SiteInfoCardProps) {
                         </>
                     )}
                     <InfoSection>
-                        <InfoSectionTitle>Connection Type</InfoSectionTitle>
+                        <InfoSectionTitle>{t('connectionType')}</InfoSectionTitle>
                         <InfoSectionContent>
                             {getConnectionTypeString(site.type)}
                         </InfoSectionContent>

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -31,6 +31,7 @@ import { formatAxiosError } from "@app/lib/api";
 import { createApiClient } from "@app/lib/api";
 import { useEnvContext } from "@app/hooks/useEnvContext";
 import { useState } from "react";
+import { useTranslations } from 'next-intl';
 
 const GeneralFormSchema = z.object({
     name: z.string().nonempty("Name is required")
@@ -46,6 +47,7 @@ export default function GeneralPage() {
     const [loading, setLoading] = useState(false);
 
     const router = useRouter();
+    const t = useTranslations();
 
     const form = useForm<GeneralFormValues>({
         resolver: zodResolver(GeneralFormSchema),
@@ -65,19 +67,16 @@ export default function GeneralPage() {
             .catch((e) => {
                 toast({
                     variant: "destructive",
-                    title: "Failed to update site",
-                    description: formatAxiosError(
-                        e,
-                        "An error occurred while updating the site."
-                    )
+                    title: t('siteErrorUpdate'),
+                    description: formatAxiosError(e,t('siteErrorUpdateDescription'))
                 });
             });
 
         updateSite({ name: data.name });
 
         toast({
-            title: "Site updated",
-            description: "The site has been updated."
+            title: t('siteUpdated'),
+            description: t('siteUpdatedDescription')
         });
 
         setLoading(false);
@@ -90,10 +89,10 @@ export default function GeneralPage() {
             <SettingsSection>
                 <SettingsSectionHeader>
                     <SettingsSectionTitle>
-                        General Settings
+                        {t('generalSettings')}
                     </SettingsSectionTitle>
                     <SettingsSectionDescription>
-                        Configure the general settings for this site
+                        {t('siteGeneralDescription')}
                     </SettingsSectionDescription>
                 </SettingsSectionHeader>
 
@@ -110,14 +109,13 @@ export default function GeneralPage() {
                                     name="name"
                                     render={({ field }) => (
                                         <FormItem>
-                                            <FormLabel>Name</FormLabel>
+                                            <FormLabel>{t('name')}</FormLabel>
                                             <FormControl>
                                                 <Input {...field} />
                                             </FormControl>
                                             <FormMessage />
                                             <FormDescription>
-                                                This is the display name of the
-                                                site.
+                                                {t('siteNameDescription')}
                                             </FormDescription>
                                         </FormItem>
                                     )}
@@ -134,7 +132,7 @@ export default function GeneralPage() {
                         loading={loading}
                         disabled={loading}
                     >
-                        Save General Settings
+                        {t('saveGeneralSettings')}
                     </Button>
                 </SettingsSectionFooter>
             </SettingsSection>

src/app/[orgId]/settings/sites/[niceId]/layout.tsx

@@ -16,6 +16,7 @@ import {
     BreadcrumbSeparator
 } from "@app/components/ui/breadcrumb";
 import SiteInfoCard from "./SiteInfoCard";
+import { getTranslations } from 'next-intl/server';
 
 interface SettingsLayoutProps {
     children: React.ReactNode;
@@ -38,9 +39,11 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
         redirect(`/${params.orgId}/settings/sites`);
     }
 
+    const t = await getTranslations();
+
     const navItems = [
         {
-            title: "General",
+            title: t('general'),
             href: "/{orgId}/settings/sites/{niceId}/general"
         }
     ];
@@ -48,8 +51,8 @@ export default async function SettingsLayout(props: SettingsLayoutProps) {
     return (
         <>
             <SettingsSectionTitle
-                title={`${site?.name} Settings`}
-                description="Configure the settings on your site"
+                title={t('siteSetting', {siteName: site?.name})}
+                description={t('siteSettingDescription')}
             />
 
             <SiteProvider site={site}>