tethys.backend/resources/js/Components/BaseLevel.vue

<script>
import { h, defineComponent } from 'vue';

export default defineComponent({
    name: 'BaseLevel',
    props: {
        mobile: Boolean,
        type: {
            type: String,
            default: 'justify-between',
        },
    },
    render() {
        const parentClass = [this.type, 'items-center'];

        const parentMobileClass = ['flex'];

        const parentBaseClass = ['block', 'md:flex'];

        const childBaseClass = ['flex', 'shrink-0', 'grow-0', 'items-center', 'justify-center'];

        return h(
            'div',
            { class: parentClass.concat(this.mobile ? parentMobileClass : parentBaseClass) },
            this.$slots.default().map((element, index) => {
                const childClass =
                    !this.mobile && this.$slots.default().length > index + 1 ? childBaseClass.concat(['mb-6', 'md:mb-0']) : childBaseClass;

                return h('div', { class: childClass }, [element]);
            }),
        );
    },
});
</script>