Caramel-CRM/resources/js/components/AppHeader.vue

<script setup lang="ts">
import { cn } from '@/lib/utils';
import { HTMLAttributes } from 'vue';

const props = defineProps<{
    class?: HTMLAttributes;
}>();
</script>

<template>
    <div :class="cn('grid grid-cols-[2fr_3fr_2fr] mb-12 gap-4 print:hidden', props.class)">
        <div class="place-self-stretch flex row items-center justify-start">
            <slot name="left" />
        </div>

        <div class="relative w-full items-center">
            <slot name="middle" />
        </div>


        <div class="place-self-stretch flex row items-center justify-end">
            <slot name="right" />
        </div>
    </div>
</template>