UI

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "nuxt.isNuxtApp": false,
+  "vue3snippets.enable-compile-vue-file-on-did-save-code": true
+}

pages/ReceiveFile.vue → components/ReceiveFile.vue

@@ -11,24 +11,22 @@
 </template>
 
 <script setup>
-import Peer from 'peerjs';
-
+import Peer from "peerjs";
 let myPeer = null;
 const messages = ref([]);
 
 // Connect to the PeerJS Server using the configured URL
-const serverUrl = process.env.PEERJS_SERVER_URL || 'localhost:9000';
+const serverUrl = process.env.PEERJS_SERVER_URL || "localhost:9000";
 const options = {
-    host: serverUrl.split(':')[0],
-    port: serverUrl.split(':')[1],
-    path: '/',
+    host: serverUrl.split(":")[0],
+    port: serverUrl.split(":")[1],
+    path: "/",
 };
-const { data, pending, error, refresh } = await useFetch('http://localhost:9000/peerjs/id', {
-})
+
 myPeer = new Peer(options); // Connect to server
-console.log(myPeer, options)
-myPeer.on('connection', (conn) => {
-    conn.on('data', (data) => {
+console.log(myPeer, options);
+myPeer.on("connection", (conn) => {
+    conn.on("data", (data) => {
         messages.value.push(data);
     });
 });

components/SendFile.vue

@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <UInput type="text" v-model="message" placeholder="Enter message" />
+    <UInput type="text" v-model="recipientPeerId" placeholder="Enter recipientPeerId" />
+    <button @click="sendMessage">Send</button>
+    <p v-if="recipientPeerId">{{ recipientPeerId }}</p>
+  </div>
+</template>
+
+<script setup>
+import Peer from "peerjs";
+
+let myPeer = null;
+let recipientPeerId = ref("");
+const message = ref("");
+
+// Connect to the PeerJS Server using the configured URL
+const serverUrl = process.env.PEERJS_SERVER_URL || "localhost:9000";
+const options = {
+  host: serverUrl.split(":")[0],
+  port: serverUrl.split(":")[1],
+  path: "/",
+};
+
+myPeer = new Peer(options); // Connect to server
+console.log(myPeer, options);
+
+function sendMessage () {
+  if (!recipientPeerId.value || !message.value) return;
+
+  const conn = myPeer.connect(recipientPeerId.value);
+  conn.on("connection", (el) => {
+    console.log(el);
+  });
+  conn.on("open", () => {
+    conn.send(message.value);
+    message.value = ""; // Clear message input after sending
+  });
+  conn.on("error", (err) => {
+    console.error("Connection error:", err);
+    // Handle connection errors gracefully (e.g., display error message)
+  });
+}
+</script>

layouts/default.vue

@@ -1,6 +1,5 @@
 <template>
     <div>
-
         <slot />
     </div>
 </template>

nuxt.config.ts

@@ -1,6 +1,15 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  devtools: { enabled: true },
+  devtools: {
+    enabled: true,
+
+    timeline: {
+      enabled: true,
+    },
+  },
+  ui: {
+    icons: ["solar"],
+  },
   ssr: false,
-  modules: ["@nuxt/ui"],
+  modules: ["@nuxt/ui", "@nuxtjs/color-mode"],
 });

package.json

@@ -10,11 +10,13 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@nuxt/devtools": "latest",
-    "@nuxt/ui": "^2.13.0",
-    "nuxt": "^3.10.1"
+    "@nuxt/devtools": "^1.0.8",
+    "@nuxt/ui": "^2.14.1",
+    "nuxt": "^3.10.3"
   },
   "dependencies": {
+    "@iconify-json/solar": "^1.1.9",
+    "@nuxtjs/color-mode": "^3.3.2",
     "peer": "^1.0.2",
     "peerjs": "^1.5.2",
     "peerjs-server": "^0.2.9"

pages/index.vue

@@ -1,7 +1,40 @@
 <template>
     <div>
-        <h1>Home</h1>
-        <NuxtLink to="ReceiveFile">Receiver</NuxtLink>
-        <NuxtLink to="SendFile">Sender</NuxtLink>
+        <header>
+            <div class="flex justify-between">
+                <div>Dashboard</div>
+                <div>Logo</div>
+                <div>
+                    <h1>Color mode: {{ $colorMode.value }}</h1>
+                    <select v-model="$colorMode.preference">
+                        <option value="system">System</option>
+                        <option value="light">Light</option>
+                        <option value="dark">Dark</option>
+                        <option value="sepia">Sepia</option>
+                    </select>
+                </div>
+            </div>
+        </header>
+        <div class="flex justify-center bg-white h-full">
+            <div
+                class="w-1/2 m-4 bg-rose-400/80 flex justify-center items-center flex-col rounded-3xl h-24 backdrop-blur-lg">
+                <div>
+                    <NuxtLink to="SendFile"> Sender</NuxtLink>
+                </div>
+                <div>
+                    <UButton color="white" variant="solid" block>Send</UButton>
+                </div>
+            </div>
+            <div class="w-1/2 m-4 bg-teal-400 flex justify-center items-center flex-col rounded-3xl h-3/4">
+                <NuxtLink to="ReceiveFile">Receiver</NuxtLink>
+                <UButton>Receive</UButton>
+            </div>
+
+            <h1>{{ data }}</h1>
+        </div>
     </div>
-</template>
+</template>
+
+<script setup>
+const { data } = await useFetch("http://localhost:9000/peerjs/peers");
+</script>