feat: adds translations (#339)

* feat: adds translations

* fix types

dictionaries/en.json

@@ -1,5 +1,6 @@
 {
     "home": {
+         "communityDescription": "Community that groups developers from the province of Latina",
         "nextEventsTitle": "Next Events",
         "nextEventsSubtitle": "Save dates and don't make commitments for upcoming community events!",
         "previousEventsTitle": "Previous Events",
@@ -10,5 +11,67 @@
         "paragraph1": "Looks like you've stumbled into the void.",
         "paragraph2": "But don't panic, just click below to get back on track!",
         "link": "Go Home"
+    },
+    "hero": {
+        "communityOf": "The community of",
+        "pontiniDev": "Developers from Latina",
+        "freeEventsForProfessionalGrowth": "Free events to empower knowledge sharing and professional growth.",
+        "joinUsOnTelegram": "Join us on Telegram!",
+        "members": "Members",
+        "online": "Online"
+    },
+    "newsletter": {
+        "shallWeStayInTouch": "Shall we stay in touch?",
+        "stayUpdated": "Stay always updated.",
+        "joinOurCommunityAndDoNotMissAnyUpdates": "Join our community! Sign up for our newsletter and don't miss any updates on events and news. Stay connected, stay tech-savvy!",
+        "signUp": "Sign Up for Newsletter",
+        "emailAddress": "Email Address",
+        "signupNow": "Sign up Now"
+    },
+    "communityMembers": {
+        "communityMembers": "LiT Community Members",
+        "doYouAttendOrFollowUs": "Do you usually attend our events or follow us on social media? Either way you are part of our community! If you want to be listed here, it's very easy,",
+        "readHere": "read here!"
+    },
+    "feedback": {
+        "feedback": "Feedback",
+        "leaveFeedback": "Leave your feedback to help us improve our community!",
+        "submitFeedback": "Submit a Feedback!",
+        "metaDescription": "Leave your feedback to help us improve our community!",
+        "partecipateActively": "Do partecipate actively to the community life, sharing your opinion on our work and how to improve!",
+        "didYouAttendLastEvent": "Did you attend the last event, ",
+        "of": " of ",
+        "yes": "Yes",
+        "no": "No",
+        "howWouldYouRateEvent": "How would you rate the event?",
+        "isThereAnythingYouLiked": "Is there anything you liked about the event?",
+        "describeShortMostInteresting": "Describe in a few words the most interesting thing you found during the event:",
+        "whatYouLikedMost": "What you liked most?",
+        "weAreSorryYouDidNotAttend":"We are sorry you did not attend the last event, can you tell us why?",
+        "howMuchAreYouSatisfied": "How much are you satisfied with the community?",
+        "doYouHaveSuggestions": "Do you have any suggestions for us?",
+        "writeAdditionalFeedback": "Write additional feedback...",
+        "weReceivedYourFeedback": "We received your feedback, thank you for your time! You can go back to the home now.",
+        "goBack": "Go Back",
+        "errorDesc": "An error occurred, please try again.",
+        "sendFeedback": "Send Feedback",
+        "thankYou": "Thank you!",
+        "errorTitle": "Error",
+        "notCameReasons": {
+            "PERSONAL": "Personal reasons",
+            "NO_TIME_BUT_WANTED": "I wanted to come but I had no time",
+            "NO_INTEREST": "I was not interested in the topic",
+            "DID_NOT_KNOW": "I did not know about the event"
+        }
+    },
+    "admin": {
+        "adminTeam": "Latina In Tech Admin Team",
+        "groupOfPeople": "A group of people who share passion about technology and their local area.",
+        "wereAdmin": "They had been admins"
+    },
+    "events": {
+        "title": "LiT - Events",
+        "events":  "Events",
+        "hereYouCanSee": "Here you can see all the events organized by Latina In Tech."
     }
 }

dictionaries/it.json

@@ -1,5 +1,6 @@
 {
     "home": {
+        "communityDescription": "Community che raccoglie gli sviluppatori della provincia di Latina",
         "nextEventsTitle": "Prossimi Eventi",
         "nextEventsSubtitle": "Fissa le date e non prendere impegni per i prossimi eventi della community!",
         "previousEventsTitle": "Eventi Passati",
@@ -10,5 +11,67 @@
         "paragraph1": "Sembra che tua sia finito in un vicolo cieco.",
         "paragraph2": "Niente panico, basta cliccare sotto per tornare sulla tua strada!",
         "link": "Homepage"
+    },
+    "hero": {
+        "communityOf": "La community degli",
+        "pontiniDev": "Informatici Pontini",
+        "freeEventsForProfessionalGrowth": "Eventi gratuiti per favorire la condivisione di conoscenze e la crescita professionale.",
+        "joinUsOnTelegram": "Unisciti al Gruppo Telegram!",
+         "members": "Membri",
+        "online": "Online"
+    },
+    "newsletter": {        
+        "shallWeStayInTouch": "Rimaniamo in contatto?",
+        "stayUpdated": "Tieniti sempre aggiornato.",
+        "joinOurCommunityAndDoNotMissAnyUpdates": "Unisciti alla nostra community! Iscriviti per non perderti gli eventi e le attività che organizzeremo. Stay connected, stay tech-savvy!",        
+        "signUp": "Iscriviti alla nostra newsletter",        
+        "emailAddress": "Indirizzo email",
+        "signupNow": "Iscriviti subito"
+    },
+    "communityMembers": {
+        "communityMembers": "Membri della Community LiT",
+        "doYouAttendOrFollowUs": "partecipi alle iniziative della community o ci segui online? in ogni caso sei uno di noi! Se vuoi comparire in questo elenco, niente di più semplice,",
+        "readHere": "leggi qui!"
+    },
+    "feedback": {
+        "feedback": "Feedback",
+        "leaveFeedback": "Lascia un feedback per migliorare la community!",        
+        "submitFeedback": "Invia il Feedback!",
+        "metaDescription": "Lascia un feedback sulla tua esperienza con Latina In Tech!",        
+        "partecipateActively": "Partecipa attivamente alla vita della community esprimendo la tua opinione su quanto portato avanti finora e su come migliorarlo!",
+        "didYouAttendLastEvent": "Hai partecipato all'ultimo evento, ",
+        "of": " di ",
+        "yes": "Si",
+        "no": "No",
+        "howWouldYouRateEvent": "Quanto è stato interessante l'evento?",
+        "isThereAnythingYouLiked": "C'è qualcosa che ti ha particolarmente colpito durante l'evento?",
+        "describeShortMostInteresting": "Per favore, descrivi brevemente la cosa più interessante dello scorso evento:",
+        "whatYouLikedMost": "Cosa ti ha colpito di più?",
+        "weAreSorryYouDidNotAttend":"Ci dispiace che non ci sei stato, puoi dirci il motivo?",
+        "howMuchAreYouSatisfied": "Complessivamente quanto sei soddisfatto della community?",
+        "doYouHaveSuggestions": "Hai dei consigli generali per migliorare la community?",
+        "writeAdditionalFeedback": "Scrivi ulteriori feedback...",
+        "weReceivedYourFeedback": "Abbiamo ricevuto il tuo feedback, grazie del contributo alla community! Puoi tornare alla Home.",
+        "goBack": "Torna Indietro",
+        "errorDesc": "Impossibile salvare feedback, si prega di riprovare",
+        "sendFeedback": "Invia Feedback",
+        "thankYou": "Grazie!",
+        "errorTitle": "Errore",
+        "notCameReasons": {
+            "PERSONAL": "Motivi Personali",
+            "NO_TIME_BUT_WANTED": "Non ho avuto tempo ma avrei voluto",
+            "NO_INTEREST": "Non mi interessava il programma",
+            "DID_NOT_KNOW": "Non ne sapevo nulla"
+        }
+    },
+    "admin": {
+        "adminTeam": "Il team di Latina In Tech",
+        "groupOfPeople": "Un gruppo di persone che condividono la passione per la tecnologia e per il proprio territorio.",
+        "wereAdmin": "Sono stati membri del team"
+    },
+    "events": {
+        "title": "LiT - Eventi",
+        "events":  "Eventi",
+        "hereYouCanSee": "Qui puoi vedere tutti gli eventi della community Latina In Tech!"
     }
 }

src/components/Hero.tsx

@@ -4,10 +4,15 @@ import latina from '../../public/assets/latina.jpg';
 import navigationLinks from '@/model/navigation';
 import { useTelegramGroupInfo } from '@/utils/telegram';
 import React from 'react';
+import { Dictionary } from '@/utils/dictionary';
 
 const telegramNav = navigationLinks.find(item => item.name === 'Telegram');
 
-const Hero: React.FC = () => {
+type HeroProps = {
+  translations: Dictionary;
+};
+
+const Hero: React.FC<HeroProps> = ({ translations }: HeroProps) => {
   const [maybeGroupInfo] = useTelegramGroupInfo(telegramNav?.href ?? '');
   return (
     <div className='relative'>
@@ -26,15 +31,16 @@ const Hero: React.FC = () => {
           </div>
           <div className='relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8'>
             <h1 className='text-center text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl'>
-              <span className='block text-white'>La community degli</span>
+              <span className='block text-white'>
+                {translations.hero.communityOf}
+              </span>
               <span className='block bg-primary-lighter bg-clip-text text-transparent'>
-                Informatici Pontini
+                {translations.hero.pontiniDev}
               </span>
             </h1>
             <div className='py-2 bg-opacity-50 mx-auto mt-6 max-w-lg rounded-md border border-transparent bg-slate-400 sm:max-w-3xl'>
               <p className='text-center text-xl text-slate-100'>
-                Eventi gratuiti per favorire la condivisione di conoscenze e la
-                crescita professionale.
+                {translations.hero.freeEventsForProfessionalGrowth}
               </p>
             </div>
             <div className='mx-auto mt-10 flex justify-center'>
@@ -44,14 +50,15 @@ const Hero: React.FC = () => {
                   target='_blank'
                   className='flex items-center justify-between gap-2 rounded-md border border-transparent bg-primary bg-opacity-80 px-4 py-3 text-base font-medium text-white shadow-sm backdrop-blur-sm hover:bg-primary-dark sm:px-8'
                 >
-                  Unisciti al Gruppo Telegram!
+                  {translations.hero.joinUsOnTelegram}
                   {telegramNav.icon && <telegramNav.icon></telegramNav.icon>}
                 </Link>
               )}
             </div>
             {telegramNav && maybeGroupInfo && (
               <div className='mx-auto mt-2 flex justify-center text-gray-400'>
-                {maybeGroupInfo.members} membri {maybeGroupInfo.online} online
+                {maybeGroupInfo.members} {translations.hero.members}{' '}
+                {maybeGroupInfo.online} {translations.hero.online}
               </div>
             )}
           </div>

src/components/LeaveFeedback.tsx

@@ -2,24 +2,30 @@ import Link from 'next/link';
 import React from 'react';
 import { ChatBubbleLeftRightIcon } from '@heroicons/react/24/outline';
 import { useRouter } from 'next/router';
+import { Dictionary } from '@/utils/dictionary';
 
-export const LeaveFeedback = () => {
+type LeaveFeedbackProps = {
+  translations: Dictionary;
+};
+
+export const LeaveFeedback = ({ translations }: LeaveFeedbackProps) => {
   const router = useRouter();
 
   return (
     <div className='text-center'>
       <h2 className='text-3xl font-bold text-gray-900 dark:text-slate-200 sm:text-4xl'>
-        Feedback
+        {translations.feedback.feedback}
       </h2>
       <p className='mx-auto mt-3 max-w-2xl text-xl text-gray-500 dark:text-slate-400 sm:mt-4'>
-        Lascia un feedback per migliorare la community!
+        {translations.feedback.leaveFeedback}
       </p>
       <div className={'mx-auto mt-6 flex justify-center'}>
         <Link
           href={`${router.query.lang}/feedback/new`}
           className='flex items-center justify-between gap-2 rounded-md border border-transparent bg-primary bg-opacity-80 px-4 py-3 text-base font-medium text-white shadow-sm backdrop-blur-sm hover:bg-primary-dark sm:px-8'
         >
-          Lascia un Feedback! <ChatBubbleLeftRightIcon className='h-6 w-6' />
+          {translations.feedback.submitFeedback}{' '}
+          <ChatBubbleLeftRightIcon className='h-6 w-6' />
         </Link>
       </div>
     </div>

src/components/Newsletter.tsx

@@ -1,24 +1,27 @@
+import { Dictionary } from '@/utils/dictionary';
 import React from 'react';
 import { MdOutlineMarkEmailRead } from 'react-icons/md';
 
-export const Newsletter = () => {
+type NewsletterProps = {
+  translations: Dictionary;
+};
+
+export const Newsletter = ({ translations }: NewsletterProps) => {
   return (
     <section className='sm:my-10'>
       <div className='mx-auto px-4 sm:px-6 lg:px-8'>
         <div className='relative -mx-4 overflow-hidden bg-slate-300 py-16 px-4 dark:bg-slate-800 sm:px-6 md:mx-0 md:rounded-3xl md:px-16 xl:px-24'>
           <div className='relative mx-auto grid max-w-2xl grid-cols-1 gap-x-32 gap-y-14 text-gray-900 dark:text-slate-200 xl:max-w-none xl:grid-cols-2'>
             <div>
               <h2 className='text-4xl font-extrabold tracking-tight  sm:text-4xl'>
-                <span>Rimaniamo in contatto?</span>
+                <span>{translations.newsletter.shallWeStayInTouch}</span>
                 <br />
                 <span className='bg-gradient-to-br from-primary-dark to-primary-light dark:from-primary dark:to-primary-lighter bg-clip-text text-transparent'>
-                  Tieniti sempre aggiornato.
+                  {translations.newsletter.stayUpdated}
                 </span>
               </h2>
               <p className='mt-2 text-lg'>
-                Unisciti alla nostra community! Iscriviti per non perderti gli
-                eventi e le attività che organizzeremo. Stay connected, stay
-                tech-savvy!
+                {translations.newsletter.joinOurCommunityAndDoNotMissAnyUpdates}
               </p>
             </div>
             <form
@@ -29,7 +32,7 @@ export const Newsletter = () => {
               target='_self'
             >
               <h3 className='text-lg font-semibold tracking-tight text-primary-dark dark:text-primary-light'>
-                Iscriviti alla nostra newsletter
+                {translations.newsletter.signUp}
                 <span aria-hidden='true'>↓</span>
               </h3>
               <span className='hidden'>
@@ -52,15 +55,15 @@ export const Newsletter = () => {
                   name='EMAIL'
                   id='mce-EMAIL'
                   required
-                  placeholder='Indirizzo email'
+                  placeholder={translations.newsletter.emailAddress}
                   className='-my-2.5 flex-auto border-none bg-transparent pl-6 pr-2.5 text-base text-slate-900 placeholder:text-slate-400 focus:ring-0'
                 />
                 <button
                   className='inline-flex justify-center rounded-2xl bg-primary bg-opacity-80 px-4 py-3 text-base font-medium text-white shadow-sm backdrop-blur-sm hover:bg-primary-dark sm:px-8'
                   type='submit'
                 >
                   <span className='sr-only sm:not-sr-only'>
-                    Iscriviti subito
+                    {translations.newsletter.signupNow}
                   </span>
                   <span className='sm:hidden'>
                     <MdOutlineMarkEmailRead />

src/components/event/EventWidget.tsx

@@ -43,7 +43,13 @@ const EventWidget: React.FC<Props> = ({ event }: Props) => {
   }, [isPast]);
 
   return (
-    <Link href={`${router.query.lang}/events/${event.slug}`} legacyBehavior>
+    <Link
+      href={{
+        pathname: '/[lang]/events/[slug]',
+        query: { lang: router.query.lang, slug: event.slug }
+      }}
+      legacyBehavior
+    >
       <div className={getEventWidgetClasses()}>
         {renderEventImage()}
         <div className='flex flex-1 flex-col gap-2 p-4'>

src/pages/[lang]/admins/team.tsx

@@ -6,8 +6,11 @@ import {
   BsTwitter,
   BsFillHouseDoorFill
 } from 'react-icons/bs';
-import { i18n } from 'i18n.config';
+import { i18n, Locale } from 'i18n.config';
 import { useRouter } from 'next/router';
+import { Dictionary, getDictionary } from '@/utils/dictionary';
+import { GetStaticProps } from 'next';
+import { getAllLocales } from '@/utils/locale';
 
 type Admin = {
   name: string;
@@ -149,7 +152,32 @@ const AdminCard: React.FC<Admin> = ({
   );
 };
 
-const AdminTeam = () => {
+type AdminTeamProps = {
+  translations: Dictionary;
+};
+
+export const getStaticProps: GetStaticProps = (async context => {
+  const lang = context.params?.lang as string;
+  const dictionary = await getDictionary(lang as Locale);
+  return { props: { translations: dictionary } };
+}) satisfies GetStaticProps<AdminTeamProps>;
+
+export const getStaticPaths = async () => {
+  const locales = getAllLocales();
+
+  return {
+    paths: locales.map(locale => {
+      return {
+        params: {
+          lang: locale
+        }
+      };
+    }),
+    fallback: false
+  };
+};
+
+const AdminTeam = ({ translations }: AdminTeamProps) => {
   const router = useRouter();
   const locale = i18n.locales.filter(
     locale => router?.query.lang === locale
@@ -162,11 +190,10 @@ const AdminTeam = () => {
         <div className='w-[100%] md:w-fit p-4 m-4 justify-center rounded-md shadow-md bg-slate-200 dark:bg-slate-800'>
           <div className='flex flex-col items-center justify-center space-y-5 mb-4 sm:space-y-4 md:max-w-xl lg:max-w-3xl xl:max-w-none'>
             <h2 className='text-3xl font-bold dark:text-slate-200 sm:text-4xl text-center'>
-              Il team di Latina In Tech
+              {translations.admin.adminTeam}
             </h2>
             <p className='mx-auto max-w-2xl text-m text-center text-gray-500 dark:text-slate-400 sm:mt-2'>
-              Un gruppo di persone che condividono la passione per la tecnologia
-              e per il proprio territorio.
+              {translations.admin.groupOfPeople}
             </p>
           </div>
           <div className='grid grid-cols-1 justify-items-center md:grid-cols-3 lg:grid-cols-4 gap-4'>
@@ -179,7 +206,7 @@ const AdminTeam = () => {
           {admins.filter(a => !(a.active ?? true)).length > 0 && (
             <div>
               <h2 className='text-2xl font-bold dark:text-slate-200 sm:text-2xl text-center mt-4 mb-2'>
-                Sono stati membri del team
+                {translations.admin.wereAdmin}
               </h2>
               <div className='grid grid-cols-1 justify-items-center md:grid-cols-3 lg:grid-cols-4 gap-4'>
                 {admins