siimee/frontend/src/components/PairsList.vue

<template lang="pug">
section.pairs-list
    article(v-if='pairs.length')
        template(v-for='pair in pairs')
            router-link.pair.w-flex.align-center.flex-start(
                :to='`/profile/${pair.profile.pid}`'
                v-if='tabName == "pending"'
            )
            router-link.pair.w-flex.align-center.flex-start(
                :to='`/chat/${pair.profile.pid}`'
                v-else
            )
                .dot--icon
                .avatar
                .idCard
                    h3 {{ pair.profile.name }} {{ pair.profile.pid }}
                    p registered nurse
        
        w-button.menu-button(icon="mdi mdi-menu" xl)

        w-menu(activator=".menu-button" arrow right) 
            w-image(:src="'../../../assets/icons/chat.svg'" :width="20" :height="20")
            w-image(:src="'../../../assets/icons/calendar.svg'" :width="20" :height="20")
    p(v-else) No {{ tabName }} profiles.
</template>

<script setup>
const props = defineProps({
    pairs: {
        type: [Object, Array],
        default: () => [{}],
    },
    tabName: {
        type: String,
        default: 'paired',
    },
})

</script>

<style lang="sass">
.pairs-list
    color: #fff
    article
        font-family: 'Century Gothic'
        .dot--icon
            width:12px
            height:12px
            margin: 11px
            border-radius:50%
            background-color:#60C3FF
        .avatar
            width:40px
            height:40px
            margin: 11px
            border-radius: 6px
            background-color:#D5D5D5
        .idCard
            color: #fff
            margin: 11px
            h3
                font-size: 16px
            p
                font-size: 14px
        
.w-card__content
    padding: 22px
    min-width: 100px
    display: flex
    justify-content: space-between
    border: none
    background: rgb(17,96,6)
    background: linear-gradient(90deg, rgba(17,96,6,1) 0%, rgba(17,96,6,1) 50%, rgba(3,136,166,1) 50%, rgba(3,136,166,1) 100%)
</style>