initial commit

resources/js/Components/SectionTitleLineWithButton.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { mdiCog } from '@mdi/js'
+import { useSlots, computed } from 'vue'
+import BaseIcon from '@/Components/BaseIcon.vue'
+import BaseButton from '@/Components/BaseButton.vue'
+import IconRounded from '@/Components/IconRounded.vue'
+
+defineProps({
+  icon: {
+    type: String,
+    default: null
+  },
+  title: {
+    type: String,
+    required: true
+  },
+  main: Boolean
+})
+
+const hasSlot = computed(() => useSlots().default)
+</script>
+
+<template>
+  <section 
+    :class="{'pt-6':!main}"
+    class="mb-6 flex items-center justify-between"
+  >
+    <div class="flex items-center justify-start">
+      <IconRounded
+        v-if="icon && main"
+        :icon="icon"
+        type="light"
+        class="mr-3"
+        bg
+      />
+      <BaseIcon
+        v-else-if="icon"
+        :path="icon"
+        class="mr-2"
+        size="20"
+      />
+      <h1
+        :class="main ? 'text-3xl' : 'text-2xl'"
+        class="leading-tight"
+      >
+        {{ title }}
+      </h1>
+    </div>
+    <slot v-if="hasSlot" />
+    <BaseButton
+      v-else
+      :icon="mdiCog"
+      small
+    />
+  </section>
+</template>