59 lines
2.5 KiB
Vue
59 lines
2.5 KiB
Vue
<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> |