Added libs

noSys/vue/views/HomeView.vue

@@ -0,0 +1,59 @@
+<script setup>
+import Button from '@/components/buttons/Button.vue';
+import InputText from '@/components/inputs/InputText.vue';
+import Label from '@/components/labels/Label.vue';
+import { ref, onMounted, onUnmounted, onActivated, onDeactivated } from 'vue';
+import { noSysApi } from '../api/noSysApi';
+import InputComboBox from '@/components/inputs/InputComboBox.vue';
+import { useNoSysStore } from '../stores/noSysStore'
+import { getSocket } from '@/plugins/socketioManager'
+import Card from '@/components/cards/Card.vue';
+import { ArrowPathIcon, EllipsisHorizontalIcon, GlobeAltIcon, LinkIcon, MapIcon, WifiIcon, XMarkIcon } from '@heroicons/vue/24/solid';
+import ConnectionsTab from '../components/ConnectionsTab.vue';
+import NetworksTabs from '../components/NetworksTabs.vue';
+import { TabGroup, TabList, Tab, TabPanels} from '@headlessui/vue'
+
+
+const tabItems = [
+    {label:"Connections", icon:LinkIcon, tabComponent:ConnectionsTab},
+    {label:"Networks", icon:MapIcon, tabComponent:NetworksTabs},
+]
+
+</script>
+
+<template>
+<div class="min-h-screen bg-black text-yellow-400">
+    <header class="border-b border-yellow-400/20 py-6">
+    <div class="container mx-auto px-6">
+        <div class="flex items-center justify-between">
+        <div class="flex items-center space-x-4">
+            <div class="text-3xl font-black">
+            <span class="text-yellow-400">NO</span>
+            <span class="text-white">SYS</span>
+            </div>
+            <div class="w-1 h-8 bg-yellow-400"></div>
+            <span class="text-gray-400">Peer-to-Peer Network Connection</span>
+        </div>
+        </div>
+    </div>
+    </header>
+
+    <div className="container mx-auto px-6">
+    <TabGroup>
+        <TabList class="flex flex-wrap gap-2 border-b border-yellow-400/20">
+            <Tab v-for="tab in tabItems" as="template" :key="tab" v-slot="{ selected }">
+                <button class="flex items-center space-x-2 px-6 py-3 font-semibold transition-all duration-300 border-b-2"
+                :class="{ 'text-yellow-400 border-yellow-400': selected, 'text-gray-400 border-transparent hover:text-yellow-400 hover:border-yellow-400/50': !selected }">
+                <component :is="tab.icon" class="h-4 w-4"></component>
+                <span>{{ tab.label }}</span>
+                </button>
+            </Tab>
+        </TabList>
+        <TabPanels class="mt-6 space-y-6" v-for="tab in tabItems" :key="tab.label">
+            <component :is="tab.tabComponent"></component>
+        </TabPanels>
+    </TabGroup>
+    </div>
+</div>
+
+</template>