feat(tools): added favorite tool handling

1 files changed, 18 insertions, 13 deletions

diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue
index 926c5e9..79586f8 100644
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -3,17 +3,21 @@
     <n-card class="tool-card">
       <n-space justify="space-between" align="center">
         <n-icon class="icon" size="40" :component="tool.icon" />
-        <n-tag
-          v-if="tool.isNew"
-          size="small"
-          class="badge-new"
-          round
-          type="success"
-          :bordered="false"
-          :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
-        >
-          New
-        </n-tag>
+        <n-space align="center">
+          <n-tag
+            v-if="tool.isNew"
+            size="small"
+            class="badge-new"
+            round
+            type="success"
+            :bordered="false"
+            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+          >
+            New
+          </n-tag>
+
+          <favorite-button :tool="tool" />
+        </n-space>
       </n-space>
       <n-h3 class="title">
         <n-ellipsis>{{ tool.name }}</n-ellipsis>
@@ -29,11 +33,12 @@
 </template>
 
 <script setup lang="ts">
-import type { ITool } from '@/tools/tool';
+import type { Tool } from '@/tools/tools.types';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
+import FavoriteButton from './FavoriteButton.vue';
 
-const props = defineProps<{ tool: ITool & { category: string } }>();
+const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
 </script>