<!-- This example requires Tailwind CSS v2.0+ -->
<template>
    <div class="pb-8 px-4 sm:px-6 lg:px-8">
        <div class="sm:flex sm:items-center">
            <div class="sm:flex-auto">
                <h1 class="text-xl font-semibold text-gray-900">
                    API 키 테스트 기능
                </h1>
                <p class="mt-2 text-sm text-gray-700">
                    API 키가 실제 서비스 예에서 사용되는 것을 볼 수 있습니다.
                </p>
            </div>
            <div class="mt-4 sm:mt-0 sm:ml-16 sm:flex-none"></div>
        </div>

        <nav class="mt-5 space-y-1" aria-label="Sidebar">
            <a
                v-for="item in navigation"
                :key="item.name"
                href="javascript:void(0)"
                :class="[
                    'text-gray-600 hover:bg-gray-100 hover:text-gray-900',
                    'flex items-center px-3 py-2 text-sm font-medium rounded-md',
                ]"
                :aria-current="'page'"
                @click="$router.push(item.href)"
            >
                <span class="truncate">
                    {{ item.name }}
                </span>
            </a>
        </nav>
    </div>
</template>

<script setup lang="ts">
definePageMeta({
    middleware: 'check-auth-op',
});

const navigation = [
    { name: 'API 키 테스트 게시판', href: '/admin/lab/board' },
    { name: 'API 키 테스트 웹 채팅', href: '/admin/lab/chatting' },
];
</script>
