Init

resources/js/components/common/Logo.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useAuth } from '@/composables/useAuth'
+
+withDefaults(defineProps<{
+  size?: 'sm' | 'md' | 'lg'
+  showText?: boolean
+}>(), {
+  size: 'md',
+  showText: true,
+})
+
+const { config } = useAuth()
+</script>
+
+<template>
+  <div 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>
+  </div>
+</template>