| 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374 |
- <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>
|
