diff options
| author |  Corentin Thomasset <corentin.thomasset74@gmail.com>
| 2022-06-01 23:52:21 +0200 |
|---|---|---|
| committer | Corentin Thomasset <corentin.thomasset74@gmail.com>
| 2022-06-02 00:11:49 +0200 |
| commit | 11720e6cdefc1da4bdd638415813b609840f8462 (patch) | |
| tree | b647d77a2fe3cec6af3b81bf02ceb17e636d80b7 /src/components/ToolCard.vue | |
| parent | ac89490794ee3c1c033859ffea31a962a13cc96d (diff) | |
| download | it-tools-11720e6cdefc1da4bdd638415813b609840f8462.tar.gz it-tools-11720e6cdefc1da4bdd638415813b609840f8462.tar.zst it-tools-11720e6cdefc1da4bdd638415813b609840f8462.zip | |
feat(tools): new badge for recently created tools
Diffstat (limited to 'src/components/ToolCard.vue')
| -rw-r--r-- | src/components/ToolCard.vue | 20 |
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> |