|
|
@@ -0,0 +1,104 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-page">
|
|
|
+ <aside class="sidebar">
|
|
|
+ <header>Contact List</header>
|
|
|
+ <ul>
|
|
|
+ <li v-for="contact in contacts" :key="contact.id">
|
|
|
+ {{ contact.name }}
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </aside>
|
|
|
+ <main class="chat-area">
|
|
|
+ <div class="message-bubble sent">Sent Message</div>
|
|
|
+ <div class="message-bubble received">Received Message</div>
|
|
|
+ </main>
|
|
|
+ <footer>
|
|
|
+ <input type="text" placeholder="Type a message...">
|
|
|
+ <button>Send</button>
|
|
|
+ <button>Upload</button>
|
|
|
+ </footer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'NewChatPage',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ contacts: [
|
|
|
+ { id: 1, name: 'Contact 1' },
|
|
|
+ { id: 2, name: 'Contact 2' },
|
|
|
+ // Add more contacts as needed
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.chat-page {
|
|
|
+ display: flex;
|
|
|
+ height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.sidebar {
|
|
|
+ width: 250px;
|
|
|
+ background-color: #08002E;
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.chat-area {
|
|
|
+ flex-grow: 1;
|
|
|
+ background-color: gray;
|
|
|
+ padding: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.message-bubble {
|
|
|
+ margin: 0.5rem 0;
|
|
|
+ border-radius: 10px;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+ word-wrap: break-word;
|
|
|
+}
|
|
|
+
|
|
|
+.sent {
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.received {
|
|
|
+ background-color: lightgray;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+
|
|
|
+input[type="text"] {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 0.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+button {
|
|
|
+ border-radius: 5px;
|
|
|
+ padding: 0.5rem 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-button {
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.send-button {
|
|
|
+ background-color: purple;
|
|
|
+ color: white;
|
|
|
+ border: none;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+footer {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+</style>
|
genlitex