36 lines
974 B
Vue
36 lines
974 B
Vue
<template>
|
|
<div class="sidebar">
|
|
<SiteCard v-for="(site, index) in sites" :key="site.id"
|
|
:site="site"
|
|
:active="selectedId === site.id"
|
|
:disabled="!site.enabled"
|
|
@select="$emit('select-site', site)" />
|
|
|
|
<AddSiteForm :show="pendingAdd"
|
|
@start="$emit('start-add')"
|
|
@cancel="$emit('cancel-add')"
|
|
@submit="(name) => $emit('add-site', name)" />
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import SiteCard from './SiteCard.vue'
|
|
import AddSiteForm from './AddSiteForm.vue'
|
|
|
|
defineProps<{
|
|
sites: Array<{ id: string; name: string; enabled: boolean }>
|
|
selectedId: string | null
|
|
pendingAdd: boolean
|
|
}>()
|
|
|
|
defineEmits<{ 'select-site': [site: { id: string; name: string; enabled: boolean }]; 'start-add': []; 'cancel-add': []; 'add-site': [name: string] }>()
|
|
</script>
|
|
|
|
<style scoped>
|
|
.sidebar {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
</style>
|