chore(i18n): update zu-ZA translations

apps/client/src/pages/builder/sidebars/left/sections/shared/section-base.tsx

@@ -106,7 +106,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
             <Plus size={14} />
             <span className="font-medium">
               {t({
-                message: "Add New Item",
+                message: "Add a new item",
                 context: "For example, add a new work experience, or add a new profile.",
               })}
             </span>
@@ -145,7 +145,7 @@ export const SectionBase = <T extends SectionItem>({ id, title, description }: P
             <Plus />
             <span>
               {t({
-                message: "Add New Item",
+                message: "Add a new item",
                 context: "For example, add a new work experience, or add a new profile.",
               })}
             </span>

apps/client/src/pages/builder/sidebars/left/sections/shared/section-options.tsx

@@ -109,8 +109,8 @@ export const SectionOptions = ({ id }: Props) => {
             <DropdownMenuSubContent>
               <DropdownMenuRadioGroup value={`${section.columns}`} onValueChange={onChangeColumns}>
                 {Array.from({ length: 5 }, (_, i) => i + 1).map((value) => (
-                  <DropdownMenuRadioItem value={`${value}`}>
-                    {plural(value, { one: "Column", other: "Columns" })}
+                  <DropdownMenuRadioItem key={value} value={`${value}`}>
+                    {value} {plural(value, { one: "Column", other: "Columns" })}
                   </DropdownMenuRadioItem>
                 ))}
               </DropdownMenuRadioGroup>

apps/client/src/pages/builder/sidebars/right/index.tsx

@@ -8,6 +8,7 @@ import { ThemeSwitch } from "@/client/components/theme-switch";
 import { ExportSection } from "./sections/export";
 import { InformationSection } from "./sections/information";
 import { LayoutSection } from "./sections/layout";
+import { LocaleSection } from "./sections/locale";
 import { NotesSection } from "./sections/notes";
 import { PageSection } from "./sections/page";
 import { SharingSection } from "./sections/sharing";
@@ -39,6 +40,8 @@ export const RightSidebar = () => {
           <Separator />
           <PageSection />
           <Separator />
+          <LocaleSection />
+          <Separator />
           <SharingSection />
           <Separator />
           <StatisticsSection />

apps/client/src/pages/builder/sidebars/right/sections/locale.tsx

@@ -0,0 +1,48 @@
+import { t } from "@lingui/macro";
+import { useLingui } from "@lingui/react";
+import { Combobox, Label } from "@reactive-resume/ui";
+import { useMemo } from "react";
+
+import { dynamicActivate, getLocales } from "@/client/libs/lingui";
+import { useResumeStore } from "@/client/stores/resume";
+
+import { getSectionIcon } from "../shared/section-icon";
+
+export const LocaleSection = () => {
+  const { _ } = useLingui();
+
+  const setValue = useResumeStore((state) => state.setValue);
+  const locale = useResumeStore((state) => state.resume.data.metadata.locale);
+
+  const options = useMemo(() => {
+    return Object.entries(getLocales()).map(([value, label]) => ({
+      label,
+      value,
+    }));
+  }, [_]);
+
+  const onChangeLanguage = async (value: string) => {
+    setValue("metadata.locale", value);
+    await dynamicActivate(value);
+
+    // Update resume section titles with new locale
+  };
+
+  return (
+    <section id="locale" className="grid gap-y-6">
+      <header className="flex items-center justify-between">
+        <div className="flex items-center gap-x-4">
+          {getSectionIcon("locale")}
+          <h2 className="line-clamp-1 text-3xl font-bold">{t`Locale`}</h2>
+        </div>
+      </header>
+
+      <main className="grid gap-y-4">
+        <div className="space-y-1.5">
+          <Label>{t`Language`}</Label>
+          <Combobox value={locale} onValueChange={onChangeLanguage} options={options} />
+        </div>
+      </main>
+    </section>
+  );
+};

apps/client/src/pages/builder/sidebars/right/sections/typography.tsx

@@ -14,7 +14,7 @@ import { getSectionIcon } from "../shared/section-icon";
 const fontSuggestions = [
   "Open Sans",
   "Merriweather",
-  "CMU Serif",
+  "Roboto Condensed",
   "Playfair Display",
   "Lato",
   "Lora",
@@ -38,7 +38,6 @@ export const TypographySection = () => {
 
   const loadFontSuggestions = useCallback(async () => {
     fontSuggestions.forEach((font) => {
-      if (font === "CMU Serif") return;
       webfontloader.load({
         events: false,
         classes: false,

apps/client/src/pages/builder/sidebars/right/shared/section-icon.tsx

@@ -9,20 +9,22 @@ import {
   ReadCvLogo,
   ShareFat,
   TextT,
+  Translate,
   TrendUp,
 } from "@phosphor-icons/react";
 import { Button, ButtonProps, Tooltip } from "@reactive-resume/ui";
 
 export type MetadataKey =
-  | "notes"
   | "template"
   | "layout"
   | "typography"
   | "theme"
   | "page"
+  | "locale"
   | "sharing"
   | "statistics"
   | "export"
+  | "notes"
   | "information";
 
 export const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
@@ -40,6 +42,8 @@ export const getSectionIcon = (id: MetadataKey, props: IconProps = {}) => {
       return <Palette size={18} {...props} />;
     case "page":
       return <ReadCvLogo size={18} {...props} />;
+    case "locale":
+      return <Translate size={18} {...props} />;
     case "sharing":
       return <ShareFat size={18} {...props} />;
     case "statistics":