feat: extract translated strings from ContactForm

src/components/atoms/select/Select.tsx

@@ -1,4 +1,5 @@
 import { Field, useField } from 'formik';
+import { useTranslation } from 'react-i18next';
 
 import clsxm from '@/lib/clsxm';
 
@@ -17,6 +18,8 @@ export const Select = ({ id, label, options }: SelectProps) => {
   const fieldProps = { label, id, name: id, options };
   const [_, meta] = useField(fieldProps);
 
+  const { t } = useTranslation();
+
   return (
     <label htmlFor={id} className='mb-2 mt-6 flex flex-col font-bold'>
       {label}
@@ -35,8 +38,8 @@ export const Select = ({ id, label, options }: SelectProps) => {
       >
         <option value='none'>Please select</option>
         {options.map((option) => (
-          <option value={option.value} key={option.key}>
-            {option.value}
+          <option value={t(option.value)} key={option.key}>
+            {t(option.value)}
           </option>
         ))}
       </Field>

src/components/molecules/ContactForm/ContactForm.tsx

@@ -2,65 +2,51 @@
 
 import { Form, Formik } from 'formik';
 import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import * as Yup from 'yup';
 
 import { Input } from '@/components/atoms/Input/Input';
 import { Select } from '@/components/atoms/select/Select';
 import { TextArea } from '@/components/atoms/TextArea/TextArea';
 import Button from '@/components/buttons/Button';
 
+export interface ContactFormProps {
+  subjects: Subject[];
+}
+
+export interface Subject {
+  key: string;
+  value: string;
+}
+
 const ContactForm = () => {
   const [success, setSuccess] = useState(false);
   const [error, setError] = useState(false);
 
+  const { t } = useTranslation();
+
   const subjects = [
-    {
-      key: 'dev',
-      value: '👩🏻‍💻 I need a website / app developed',
-    },
-    {
-      key: 'work',
-      value: "🤝 Let's work together on something",
-    },
-    {
-      key: 'recruiter',
-      value: "👔 I'm a recruiter and want to hire you",
-    },
-    {
-      key: 'feedback',
-      value: "💡 I've got feedback on this website",
-    },
-    {
-      key: 'problem',
-      value: '🤕 Reporting a problem',
-    },
-    {
-      key: 'general',
-      value: '🙋 General inquiry',
-    },
-    {
-      key: 'other',
-      value: '❓ Other',
-    },
+    { key: 'dev', value: 'contacts.subjects.dev' },
+    { key: 'work', value: 'contacts.subjects.work' },
+    { key: 'recruiter', value: 'contacts.subjects.recruiter' },
+    { key: 'feedback', value: 'contacts.subjects.feedback' },
+    { key: 'problem', value: 'contacts.subjects.problem' },
+    { key: 'general', value: 'contacts.subjects.general' },
+    { key: 'other', value: 'contacts.subjects.other' },
   ];
 
   const validationSchema = Yup.object({
-    name: Yup.string().required("Don't be a stranger :)"),
+    name: Yup.string().required(t('contacts.fields.name.required')),
     email: Yup.string()
-      .email(
-        'Something seems off with the address you entered 🤔 Please double-check and try again.',
-      )
-      .required(
-        "Required - otherwise it's kinda hard for me to reply to you 🤷‍♀️",
-      ),
+      .email(t('contacts.fields.email.invalid'))
+      .required(t('contacts.fields.email.required')),
     subject: Yup.mixed()
-      .oneOf(subjects.map((subject) => subject.value))
-      .required(
-        "Don't leave me hanging! I need a subject to know what's up 🧐",
-      ),
-    message: Yup.string().required(
-      'One does not simply submit a contact form without a message.',
-    ),
+      .oneOf(
+        subjects.map((subject) => t(subject.value)),
+        t('contacts.fields.subject.select'),
+      )
+      .required(t('contacts.fields.subject.required')),
+    message: Yup.string().required(t('contacts.fields.message.required')),
   });
 
   const handleSubmit = async (
@@ -113,45 +99,50 @@ const ContactForm = () => {
           <Form role='form' className='mt-4'>
             {success && (
               <div className='rounded-md bg-green-100 px-4 py-2 text-green-600 ring-1 ring-green-600 font-semibold'>
-                Thanks for your message! 🤗 I will get back to you as soon as
-                possible.
+                {t('contacts.success')}
               </div>
             )}
             {error && (
               <div className='rounded-md bg-red-100 px-4 py-2 text-red-600 ring-1 ring-red-600 font-semibold'>
-                Whoops, something went wrong on our side! 😟 <br /> Please try
-                again - if the issue persists, reach out directly at
-                <a className='ms-1 underline' href='mailto:info@martacodes.it'>
-                  info@martacodes.it
-                </a>
+                {t('contacts.error')}
               </div>
             )}
 
-            <Input id='name' label='Name' placeholder='Bilbo Baggins' />
+            <Input
+              id='name'
+              label={t('contacts.fields.name.label')}
+              placeholder='Bilbo Baggins'
+            />
 
             <Input
               id='company'
-              label='Company'
+              label={t('contacts.fields.company.label')}
               placeholder='CyberWizards Ltd.'
             />
 
             <Input
               id='email'
-              label='Email Address'
+              label={t('contacts.fields.email.label')}
               placeholder='hr@hogwarts.edu'
             />
 
-            <Select id='subject' label='Subject' options={subjects} />
+            <Select
+              id='subject'
+              label={t('contacts.fields.subject.label')}
+              options={subjects}
+            />
 
             <TextArea
               id='message'
-              label='Message'
-              placeholder="What's on your mind? The email's the limit! 🪄✨"
+              label={t('contacts.fields.message.label')}
+              placeholder={t('contacts.fields.message.placeholder')}
             />
 
             <div className='mt-6 flex justify-end'>
               <Button type='submit' disabled={isSubmitting} className='group'>
-                {isSubmitting ? 'Working on it...' : 'Send message'}
+                {isSubmitting
+                  ? t('contacts.button.loading')
+                  : t('contacts.button.send')}
               </Button>
             </div>
           </Form>

src/data/locales/en.json

@@ -52,7 +52,46 @@
     }
   },
   "contacts": {
-    "title": "Contact me"
+    "title": "Contact me",
+    "subjects": {
+      "dev": "👩🏻‍💻 I need a website / app developed",
+      "work": "🤝 Let's work together on something",
+      "recruiter": "👔 I'm a recruiter and want to hire you",
+      "feedback": "💡 I've got feedback on this website",
+      "problem": "🤕 Reporting a problem",
+      "general": "🙋 General inquiry",
+      "other": "❓ Other"
+    },
+    "fields": {
+      "name": {
+        "label": "Name",
+        "required": "Don't be a stranger :)"
+      },
+      "company": {
+        "label": "Company"
+      },
+      "email": {
+        "label": "Email Address",
+        "invalid": "Something seems off with the address you entered 🤔 Please double-check and try again.",
+        "required": "Required - otherwise it's kinda hard for me to reply to you 🤷‍♀️"
+      },
+      "subject": {
+        "label": "Subject",
+        "select": "Please select a subject",
+        "required": "Don't leave me hanging! I need a subject to know what's up 🧐"
+      },
+      "message": {
+        "label": "Message",
+        "required": "\"One does not simply submit a contact form without a message.\"",
+        "placeholder": "What's on your mind? The email's the limit! 🪄✨"
+      }
+    },
+    "success": "Thanks for your message! 🤗 I will get back to you as soon as possible.",
+    "error": "Whoops, something went wrong on our side! 😟 <br /> Please try again - if the issue persists, reach out directly at <a className='ms-1 underline' href='mailto:info@martacodes.it'>info@martacodes.it</a>",
+    "button": {
+      "send": "Send message",
+      "loading": "Working on it..."
+    }
   },
   "uses": {
     "title": "Uses"

src/data/locales/it.json

@@ -51,7 +51,46 @@
     }
   },
   "contacts": {
-    "title": "Contattami"
+    "title": "Contattami",
+    "subjects": {
+      "dev": "👩🏻‍💻 Sviluppo di siti web / applicazioni",
+      "work": "🤝 Collaboriamo su un progetto",
+      "recruiter": "👔 Sono un recruiter e vorrei assumerti",
+      "feedback": "💡 Feedback su questo sito",
+      "problem": "🤕 Segnalazione problemi",
+      "general": "🙋 Richiesta generica",
+      "other": "❓ Altro"
+    },
+    "fields": {
+      "name": {
+        "label": "Nome",
+        "required": "Non essere timido/a :)"
+      },
+      "company": {
+        "label": "Azienda"
+      },
+      "email": {
+        "label": "Email",
+        "invalid": "Qualcosa non quadra nell'indirizzo inserito 🤔 Controllalo e riprova",
+        "required": "Obbligatoria - altrimenti è un po' difficile risponderti 🤷‍♀️"
+      },
+      "subject": {
+        "label": "Oggetto",
+        "select": "Scegli un'opzione",
+        "required": "Non lasciarmi in sospeso! 🧐"
+      },
+      "message": {
+        "label": "Messaggio",
+        "required": "\"Non si invia con facilità un’email senza contenuto.\" (cit.)",
+        "placeholder": "Cos'hai in mente? L'e-mail è il limite! 🪄✨"
+      }
+    },
+    "success": "Grazie per il messaggio! 🤗 Ti risponderò al più presto.",
+    "error": "Ops, qualcosa è andato storto! 😟 <br /> Prova di nuovo, e se il problema persiste scrivi direttamente a <a className='ms-1 underline' href='mailto:info@martacodes.it'>info@martacodes.it</a>",
+    "button": {
+      "send": "Invia messaggio",
+      "loading": "Invio in corso..."
+    }
   },
   "uses": {
     "title": "Cose che uso"