feat(i18n): implement localization using LinguiJS

apps/client/src/pages/dashboard/settings/_sections/openai.tsx

@@ -1,4 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod";
+import { t, Trans } from "@lingui/macro";
 import { LockSimple, LockSimpleOpen, TrashSimple } from "@phosphor-icons/react";
 import {
   Alert,
@@ -20,7 +21,8 @@ import { useOpenAiStore } from "@/client/stores/openai";
 const formSchema = z.object({
   apiKey: z
     .string()
-    .regex(/^sk-[a-zA-Z0-9]+$/, "That doesn't look like a valid OpenAI API key.")
+    // eslint-disable-next-line lingui/t-call-in-function
+    .regex(/^sk-[a-zA-Z0-9]+$/, t`That doesn't look like a valid OpenAI API key.`)
     .default(""),
 });
 
@@ -47,26 +49,27 @@ export const OpenAISettings = () => {
   return (
     <div className="space-y-6">
       <div>
-        <h3 className="text-2xl font-bold leading-relaxed tracking-tight">OpenAI Integration</h3>
+        <h3 className="text-2xl font-bold leading-relaxed tracking-tight">{t`OpenAI Integration`}</h3>
         <p className="leading-relaxed opacity-75">
-          You can make use of the OpenAI API to help you generate content, or improve your writing
-          while composing your resume.
+          {t`You can make use of the OpenAI API to help you generate content, or improve your writing while composing your resume.`}
         </p>
       </div>
 
       <div className="prose prose-sm prose-zinc max-w-full dark:prose-invert">
         <p>
-          You have the option to{" "}
-          <a
-            href="https://www.howtogeek.com/885918/how-to-get-an-openai-api-key/"
-            rel="noopener noreferrer nofollow"
-            target="_blank"
-          >
-            obtain your own OpenAI API key
-          </a>
-          . This key empowers you to leverage the API as you see fit. Alternatively, if you wish to
-          disable the AI features in Reactive Resume altogether, you can simply remove the key from
-          your settings.
+          <Trans>
+            You have the option to{" "}
+            <a
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              href="https://www.howtogeek.com/885918/how-to-get-an-openai-api-key/"
+            >
+              obtain your own OpenAI API key
+            </a>
+            . This key empowers you to leverage the API as you see fit. Alternatively, if you wish
+            to disable the AI features in Reactive Resume altogether, you can simply remove the key
+            from your settings.
+          </Trans>
         </p>
       </div>
 
@@ -77,7 +80,7 @@ export const OpenAISettings = () => {
             control={form.control}
             render={({ field }) => (
               <FormItem>
-                <FormLabel>API Key</FormLabel>
+                <FormLabel>{t`API Key`}</FormLabel>
                 <FormControl>
                   <Input type="password" placeholder="sk-..." {...field} />
                 </FormControl>
@@ -95,13 +98,13 @@ export const OpenAISettings = () => {
             <Button type="submit" disabled={isEnabled || !form.formState.isDirty}>
               {!isEnabled && <LockSimpleOpen className="mr-2" />}
               {isEnabled && <LockSimple className="mr-2" />}
-              {isEnabled ? "Saved" : "Save Locally"}
+              {isEnabled ? t`Stored` : t`Store Locally`}
             </Button>
 
             {isEnabled && (
               <Button type="reset" variant="ghost" onClick={onRemove}>
                 <TrashSimple className="mr-2" />
-                Remove
+                {t`Forget`}
               </Button>
             )}
           </div>
@@ -110,36 +113,38 @@ export const OpenAISettings = () => {
 
       <div className="prose prose-sm prose-zinc max-w-full dark:prose-invert">
         <p>
-          Your API key is securely stored in the browser's local storage and is only utilized when
-          making requests to OpenAI via their official SDK. Rest assured that your key is not
-          transmitted to any external server except when interacting with OpenAI's services.
+          <Trans>
+            Your API key is securely stored in the browser's local storage and is only utilized when
+            making requests to OpenAI via their official SDK. Rest assured that your key is not
+            transmitted to any external server except when interacting with OpenAI's services.
+          </Trans>
         </p>
       </div>
 
       <Alert variant="warning">
         <div className="prose prose-neutral max-w-full text-xs leading-relaxed text-primary dark:prose-invert">
-          <span className="font-medium">Note: </span>
-          <span>
+          <Trans>
+            <span className="font-medium">Note: </span>
             By utilizing the OpenAI API, you acknowledge and accept the{" "}
             <a
               href="https://openai.com/policies/terms-of-use"
-              target="_blank"
               rel="noopener noreferrer nofollow"
+              target="_blank"
             >
               terms of use
             </a>{" "}
             and{" "}
             <a
               href="https://openai.com/policies/privacy-policy"
-              target="_blank"
               rel="noopener noreferrer nofollow"
+              target="_blank"
             >
               privacy policy
             </a>{" "}
             outlined by OpenAI. Please note that Reactive Resume bears no responsibility for any
             improper or unauthorized utilization of the service, and any resulting repercussions or
             liabilities solely rest on the user.
-          </span>
+          </Trans>
         </div>
       </Alert>
     </div>