theme

src/components/layout/ModuleContainer.vue

@@ -1,33 +1,28 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import type { Component } from 'vue'
 import { ScrollArea } from '@/components/ui/scroll-area'
 
-const props = defineProps<{
-  modules: Array<{ id: string; name: string; icon: string; component: unknown }>
+defineProps<{
+  activeComponent: Component | null
   activeModule: string
 }>()
-
-const activeComponent = computed(() => {
-  const module = props.modules.find(m => m.id === props.activeModule)
-  return module?.component || null
-})
 </script>
 
 <template>
-  <main 
+  <main
     class="flex-1"
     :style="{ backgroundColor: 'var(--effect-bg)', backdropFilter: 'var(--effect-blur)' }"
   >
     <ScrollArea class="h-full w-full">
       <Transition name="fade-slide" mode="out-in">
-        <div 
-          v-if="activeComponent" 
+        <div
+          v-if="activeComponent"
           :key="activeModule"
           class="min-h-full w-full"
         >
           <component :is="activeComponent" />
         </div>
-        <div 
+        <div
           v-else
           class="h-full w-full flex items-center justify-center text-muted-foreground"
         >
@@ -53,4 +48,4 @@ const activeComponent = computed(() => {
   opacity: 0;
   transform: translateX(-20px);
 }
-</style>
+</style>