frontend layout and infrastructure

frontend/src/components/Brand.vue

@@ -1,34 +1,31 @@
-<script setup>
+<script setup lang="ts">
 import logoImg from '@/assets/logo.png'
 
-const props = defineProps({
-  size: {
-    type: String,
-    default: 'medium', // small, medium, large
-  },
-  showAppName: {
-    type: Boolean,
-    default: false,
-  },
-  showSlogan: {
-    type: Boolean,
-    default: false,
-  },
+type Size = 'small' | 'medium' | 'large'
+
+withDefaults(defineProps<{
+  size?: Size
+  showAppName?: boolean
+  showSlogan?: boolean
+}>(), {
+  size: 'medium',
+  showAppName: false,
+  showSlogan: false,
 })
 
-const sizeClasses = {
+const sizeClasses: Record<Size, string> = {
   small: 'h-8',
   medium: 'h-12',
   large: 'h-16',
 }
 
-const textSizeClasses = {
+const textSizeClasses: Record<Size, string> = {
   small: 'text-xl',
   medium: 'text-2xl',
   large: 'text-3xl',
 }
 
-const sloganSizeClasses = {
+const sloganSizeClasses: Record<Size, string> = {
   small: 'text-xs',
   medium: 'text-sm',
   large: 'text-base',