<template>
<div class="d-flex flex-wrap ga-3 justify-space-between">
<ContainmentPanel
v-for="panel in panelList"
:key="panel.label"
class="score flex-grow-1"
>
<template #panel-body>
<div class="d-flex align-center ga-2">
<CustomSvg
:filename="panel.icon"
:class="{ 'flip-180': panel.reverseIcon }"
/>
<div class="d-flex flex-column ga-2">
<div class="ga-3 align-end">
<p class="score-heading font-weight-light">{{ panel.stat }}</p>
<p class="text-caption">{{ panel.unitOfMeasurement }}</p>
</div>
<p class="text-body font-weight-bold text-capitalize">
{{ panel.label }}
</p>
</div>
</div>
</template>
</ContainmentPanel>
</div>
</template>
<script setup lang="ts">
const panelList = ref([
{
stat: "400,000",
unitOfMeasurement: "bytes per day",
label: "Total Communication",
icon: "compare_arrows",
},
{
stat: "250,000",
unitOfMeasurement: "bytes per day",
label: "Outbound Communication",
icon: "bubble",
},
{
stat: "250,000",
unitOfMeasurement: "bytes per day",
icon: "bubble",
reverseIcon: true,
label: "Inbound Communication",
},
])
const props = defineProps({
foobar: {
type: Number,
required: true,
},
})
</script>
<style lang="scss" scoped>
@import "~/assets/styles/score.css";
</style>
<template>
<div class="d-flex flex-wrap ga-3 justify-space-between">
<ContainmentPanel
v-for="panel in panelList"
:key="panel.label"
class="score flex-grow-1"
>
<template #panel-body>
<div class="d-flex align-center ga-2">
<CustomSvg
:filename="panel.icon"
:class="{ 'flip-180': panel.reverseIcon }"
/>
<div class="d-flex flex-column ga-2">
<div class="ga-3 align-end">
<p class="score-heading font-weight-light">{{ panel.stat }}</p>
<p class="text-caption">{{ panel.unitOfMeasurement }}</p>
</div>
<p class="text-body font-weight-bold text-capitalize">
{{ panel.label }}
</p>
</div>
</div>
</template>
</ContainmentPanel>
</div>
</template>
<script setup lang="ts">
const panelList = ref([
{
stat: "400,000",
unitOfMeasurement: "bytes per day",
label: "Total Communication",
icon: "compare_arrows",
},
{
stat: "250,000",
unitOfMeasurement: "bytes per day",
label: "Outbound Communication",
icon: "bubble",
},
{
stat: "250,000",
unitOfMeasurement: "bytes per day",
icon: "bubble",
reverseIcon: true,
label: "Inbound Communication",
},
])
const props = defineProps({
foobar: {
type: Number,
required: true,
},
})
</script>
<style lang="scss" scoped>
@import "~/assets/styles/score.css";
</style>