siimee/frontend/src/components/SummaryBar.vue

<template lang="pug">
section.w-flex.column.pb5
    nav.fill-width.w-flex.column.justify-space-between

        // Tabbed Layout
        w-tabs(v-if="isTab" :items="Object.keys(tabContent)" center fill-bar)
            template(#item-title="{ item }")
                .w-flex.column.justify-start
                    p(v-if="tabContent[item].matchPerc") {{ tabContent[item].matchPerc }}%
                    p(v-else) &nbsp;
                    p {{ item }}
            // About Tab
            template(#item-content.1="{ item }")
                .tab--about
                    p {{ tabContent[item].tab }}
                    br
                    p {{ tabContent[item].tab }}
                    br
                    hr
            
            // Passion Tab
            template(#item-content.2="{ item }")
                .tab--passion
                    p {{ tabContent[item].tab }}

            // Aspirations Tab
            template(#item-content.3="{ item }")
                .tab--aspirations
                    p {{ tabContent[item].tab }}

            // Skills Tab
            template(#item-content.4="{ item }")
                .tab--skills
                    p {{ tabContent[item].tab }}

        // Untabbed Layout
        ul.w-flex.row.justify-space-between(v-else)
            template(v-for="(item, index) in Object.keys(tabContent)" :key="index")
                li.w-flex.row(v-if="item !== 'about'")
                    w-icon(xl).mr1 mdi mdi-heart
                    .w-flex.column.justify-start
                        p {{ tabContent[item].matchPerc }}%
                        p {{ item }}
</template>

<script>
export default {
    props: {
        tabContent: {
            required: true,
            type: Object,
        },
        isTab: {
            required: false,
            type: Boolean,
            default: false,
        },
        showIcon: {
            required: false,
            type: Boolean,
            default: true,
        },
    },
}
</script>