Implement the cookie banner i18n spanish version

Author: MarioYellowy

src/components/CookieBanner.astro

@@ -2,6 +2,12 @@
 import { Image } from "astro:assets"
 import ferrisCooking from "~/assets/images/webp/ferris_cooking.jpg"
 
+import { defaultLang, ui } from "~/i18n/ui"
+
+const lang = defaultLang
+
+type TranslationKey = keyof (typeof ui)[typeof defaultLang]
+const t = (key: TranslationKey) => ui[lang][key]
 const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
 ---
 
@@ -17,33 +23,29 @@ const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
     <div class="relative aspect-4/3 md:aspect-auto">
       <Image
         src={ferrisCooking}
-        alt="Ferris cocinando cookies"
+        alt={t("cookie.banner.img.alt")}
         class="absolute inset-0 w-full h-full object-cover"
       />
     </div>
 
     <div class="flex flex-col justify-center gap-5 p-6 overflow-y-auto">
       <div class="flex flex-col gap-3">
-        <h2 class="text-secondary font-semibold text-lg">🍪 Aviso de Cookies</h2>
+        <h2 class="text-secondary font-semibold text-lg">{t("cookie.banner.title")}</h2>
         <p class="text-sm text-secondary/70 leading-relaxed">
-          Utilizamos cookies propias y de terceros para mejorar tu experiencia
-          en nuestro sitio web, analizar el tráfico y entender cómo interactúan
-          los usuarios con nuestro contenido.
+          {t("cookie.banner.purpose")}
         </p>
         <p class="text-sm text-secondary/70 leading-relaxed">
-          También utilizamos <span class="text-secondary font-medium">Microsoft Clarity</span>,
-          una herramienta de análisis que nos permite comprender el comportamiento
-          de navegación mediante mapas de calor y grabaciones anónimas de sesiones,
-          con el fin de optimizar nuestro servicio.
+          {t("cookie.banner.company.also")}<span class="text-secondary font-medium">{t("cookie.banner.company")}</span>
+          {t("cookie.banner.company.description")}
         </p>
         <p class="text-xs text-secondary/50 leading-relaxed">
-          Al hacer clic en "Aceptar", consientes el uso de cookies según nuestra
+          {t("cookie.banner.accept")}
           <a
             href="/privacidad"
             target="_blank"
             rel="noopener noreferrer"
             class="text-yellow hover:underline"
-          >Política de Privacidad</a>.
+          >{t("policy.privacy")}</a>.
         </p>
       </div>
 
@@ -52,13 +54,13 @@ const projectId = import.meta.env.VITE_CLARITY_PROJECT_ID
           id="reject-cookies"
           class="flex-1 px-4 py-2 text-sm text-secondary/60 border border-stroke-color rounded-lg hover:bg-stroke-color/20 transition-colors cursor-pointer"
         >
-          Rechazar
+          {t("text.denied")}
         </button>
         <button
           id="accept-cookies"
           class="flex-1 px-4 py-2 text-sm bg-yellow text-primary font-semibold rounded-lg hover:opacity-90 transition-opacity cursor-pointer"
         >
-          Aceptar
+          {t("text.accept")}
         </button>
       </div>
     </div>

src/i18n/ui.ts

@@ -6,19 +6,35 @@ export const defaultLang = "es"
 
 export const ui = {
 	es: {
+		"policy.privacy": "Política de Privacidad",
+		"text.denied": "Rechazar",
+		"text.accept": "Aceptar",
 		"nav.home": "Inicio",
 		"nav.learn": "Aprender",
 		"nav.privacy": "Privacidad",
 
 		"track.badge.beginner": "Principiante",
 		"track.badge.advanced": "Avanzado",
-		"track.lessons": "lecciones",
+		"track.lessons": "Lecciones",
 		"track.start": "Empezar",
 		"track.continue": "Continuar",
 		"track.certificate": "Ver certificado",
 
 		"lesson.content": "Contenido",
 		"lesson.editor": "Editor",
 		"lesson.more_below": "Hay más contenido abajo",
+
+		"cookie.banner.img.alt": "Ferris cocinando cookies",
+		"cookie.banner.title": "🍪 Aviso de Cookies",
+		"cookie.banner.purpose": `Utilizamos cookies propias y de terceros para mejorar tu experiencia
+          en nuestro sitio web, analizar el tráfico y entender cómo interactúan
+          los usuarios con nuestro contenido.`,
+		"cookie.banner.company.also": "También utilizamos ",
+		"cookie.banner.company": "Microsoft Clarity",
+		"cookie.banner.company.description": `,
+          una herramienta de análisis que nos permite comprender el comportamiento
+          de navegación mediante mapas de calor y grabaciones anónimas de sesiones,
+          con el fin de optimizar nuestro servicio.`,
+		"cookie.banner.accept": `Al hacer clic en "Aceptar", consientes el uso de cookies según nuestra`,
 	},
 } as const