fix: teamPage change tab component

OsmanthusBeer · Nov 3, 2023 · da72894 · da72894
1 parent 577ca20
commit da72894
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 20 deletions.
diff --git a/components/ProjectList.vue b/components/ProjectList.vue
@@ -15,7 +15,7 @@ const { pending, error, data: projects } = $client.protected.projectList.useQuer
 <template>
   <div class="flex items-center my-8">
     <UInput class="w-44 mr-4" icon="i-heroicons-magnifying-glass-20-solid" size="sm" color="white" :trailing="false" />
-    <UButton :to="`/dashboard/project/create?tid=${teamId}`">
+    <UButton :to="`/dashboard/p/create?tid=${teamId}`">
       Create Project
     </UButton>
   </div>

diff --git a/pages/dashboard/t/[id]/index.vue b/pages/dashboard/t/[id]/index.vue
@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 definePageMeta({
   layout: 'dashboard',
 })
@@ -27,35 +27,30 @@ const selectedTabIndex = ref(0)
 const renderComponent = computed(() => {
   return teamTabs[selectedTabIndex.value].key
 })
+
+function selectTab(index: number) {
+  selectedTabIndex.value = index
+}
 </script>
 
 <template>
   <div class="p-8">
     <h1 v-if="teamPending" class="text-2xl pb-4 font-semibold border-b border-gray-200 dark:border-gray-800">
       <USkeleton class="h-[48px]" />
     </h1>
-    <UAlert
-      v-else-if="teamError"
-      title="Fetch team info error" icon="i-heroicons-x-circle-solid"
-      color="red" variant="outline"
-    >
-      <template #description>
-        {{ JSON.stringify(teamError) }}
-      </template>
-    </UAlert>
+    <div v-else-if="teamError" class="alert alert-error">
+      <span>{{ JSON.stringify(teamError) }}</span>
+    </div>
     <h1 v-else class="text-2xl pb-4 font-semibold border-b border-gray-200 dark:border-gray-800">
       {{ team?.name }}
     </h1>
 
-    <UTabs v-model="selectedTabIndex" :items="teamTabs" class="w-80 mt-4">
-      <template #default="{ item }">
-        <div class="flex items-center relative truncate">
-          <UIcon :name="item.icon" class="w-4 h-4 flex-shrink-0" />
-          <span class="ml-2 truncate">{{ item.label }}</span>
-          <span v-if="selectedTabIndex" class="absolute -right-4 w-2 h-2 rounded-full bg-primary-500 dark:bg-primary-400" />
-        </div>
-      </template>
-    </UTabs>
+    <div class="tabs mt-10">
+      <a v-for="(tab, index) in teamTabs" :key="index" class="tab tab-lifted" :class="[selectedTabIndex === index ? 'tab-active' : '']" @click="selectTab(index)">
+        <span>{{ tab.label }}</span>
+      </a>
+    </div>
+
     <component :is="renderComponent" :team-id="id" />
   </div>
 </template>