86 lines
No EOL
2.6 KiB
Vue
86 lines
No EOL
2.6 KiB
Vue
<template>
|
|
<div class="min-h-screen bg-gray-100">
|
|
<!-- Navigation -->
|
|
<nav class="bg-white shadow-sm">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex justify-between h-16">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0 flex items-center">
|
|
<h1 class="text-xl font-bold text-gray-900">Étoile Polaire</h1>
|
|
</div>
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
|
|
<router-link
|
|
to="/"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2"
|
|
:class="[
|
|
$route.path === '/'
|
|
? 'border-blue-500 text-gray-900'
|
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
|
]"
|
|
>
|
|
Conteneurs
|
|
</router-link>
|
|
<router-link
|
|
to="/agents"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2"
|
|
:class="[
|
|
$route.path === '/agents'
|
|
? 'border-blue-500 text-gray-900'
|
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
|
]"
|
|
>
|
|
Agents
|
|
</router-link>
|
|
<router-link
|
|
to="/logs"
|
|
class="inline-flex items-center px-1 pt-1 border-b-2"
|
|
:class="[
|
|
$route.path === '/logs'
|
|
? 'border-blue-500 text-gray-900'
|
|
: 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700'
|
|
]"
|
|
>
|
|
Logs
|
|
</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Contenu principal -->
|
|
<main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
|
|
<router-view></router-view>
|
|
</main>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
// Le composant App ne nécessite pas de logique supplémentaire
|
|
</script>
|
|
|
|
<style>
|
|
@import 'tailwindcss/base';
|
|
@import 'tailwindcss/components';
|
|
@import 'tailwindcss/utilities';
|
|
|
|
.btn {
|
|
@apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2;
|
|
}
|
|
|
|
.btn-primary {
|
|
@apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-white text-gray-700 border-gray-300 hover:bg-gray-50 focus:ring-blue-500;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
|
|
}
|
|
|
|
.card {
|
|
@apply bg-white rounded-lg shadow p-4;
|
|
}
|
|
</style> |