<template>
    <div class="header">
        <div class="cards-row row" style="flex: 1">
            <BsCard
                v-for="(card, index) in cardsItems"
                :key="index"
                title=""
                :items="card"
                style="width: 300px"
            >
            </BsCard>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from "vue";
export default defineComponent({
    name: "Header",
    props: {
        cardsItems: {
            type: Array as PropType<Array<{ [key: string]: string }>>,
            required: true,
        },
    },
});
</script>

<style scoped>
.cards-row {
    gap: 12px;
}

</style>


<style lang="scss">
.bs-header-content {
    .bs-card-content .bs-card-title {
        display: none !important;
    }
    .bs-card-content .separator {
        display: none !important;
    }
}
</style>
