60 lines
1.1 KiB
Vue
60 lines
1.1 KiB
Vue
<template>
|
|
<div class="site-card"
|
|
:class="{ active, disabled }"
|
|
@click="$emit('select')">
|
|
<span class="site-name">{{ site.name }}</span>
|
|
<span v-if="!site.enabled" class="badge disabled">Disabled</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineProps<{
|
|
site: { id: string; name: string; enabled: boolean }
|
|
active: boolean
|
|
disabled: boolean
|
|
}>()
|
|
|
|
defineEmits<{ select: [] }>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.site-card {
|
|
padding: 12px 16px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
background: var(--bg-secondary);
|
|
transition: border-color 0.2s, box-shadow 0.2s;
|
|
}
|
|
|
|
.site-card:hover {
|
|
border-color: #2563eb;
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1);
|
|
}
|
|
|
|
.site-card.active {
|
|
border-color: #2563eb;
|
|
background: var(--bg-active);
|
|
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
|
|
}
|
|
|
|
.site-card.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.site-name {
|
|
font-weight: 600;
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
.badge.disabled {
|
|
font-size: 10px;
|
|
color: var(--danger-text);
|
|
background: var(--danger-bg);
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
margin-top: 4px;
|
|
display: inline-block;
|
|
}
|
|
</style>
|