initial commit

resources/js/Components/BaseLevel.vue

@@ -0,0 +1,37 @@
+<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>