60 lines
2.5 KiB
Vue
60 lines
2.5 KiB
Vue
<script setup>
|
|
import { TabGroup, TabList, Tab, TabPanels, TabPanel} from '@headlessui/vue'
|
|
import { KeyIcon, BoltIcon, ShieldCheckIcon, UserPlusIcon, UsersIcon, ClipboardDocumentListIcon} from '@heroicons/vue/24/solid'
|
|
|
|
import TabCreateUser from '../components/tabs/TabCreateUser.vue'
|
|
import TabProofOfWork from '../components/tabs/TabProofOfWork.vue'
|
|
import TabAddUser from '../components/tabs/TabUsers.vue'
|
|
import TabSigningRequests from '../components/tabs/TabSigningRequests.vue'
|
|
|
|
const tabItems = [
|
|
{label:"Create User", icon:KeyIcon, tabComponent:TabCreateUser},
|
|
{label:"Proof of Work", icon:BoltIcon, tabComponent:TabProofOfWork},
|
|
{label:"Users", icon:UserPlusIcon, tabComponent:TabAddUser},
|
|
{label:"Signing Requests", icon:ClipboardDocumentListIcon, tabComponent:TabSigningRequests},
|
|
]
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-black w-screen text-yellow-400">
|
|
<header className="border-b border-yellow-400/20 py-6">
|
|
<div className="container mx-auto px-6">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="text-3xl font-black">
|
|
<span className="text-yellow-400">LOCK</span>
|
|
<span className="text-white">BOX</span>
|
|
</div>
|
|
<div className="w-1 h-8 bg-yellow-400"></div>
|
|
<span className="text-gray-400">Secure ECDSA Keypair Management</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="container mx-auto px-6">
|
|
<TabGroup>
|
|
<TabList class="flex flex-wrap gap-2 mb-8 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 px-40" v-for="tab in tabItems" :key="tab.label">
|
|
<component :is="tab.tabComponent"></component>
|
|
</TabPanels>
|
|
</TabGroup>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* button {
|
|
transition: background 0.2s, color 0.2s;
|
|
} */
|
|
</style>
|