refactor: simplify prop usage in Vue components (#15)

This change removes unnecessary `props` destructuring in Vue components and directly uses the props where applicable. This improves code readability and consistency across the codebase. No breaking changes are introduced as the functionality remains the same.

Author: oketafred

resources/js/components/AppHeader.vue

@@ -182,7 +182,7 @@ const rightNavItems: NavItem[] = [
 
         <div v-if="props.breadcrumbs.length > 1" class="flex w-full border-b border-sidebar-border/70">
             <div class="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
-                <Breadcrumbs :breadcrumbs="props.breadcrumbs" />
+                <Breadcrumbs :breadcrumbs="breadcrumbs" />
             </div>
         </div>
     </div>

resources/js/components/AppearanceTabs.vue

@@ -6,7 +6,7 @@ interface Props {
     class?: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
+const { class: containerClass } = withDefaults(defineProps<Props>(), {
     class: '',
 });
 
@@ -20,7 +20,7 @@ const tabs = [
 </script>
 
 <template>
-    <div :class="['inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', props.class]">
+    <div :class="['inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', containerClass]">
         <button
             v-for="{ value, Icon, label } in tabs"
             :key="value"

resources/js/components/Icon.vue

@@ -26,5 +26,5 @@ const icon = computed(() => {
 </script>
 
 <template>
-    <component :is="icon" :class="className" :size="props.size" :stroke-width="props.strokeWidth" :color="props.color" />
+    <component :is="icon" :class="className" :size="size" :stroke-width="strokeWidth" :color="color" />
 </template>

resources/js/layouts/AppLayout.vue

@@ -6,13 +6,13 @@ interface Props {
     breadcrumbs?: BreadcrumbItemType[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 </script>
 
 <template>
-    <AppLayout :breadcrumbs="props.breadcrumbs">
+    <AppLayout :breadcrumbs="breadcrumbs">
         <slot />
     </AppLayout>
 </template>

resources/js/layouts/app/AppHeaderLayout.vue

@@ -8,14 +8,14 @@ interface Props {
     breadcrumbs?: BreadcrumbItemType[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 </script>
 
 <template>
     <AppShell class="flex-col">
-        <AppHeader :breadcrumbs="props.breadcrumbs" />
+        <AppHeader :breadcrumbs="breadcrumbs" />
         <AppContent>
             <slot />
         </AppContent>

resources/js/layouts/app/AppSidebarLayout.vue

@@ -9,7 +9,7 @@ interface Props {
     breadcrumbs?: BreadcrumbItemType[];
 }
 
-const props = withDefaults(defineProps<Props>(), {
+withDefaults(defineProps<Props>(), {
     breadcrumbs: () => [],
 });
 </script>
@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<Props>(), {
     <AppShell variant="sidebar">
         <AppSidebar />
         <AppContent variant="sidebar">
-            <AppSidebarHeader :breadcrumbs="props.breadcrumbs" />
+            <AppSidebarHeader :breadcrumbs="breadcrumbs" />
             <slot />
         </AppContent>
     </AppShell>