diff options
Diffstat (limited to 'src/components/ToolCard.vue')
| -rw-r--r-- | src/components/ToolCard.vue | 31 |
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> |