hunk-2025-02-20 14:36:50

src/router/index.js

@@ -1,11 +1,17 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import UserStoriesView from '../views/UserStoriesView.vue'
 
 const routes = [
   {
     path: '/',
     name: 'home',
     component: HomeView
+  },
+  {
+    path: '/user-stories',
+    name: 'user-stories',
+    component: UserStoriesView
   }
 ]
 

src/views/UserStoriesView.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="flex h-screen">
+    <!-- Sidebar -->
+    <aside class="w-64 bg-[#08002E] text-white flex flex-col">
+      <!-- Logo -->
+      <div class="p-6">
+        <div class="flex items-center gap-2">
+          <img src="@/assets/img/user_logo.png" alt="User Logo" class="w-16 h-16 rounded-full shadow-md" />
+        </div>
+      </div>
+
+      <!-- Navigation -->
+      <nav class="flex-1 px-4">
+        <div class="mb-8">
+          <div class="flex items-center justify-between mb-4">
+            <span class="text-sm">Contacts</span>
+          </div>
+        </div>
+
+        <div class="space-y-6">
+          <div class="text-xs text-gray-400 uppercase">MANAGE CONTACTS</div>
+          <div class="space-y-2">
+            <a v-for="(contact, index) in contacts"
+               :key="index"
+               href="#"
+               class="flex items-center gap-3 px-3 py-2 text-gray-300 rounded-lg hover:bg-purple-600/20">
+              <div class="w-10 h-10 bg-gray-600 rounded-full"></div>
+              <div>{{ contact.name }}</div>
+            </a>
+          </div>
+        </div>
+      </nav>
+
+      <!-- User Profile -->
+      <div class="p-4 border-t border-gray-700">
+        <div class="flex items-center gap-3">
+          <img src="@/assets/img/user_logo.png" alt="User Logo" class="w-10 h-10 rounded-full" />
+          <div>
+            <div class="text-sm font-medium">User Name</div>
+            <div class="text-xs text-gray-400">User Role</div>
+          </div>
+          <ChevronRight class="w-4 h-4 ml-auto text-gray-400" />
+        </div>
+      </div>
+    </aside>
+
+    <!-- Main Content -->
+    <main class="flex-1 overflow-auto bg-gradient-to-r from-white to-purple-200">
+      <div class="max-w-4xl mx-auto p-8">
+        <!-- Header -->
+        <div class="flex justify-between items-center mb-8">
+          <h1 class="text-2xl font-semibold mb-2">User Stories Generator</h1>
+        </div>
+
+        <!-- Chat Area -->
+        <div class="bg-white p-6 rounded-lg shadow-sm mb-6">
+          <div v-for="(message, index) in messages"
+               :key="index"
+               :class="[message.sender === 'user' ? 'bg-gradient-to-r from-white to-purple-200' : 'bg-gray-100']"
+               class="p-4 rounded-lg mb-4">
+            <p>{{ message.content }}</p>
+          </div>
+        </div>
+
+        <!-- Chat Input -->
+        <div class="flex gap-2">
+          <div class="flex-1 relative">
+            <input
+                v-model="newMessage"
+                type="text"
+                placeholder="Type your message..."
+                class="w-full p-3 pr-12 border rounded-lg"
+            />
+            <Upload class="absolute right-4 top-1/2 -translate-y-1/2 text-gray-400 cursor-pointer" @click="uploadFile" />
+          </div>
+          <button class="p-3 bg-[#08002E] text-white rounded-lg hover:bg-purple-600" @click="sendMessage">
+            <Send class="w-5 h-5" />
+          </button>
+        </div>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import {
+  ChevronRight,
+  Upload,
+  Send
+} from 'lucide-vue-next'
+
+const contacts = [
+  { name: 'Contact 1' },
+  { name: 'Contact 2' },
+  { name: 'Contact 3' },
+]
+
+const messages = [
+  { sender: 'user', content: 'Hello, how can I generate user stories?' },
+  { sender: 'assistant', content: 'You can start by providing details about your project.' },
+]
+
+let newMessage = ''
+
+const sendMessage = () => {
+  if (newMessage.trim()) {
+    messages.push({ sender: 'user', content: newMessage })
+    newMessage = ''
+    // Simulate assistant response
+    setTimeout(() => {
+      messages.push({ sender: 'assistant', content: 'Great, let\'s get started!' })
+    }, 1000)
+  }
+}
+
+const uploadFile = () => {
+  // File upload logic here
+}
+</script>
+
+<style scoped>
+/* Additional styles can be added here if needed */
+</style>