mpa/langs/currency

components/CurrSelector.vue

@@ -0,0 +1,71 @@
+<template>
+  <UCollapsible
+    v-model="isOpen"
+    class="flex flex-col gap-2"
+    :ui="{
+      content: 'absolute top-20',
+    }"
+  >
+    <UButton
+      color="neutral"
+      variant="subtle"
+      trailing-icon="i-lucide-chevron-down"
+      class="m-0 bg-bg-dark ring-0 text-xl font-medium uppercase cursor-pointer hover:bg-inherit"
+      block
+      @click="isOpen = !isOpen"
+    >
+      {{ selectedCountry }}/{{ selectedCurrency }}
+    </UButton>
+
+    <template #content>
+      <div class="flex flex-col">
+        <USelect
+          v-model="selectedCountry"
+          :items="menuStore.countryList"
+          class="w-48"
+          value-key="iso_code"
+        >
+          <template #leading="{ modelValue }">
+            <div class="flex items-center gap-2 text-xl font-medium uppercase">
+              {{ modelValue }}
+            </div>
+          </template>
+
+          <template #item="{ item }">
+            <div class="flex items-center gap-2 cursor-pointer w-full">
+              <p class="text-xl font-medium">{{ item?.name }}</p>
+            </div>
+          </template>
+        </USelect>
+        <USelect
+          v-model="selectedCurrency"
+          :items="menuStore.currencies"
+          class="w-48"
+          value-key="iso_code"
+        >
+          <template #leading="{ modelValue }">
+            <div class="flex items-center gap-2 text-xl font-medium uppercase">
+              {{ modelValue }}
+            </div>
+          </template>
+
+          <template #item="{ item }">
+            <div class="flex items-center gap-2 cursor-pointer w-full">
+              <p class="text-xl font-medium">{{ item?.name }}</p>
+            </div>
+          </template>
+        </USelect>
+      </div>
+    </template>
+  </UCollapsible>
+</template>
+
+<script setup lang="ts">
+import { useI18n } from "#imports";
+
+const isOpen = ref(false);
+const menuStore = useMenuStore();
+
+const selectedCountry = ref(menuStore.countryList[0].iso_code);
+const selectedCurrency = ref(menuStore.currencies[0].iso_code);
+</script>

components/HeaderBlock.vue

@@ -31,6 +31,7 @@
               <i class="uil uil-shopping-cart text-[31px] cursor-pointer"></i>
             </div>
             <LangSwitcher />
+            <CurrSelector />
             <ThemeSwitcher />
             <button
               class="hover:bg-button-hover bg-button cursor-pointer rounded-xl px-6 py-3 font-medium text-white transition-all"
@@ -284,7 +285,6 @@
 import LangSwitcher from "./LangSwitcher.vue";
 
 const menuStore = useMenuStore();
-const store = useStore();
 const open = ref(false);
 const colorMode = useColorMode();
 

components/LangSwitcher.vue

@@ -17,8 +17,8 @@
     @update:model-value="setLocale"
   >
     <template #leading="{ modelValue }">
-      <div class="flex items-center gap-2 text-xl font-medium">
-        {{ locales.find((item) => item.code === modelValue)?.name }}
+      <div class="flex items-center gap-2 text-xl font-medium uppercase">
+        {{ locales.find((item) => item.code === modelValue)?.code }}
       </div>
     </template>
 
@@ -28,7 +28,7 @@
           :name="item.icon as string"
           class="size-5 rounded-full border border-button/40"
         />
-        <p class="text-xl font-medium">{{ item.name }}</p>
+        <p class="text-xl font-medium uppercase">{{ item.code }}</p>
       </div>
     </template>
   </USelect>

components/section/main-page/MainBlocks.vue

@@ -42,16 +42,16 @@
 
     <!-- Map block with same layout rules -->
     <div class="w-full xl:max-w-[48%] md:mx-10 xl:m-0 flex flex-col gap-4 items-center">
-      <h1>Jsme tu pro vás napříč Evropou</h1>
+      <h1 class="text-sm sm:text-xl uppercase">Jsme tu pro vás napříč Evropou</h1>
       <MapBlock />
       <div class="flex items-center gap-4 w-full justify-end">
         <div class="flex items-center gap-2">
-          <div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
-          <p>Partners</p>
+          <div class="w-3 h-3 rounded-[2.8px] bg-button"></div>
+          <p class="text-sm sm:text-lg">Partners</p>
         </div>
         <div class="flex items-center gap-2">
-          <div class="w-2 h-2 rounded-[2px] bg-accent-green"></div>
-          <p>Customers</p>
+          <div class="w-3 h-3 rounded-[2.8px] bg-bg-block"></div>
+          <p class="text-sm sm:text-lg">Customers</p>
         </div>
       </div>
     </div>
@@ -72,32 +72,9 @@ type Component = {
   ];
 };
 
-interface Partner {
-  code: string;
-  country_iso: string;
-  region_iso: string;
-  first_name: string;
-  last_name: string;
-  job_position: string;
-  commissioning_entity_name: string;
-}
-
 const props = defineProps<{
   component: Component;
   data: Object;
   infoData: Object;
 }>();
-
-const countryISOs = ref("");
-const isDefault = ref<boolean>(true);
-const activeCountry = ref<string>("");
-
-let partnersList = ref([] as Partner[]);
-let partnersCountries = ref([] as any[]);
-
-const backToEurope = () => {
-  isDefault.value = true;
-  activeCountry.value = "";
-  partnersList.value = [];
-};
 </script>

components/section/main-page/MainProducts.vue

@@ -58,7 +58,7 @@
 <script lang="ts" setup>
 import { ref, onMounted, onBeforeUnmount } from "vue";
 
-const props = defineProps<{ component: Component }>();
+defineProps<{ component: Component }>();
 type Component = {
   image_collection: string;
   section_id: string;
@@ -84,15 +84,13 @@ async function updateItemCount() {
   else itemCount.value = 1;
 }
 
-watch(itemCount, async() => {
+watch(itemCount, async () => {
   await productStore.getList(itemCount.value);
 });
 
 onMounted(async () => {
   await updateItemCount();
   window.addEventListener("resize", updateItemCount);
-
-  await productStore.getList(itemCount.value);
 });
 
 onBeforeUnmount(() => {