Added vue frontend project, fixed swagger path

2026-04-05 21:51:03 +03:00
parent 9d845c8899
commit 4902889401
35 changed files with 3810 additions and 475 deletions
@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import {Calendar, Heart, Home, Sparkles, Wallet} from 'lucide-vue-next';
+
+interface NavItem {
+  icon: unknown;
+  label: string;
+  id: string;
+}
+
+const props = defineProps<{
+  activeScreen: string;
+}>();
+
+const emit = defineEmits<{
+  navigate: [screen: string];
+}>();
+
+const navItems: NavItem[] = [
+  { icon: Calendar, label: 'Calendar', id: 'calendar' },
+  { icon: Wallet, label: 'Finance', id: 'finance' },
+  { icon: Home, label: 'Home', id: 'home' },
+  { icon: Heart, label: 'Votes', id: 'votes' },
+  { icon: Sparkles, label: 'Intimacy', id: 'intimacy' },
+];
+</script>
+
+<template>
+  <nav class="pointer-events-none fixed bottom-0 left-0 right-0 mx-auto max-w-md px-5 pb-5">
+    <div class="pointer-events-auto rounded-[20px] border border-white/[0.08] bg-[#1A1A24]/95 px-2 py-3 shadow-[0_8px_32px_rgba(0,0,0,0.6)] backdrop-blur-xl">
+      <div class="flex items-center justify-between">
+        <button
+          v-for="item in navItems"
+          :key="item.id"
+          type="button"
+          @click="emit('navigate', item.id)"
+          :class="[
+            'relative flex flex-col items-center gap-1.5 py-2 transition-all',
+            item.id === 'home' ? 'px-5' : 'px-3',
+          ]"
+        >
+          <div
+            v-if="props.activeScreen === item.id"
+            class="absolute inset-0 rounded-[14px] border border-purple-500/20 bg-gradient-to-br from-purple-500/15 to-blue-500/15"
+          />
+
+          <div
+            v-if="item.id === 'home'"
+            :class="[
+              'relative z-10 flex h-12 w-12 items-center justify-center rounded-full transition-all',
+              props.activeScreen === item.id
+                ? 'bg-gradient-to-br from-purple-500 to-blue-600 shadow-lg shadow-purple-500/30'
+                : 'bg-zinc-800',
+            ]"
+          >
+            <component
+              :is="item.icon"
+              :class="[
+                'h-6 w-6',
+                props.activeScreen === item.id ? 'text-white' : 'text-zinc-400',
+              ]"
+              :stroke-width="props.activeScreen === item.id ? 2.5 : 2"
+            />
+          </div>
+
+          <template v-else>
+            <component
+              :is="item.icon"
+              :class="[
+                'relative z-10 h-5 w-5 transition-colors',
+                props.activeScreen === item.id ? 'text-purple-400' : 'text-zinc-500',
+              ]"
+              :stroke-width="props.activeScreen === item.id ? 2.5 : 2"
+            />
+            <span
+              :class="[
+                'relative z-10 text-[10px] font-medium transition-colors',
+                props.activeScreen === item.id ? 'text-purple-400' : 'text-zinc-600',
+              ]"
+            >
+              {{ item.label }}
+            </span>
+          </template>
+        </button>
+      </div>
+    </div>
+  </nav>
+</template>