siimee/frontend/src/components/PairsList.vue

<template lang="pug">
section.pairs-list
    article(v-if="pairs.length")
        .pair.w-flex.align-center.justify-space-around(
            v-for="p in pairs"
        )
            .dot--icon
            .avatar
            .idCard
                p S.R.
                p Registered Nurse  
    p(v-else) No results.    
</template>

<script setup>
const props = defineProps({
    pairs: {
        type: [Object, Array],
        default: () => [{}],
    },
})
</script>
<style lang="sass">
.pairs-list
    article
        .dot--icon
            width:3vw
            height:3vw
            border-radius:50%
            background-color:#60C3FF
        .avatar
            width:10vw
            height:10vw
            background-color:#D5D5D5
</style>