siimee/frontend/src/components/ProfileCardList.vue

<template lang="pug">
section.profile-card-list.xs12.w-flex.column
    article
        ProfileCard.match-layout(
            :aspects='aspects'
            :card='card'
            :is-list='true'
            :key='`${card.pid}-${i}`'
            v-for='(card, i) in cards'
        )
        w-button.pa8.more-results(bg-color='primary' @click="loadMoreResults()")
</template>

<script setup>
import { ref } from 'vue'
import { cardAspects } from '../entities'
import ProfileCard from './ProfileCard.vue'

const aspects = ref(cardAspects)

const emit = defineEmits(['loadMore'])

const props = defineProps({
    cards: {
        type: [Object, Array],
        default: () => [
            {
                pid: '1',
                name: 'Full Name',
                avatar: 'https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/newborn-baby-boy-sleeping-peacefully-wearing-knit-royalty-free-image-1589459736.jpg?crop=0.669xw:1.00xh;0.228xw,0&resize=640:*',
                metadata: { age: '21', rawMetadata: 'Some Text Here!' },
                role: 'more filler',
                ethnicity: 'some background',
            },
        ],
    },
})

const loadMoreResults = () => { emit('loadMore') } // TODO update to scroll
</script>

<style lang="sass">
.profile-card-list
    > header > .w-select >.primary
        margin-top: 0
.more-results
    margin-bottom: 2em
</style>