tethys.backend/resources/js/Components/SectionTitleLineWithButton.vue
Arno Kaimbacher a7142f694f - prettier formatting
- npm updates
- new SearchMap.vue component
2023-10-31 15:38:43 +01:00

36 lines
1.0 KiB
Vue

<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>