siimee/frontend/src/components/ProfileCardList.vue

<template lang="pug">
section.profile-card-list.xs12.w-flex
    article.w-flex.xs-col.sm-row.sm-wrap
        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(
            @click='loadMoreResults()'
            bg-color='primary'
        )
</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">
@import '../assets/sass/main'

.profile-card-list
    > header > .w-select >.primary
        margin-top: 0

@media (min-width: $tablet)
    section.profile-card-list.xs12.w-flex > article
        display: flex
        flex-wrap: wrap
        flex-direction: row

@media (max-width: $tablet)
    section.profile-card-list.xs12.w-flex > article
        display: flex
        flex-wrap: wrap
        flex-direction: column


.more-results
    margin-bottom: 2em
</style>