From fb4c831c0649808383bf4cbd847690fe682279ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa?= <mherrezuelo94@hotmail.com>
Date: Tue, 29 Jul 2025 17:38:12 +0200
Subject: [PATCH] gestionar idioma con states de vuex

---
 data/cat/index.json        |  4 +++
 data/es/index.json         |  4 +++
 layouts/default.vue        |  4 +--
 package-lock.json          | 15 ++++++++++-
 package.json               |  3 ++-
 pages/[langcode]/index.vue | 53 ++++++++++++++++++++++++++++++++++++++
 pages/index.vue            | 34 ++++++++++--------------
 plugins/vuex.client.js     |  5 ++++
 store/index.js             |  8 ++++++
 store/langcode.js          | 18 +++++++++++++
 10 files changed, 124 insertions(+), 24 deletions(-)
 create mode 100644 data/cat/index.json
 create mode 100644 data/es/index.json
 create mode 100644 pages/[langcode]/index.vue
 create mode 100644 plugins/vuex.client.js
 create mode 100644 store/index.js
 create mode 100644 store/langcode.js

diff --git a/data/cat/index.json b/data/cat/index.json
new file mode 100644
index 0000000..a9e6bf2
--- /dev/null
+++ b/data/cat/index.json
@@ -0,0 +1,4 @@
+{
+  "title": "Benvingut",
+  "body": "Aquest és el contingut en català."
+}
\ No newline at end of file
diff --git a/data/es/index.json b/data/es/index.json
new file mode 100644
index 0000000..f4a5c28
--- /dev/null
+++ b/data/es/index.json
@@ -0,0 +1,4 @@
+{
+  "title": "Bienvenido",
+  "body": "Este es el contenido en español."
+}
diff --git a/layouts/default.vue b/layouts/default.vue
index 9d8b46b..7890c73 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,10 +1,10 @@
 <template>
-  <div class="min-h-screen flex flex-col">
+  <div>
     <header>
       <NavBar />
     </header>
 
-    <main class="flex-1">
+    <main class="min-h-dvh">
       <slot />
     </main>
 
diff --git a/package-lock.json b/package-lock.json
index f1d4835..790604c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,8 @@
         "nuxt": "^3.17.7",
         "tailwindcss": "^4.1.11",
         "vue": "^3.5.17",
-        "vue-router": "^4.5.1"
+        "vue-router": "^4.5.1",
+        "vuex": "^4.0.2"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -13465,6 +13466,18 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/web-streams-polyfill": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.3.3.tgz",
diff --git a/package.json b/package.json
index 448371b..33345fc 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "nuxt": "^3.17.7",
     "tailwindcss": "^4.1.11",
     "vue": "^3.5.17",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "vuex": "^4.0.2"
   }
 }
diff --git a/pages/[langcode]/index.vue b/pages/[langcode]/index.vue
new file mode 100644
index 0000000..38fcc92
--- /dev/null
+++ b/pages/[langcode]/index.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <div>
+    <h1>{{ content.title }}</h1>
+    <p>{{ content.body }}</p>
+  </div>
+
+    <p>Idioma actual: {{ $store.getters['langcode'] }}</p>
+    <p>Ruta actual: {{ $route.params.langcode }}</p>
+    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded" @click="cambiarIdioma">
+      {{ $store.getters['langcode'] === 'es' ? 'Cambiar a Català' : 'Canviar a espanyol' }}
+    </button>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex';
+export default {
+  data() {
+    return {
+      content: {},
+    };
+  },
+  computed: {
+    ...mapGetters(['langcode']),
+  },
+  async created() {
+    const langcode = this.$route.params.langcode;
+    try {
+      const res = await import(`~/data/${langcode}/index.json`);
+      this.content = res.default;
+    } catch (err) {
+      console.error('Error al cargar contenido:', err);
+      this.content = {
+        title: 'Contenido no disponible',
+        body: 'No se pudo cargar el contenido.',
+      };
+    }
+  },
+  methods: {
+    ...mapActions(['setLangcode']),
+    cambiarIdioma() {
+      const nuevoIdioma = this.langcode === 'es' ? 'cat' : 'es';
+      this.setLangcode(nuevoIdioma);
+      this.$router.push({ path: `/${nuevoIdioma}` });
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index f411e45..7e4dfd5 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,21 +1,15 @@
-<template>
-  <div class="text-center max-w-xl mx-auto flex flex-col items-center justify-center h-screen">
-      <h1 class="text-2xl md:text-3xl font-medium leading-snug">
-        Estamos mejorando el Kit,<br/>
-        pronto estarán disponibles todas sus herramientas.
-      </h1>
+<script>
+export default {
+  data() {
+    return {
+      lang: '',
+    };
+  },
+  mounted() {
+    const langcode = this.$store.getters['langcode'];
+    this.lang = langcode;
 
-      <!-- Texto secundario -->
-      <p class="mt-6 text-base text-gray-700">
-        Síguenos en
-        <a
-          href="https://www.instagram.com/kitecosocial/"
-          class="text-[#5636d0] font-medium hover:underline"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          @kit-eco.social
-        </a>
-      </p>
-    </div>
-</template>
+    this.$router.replace(`/${langcode}`);
+  },
+};
+</script>
diff --git a/plugins/vuex.client.js b/plugins/vuex.client.js
new file mode 100644
index 0000000..5f0c7ff
--- /dev/null
+++ b/plugins/vuex.client.js
@@ -0,0 +1,5 @@
+import { kitecosocialStore } from '~/store/index';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.use(kitecosocialStore);
+});
diff --git a/store/index.js b/store/index.js
new file mode 100644
index 0000000..a103bcf
--- /dev/null
+++ b/store/index.js
@@ -0,0 +1,8 @@
+import { createStore } from 'vuex';
+import { langcodeModule } from './langcode';
+
+export const kitecosocialStore = createStore({
+  modules: {
+    langcode: langcodeModule,
+  },
+});
\ No newline at end of file
diff --git a/store/langcode.js b/store/langcode.js
new file mode 100644
index 0000000..b20f139
--- /dev/null
+++ b/store/langcode.js
@@ -0,0 +1,18 @@
+export const langcodeModule = {
+  state: () => ({ 
+    langcode: 'es'
+  }),
+  mutations: {
+    SET_LANGCODE: (state, langcode) => {
+      state.langcode = langcode;
+    }
+  },
+  actions: {
+    setLangcode: ({ commit }, langcode) => {
+      commit("SET_LANGCODE", langcode);
+    }
+  },
+  getters: {
+    langcode: (state) => state.langcode
+  },
+};
\ No newline at end of file