siimee/frontend/src/components/PairsList.vue

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

                w-menu( left v-model='showMenu')
                    template(#activator)
                        w-button.mr3(@click='showMenu = !showMenu' icon="icon-dots-three-horizontal")
                    w-flex()
                        router-link(
                            :to='`/chat/${pair.profile.pid}`')
                            w-button.mx2(@click='showMenu = false' bg-color="success" tile icon="icon-chat") Chat
                        w-button.mx2.icon-calendar(@click='showMenu = false' bg-color="info" tile icon="icon-calendar") Calendar
                        w-button.mx2(@click='showMenu = false' bg-color="primary" icon="icon-cross")

    p(v-else) No {{ tabName }} profiles.
</template>

<script setup>
import { ref } from 'vue'
const props = defineProps({
    pairs: {
        type: [Object, Array],
        default: () => [{}],
    },
    tabName: {
        type: String,
        default: 'paired',
    },
})
const showMenu = ref(false)
</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-menu--card
    background-color: #000000 !important
</style>