<template>
    <div class="problem-list" v-if="list">
        <template v-for="(item, index) in list">
            <problem-item :key="item.id" :data="item" :sort="index+1"></problem-item>
        </template>
    </div>
</template>

<script>
import ProblemItem from './ProblemItem.vue'

export default {
    props: {
        list: {
            type: Array,
            default: []
        }
    },
    components: {
        ProblemItem
    }
}
</script>

<style lang="scss" scoped>
.problem-list {
    display: flex;
    overflow-x: auto;
    padding: 0 10px;
    background-color: #FFFFFF;
}
</style>