48 lines
1.2 KiB
Vue
48 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
|
|
withDefaults(defineProps<{
|
|
size?: 'sm' | 'md' | 'lg'
|
|
showText?: boolean
|
|
linkToHome?: boolean
|
|
}>(), {
|
|
size: 'md',
|
|
showText: true,
|
|
linkToHome: true,
|
|
})
|
|
|
|
const { config } = useAuth()
|
|
</script>
|
|
|
|
<template>
|
|
<component :is="linkToHome ? Link : 'div'" :href="linkToHome ? '/' : undefined" class="flex items-center gap-3">
|
|
<!--
|
|
Replace this placeholder with your actual logo:
|
|
<img src="/images/logo.svg" alt="Logo" :class="iconSizeClass">
|
|
-->
|
|
<div
|
|
class="flex items-center justify-center rounded-xl bg-primary-500 text-white font-bold"
|
|
:class="{
|
|
'size-8 text-sm': size === 'sm',
|
|
'size-12 text-xl': size === 'md',
|
|
'size-16 text-2xl': size === 'lg',
|
|
}"
|
|
>
|
|
{{ config.appName.charAt(0).toUpperCase() }}
|
|
</div>
|
|
|
|
<span
|
|
v-if="showText"
|
|
class="font-semibold text-gray-900 dark:text-white"
|
|
:class="{
|
|
'text-lg': size === 'sm',
|
|
'text-2xl': size === 'md',
|
|
'text-3xl': size === 'lg',
|
|
}"
|
|
>
|
|
{{ config.appName }}
|
|
</span>
|
|
</component>
|
|
</template>
|