initial

apps/client/pages/settings/index.vue

@@ -0,0 +1,62 @@
+<template>
+  <!--      <UiSelect id="locale" label="" :model-value="currentLocale" :options="localesOption" /> -->
+  <!--      <UiSelect id="timezone" v-model="currentTimeZone" label="" class="w-50" searchable :options="['(GMT+03.00) Москва, Россия']" /> -->
+  <PageBlock title="Time and language">
+    <SettingsProperty icon="language" title="Language">
+      <UiDropdown placement="bottom">
+        <UiButton
+          right-icon="chevron-down"
+          type="outlined"
+          size="large"
+          color="secondary"
+          style="text-transform: capitalize"
+        >
+          {{ currentLocale }}
+        </UiButton>
+
+        <template #dropdown>
+          <UiDropdownItem
+            v-for="locale in locales"
+            :key="locale.code"
+            :active="currentLocale === locale.code"
+            @click="setLocale(locale.code)"
+          >
+            {{ locale.name }}
+          </UiDropdownItem>
+        </template>
+      </UiDropdown>
+    </SettingsProperty>
+    <SettingsProperty icon="clock" title="Time zone" text="It is used to process transactions, track balances, and create reports.">
+      <UiDropdown placement="bottom">
+        <UiButton
+          right-icon="chevron-down"
+          type="outlined"
+          size="large"
+          color="secondary"
+          style="text-transform: capitalize"
+        >
+          {{ currentTimeZone }}
+        </UiButton>
+
+        <template #dropdown>
+          <UiDropdownItem
+            v-for="timezone in ['(GMT+03.00) Москва, Россия']"
+            :key="timezone"
+            :active="currentLocale === timezone"
+          >
+            {{ timezone }}
+          </UiDropdownItem>
+        </template>
+      </UiDropdown>
+    </SettingsProperty>
+  </PageBlock>
+</template>
+
+<script setup>
+const { locale: currentLocale, locales, setLocale } = useI18n()
+
+const currentTimeZone = '(GMT+03.00) Москва, Россия'
+</script>
+
+<style lang="scss">
+</style>