1 files changed, 18 insertions, 2 deletions
diff --git a/src/components/ToolCard.vue b/src/components/ToolCard.vue
index 9c00367..14cc0f4 100644
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -1,10 +1,24 @@
 <template>
   <router-link :to="tool.path">
     <n-card class="tool-card">
-      <n-icon class="icon" size="40" :component="tool.icon" />
+      <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>
       <n-h3 class="title">
         <n-ellipsis>{{ tool.name }}</n-ellipsis>
       </n-h3>
+
       <div class="description">
         <n-ellipsis :line-clamp="2" :tooltip="false">
           {{ tool.description }}
@@ -15,11 +29,13 @@
 </template>
 
 <script setup lang="ts">
-import type { ITool } from '@/tools/Tool';
+import type { ITool } from '@/tools/tool';
+import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
 
 const props = defineProps<{ tool: ITool & { category: string } }>();
 const { tool } = toRefs(props);
+const theme = useThemeVars();
 </script>
 
 <style lang="less" scoped>