46 lines
1.9 KiB
Vue
46 lines
1.9 KiB
Vue
<script setup>
|
|
import { Tab, TabGroup, TabList, TabPanels } from "@headlessui/vue";
|
|
import ServerTab from "../components/ServerTab.vue";
|
|
import ClientTab from "../components/ClientTab.vue";
|
|
import { LinkIcon, ServerIcon } from "@heroicons/vue/24/solid";
|
|
|
|
const tabItems = [
|
|
{label:"Client", icon:LinkIcon, tabComponent:ClientTab},
|
|
{label:"Server", icon:ServerIcon, tabComponent:ServerTab},
|
|
]
|
|
|
|
</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 space-x-4">
|
|
<div class="text-3xl font-black">
|
|
<span class="text-yellow-400">RENDEZ</span>
|
|
<span class="text-white">VOUS</span>
|
|
</div>
|
|
<div class="w-1 h-8 bg-yellow-400"></div>
|
|
<span class="text-gray-400">Helps Peer-to-Peer Connections</span>
|
|
</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> |