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>

resources/js/components/common/__tests__/Logo.test.ts

@@ -0,0 +1,46 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { computed } from 'vue'
+import Logo from '../Logo.vue'
+
+// Mock the useAuth composable
+vi.mock('@/composables/useAuth', () => ({
+  useAuth: () => ({
+    config: computed(() => ({ appName: 'TestApp' })),
+  }),
+}))
+
+describe('logo', () => {
+  it('renders the first letter of the app name', () => {
+    const wrapper = mount(Logo)
+    expect(wrapper.text()).toContain('T')
+  })
+
+  it('renders the app name when showText is true', () => {
+    const wrapper = mount(Logo, {
+      props: { showText: true },
+    })
+    expect(wrapper.text()).toContain('TestApp')
+  })
+
+  it('does not render the app name when showText is false', () => {
+    const wrapper = mount(Logo, {
+      props: { showText: false },
+    })
+    expect(wrapper.text()).not.toContain('TestApp')
+  })
+
+  it('applies correct size classes for sm', () => {
+    const wrapper = mount(Logo, {
+      props: { size: 'sm' },
+    })
+    expect(wrapper.html()).toContain('size-8')
+  })
+
+  it('applies correct size classes for lg', () => {
+    const wrapper = mount(Logo, {
+      props: { size: 'lg' },
+    })
+    expect(wrapper.html()).toContain('size-16')
+  })
+})