47 lines
1.4 KiB
Vue
47 lines
1.4 KiB
Vue
<script setup>
|
|
defineProps({
|
|
isSidebarOpen: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
})
|
|
|
|
const services = [
|
|
{ name: 'API Fiscal', status: 'Conectado' },
|
|
{ name: 'Webhook Pagos', status: 'Conectado' },
|
|
{ name: 'Correo transaccional', status: 'Sincronizando' },
|
|
]
|
|
</script>
|
|
|
|
<template>
|
|
<main
|
|
:class="[
|
|
'min-h-screen bg-slate-50 p-6 pt-24 transition-[margin] duration-300',
|
|
isSidebarOpen ? 'md:ml-64' : 'md:ml-0',
|
|
]"
|
|
>
|
|
<section class="rounded-2xl border border-slate-200 bg-white p-6 shadow-sm">
|
|
<h2 class="text-2xl font-semibold tracking-tight text-slate-900">Integraciones</h2>
|
|
<p class="mt-1 text-sm text-slate-500">Estado de conectores y servicios externos.</p>
|
|
|
|
<ul class="mt-5 space-y-3">
|
|
<li
|
|
v-for="service in services"
|
|
:key="service.name"
|
|
class="flex items-center justify-between rounded-xl border border-slate-200 bg-slate-50 px-4 py-3"
|
|
>
|
|
<span class="font-medium text-slate-800">{{ service.name }}</span>
|
|
<span
|
|
:class="[
|
|
'inline-flex rounded-full px-2.5 py-1 text-xs font-semibold',
|
|
service.status === 'Conectado' ? 'bg-emerald-50 text-emerald-700' : 'bg-amber-50 text-amber-700',
|
|
]"
|
|
>
|
|
{{ service.status }}
|
|
</span>
|
|
</li>
|
|
</ul>
|
|
</section>
|
|
</main>
|
|
</template>
|