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,71 @@
+<script setup lang="ts">
+import { Activity, CreditCard, Popcorn, ShoppingCart, Users } from 'lucide-vue-next';
+
+const activities = [
+  {
+    icon: ShoppingCart,
+    title: 'Grocery Shopping',
+    subtitle: 'Sarah • $124.50',
+    time: '2h',
+    bgColor: 'bg-emerald-500/10',
+    textColor: 'text-emerald-400',
+  },
+  {
+    icon: Popcorn,
+    title: 'Movie Vote',
+    subtitle: '3 votes for "Dune 2"',
+    time: '5h',
+    bgColor: 'bg-purple-500/10',
+    textColor: 'text-purple-400',
+  },
+  {
+    icon: CreditCard,
+    title: 'Subscription',
+    subtitle: 'Netflix • $15.99',
+    time: '1d',
+    bgColor: 'bg-rose-500/10',
+    textColor: 'text-rose-400',
+  },
+  {
+    icon: Users,
+    title: 'New Event',
+    subtitle: 'Family BBQ Saturday',
+    time: '2d',
+    bgColor: 'bg-blue-500/10',
+    textColor: 'text-blue-400',
+  },
+];
+</script>
+
+<template>
+  <div class="rounded-[18px] border border-white/[0.06] bg-[#16161F] p-5 shadow-[0_4px_20px_rgba(0,0,0,0.4)]">
+    <div class="mb-4 flex items-center justify-between">
+      <div class="flex items-center gap-2">
+        <div class="flex h-9 w-9 items-center justify-center rounded-[12px] bg-blue-500/10">
+          <Activity class="h-[18px] w-[18px] text-blue-400" :stroke-width="2" />
+        </div>
+        <h3 class="text-[15px] font-semibold text-white">Activity</h3>
+      </div>
+      <button class="text-[12px] font-medium text-purple-400 transition-colors hover:text-purple-300">
+        View all
+      </button>
+    </div>
+
+    <div class="space-y-2">
+      <div
+        v-for="activity in activities"
+        :key="activity.title"
+        class="group flex cursor-pointer items-center gap-3 rounded-[12px] p-3 transition-all hover:bg-white/[0.03]"
+      >
+        <div :class="['flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-[12px] transition-transform group-hover:scale-110', activity.bgColor]">
+          <component :is="activity.icon" :class="['h-[18px] w-[18px]', activity.textColor]" :stroke-width="2" />
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="mb-0.5 text-[14px] font-medium text-white">{{ activity.title }}</p>
+          <p class="truncate text-[12px] text-zinc-500">{{ activity.subtitle }}</p>
+        </div>
+        <span class="flex-shrink-0 text-[12px] font-medium text-zinc-600">{{ activity.time }}</span>
+      </div>
+    </div>
+  </div>
+</template>