feat(tools): new badge for recently created tools

2 files changed, 28 insertions, 5 deletions

diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue
index 0ad887c..2caac13 100644
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -10,6 +10,8 @@ import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
 import NavbarButtons from '../components/NavbarButtons.vue';
 import { config } from '@/config';
+import MenuIconItem from '@/components/MenuIconItem.vue';
+import type { ITool } from '@/tools/tool';
 
 const themeVars = useThemeVars();
 const route = useRoute();
@@ -18,15 +20,15 @@ const version = config.app.version;
 const commitSha = config.app.lastCommitSha.slice(0, 7);
 
 const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { default: () => text });
-const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) });
+const makeIcon = (tool: ITool) => () => h(MenuIconItem, { tool });
 
 const menuOptions = toolsByCategory.map((category) => ({
   label: category.name,
   key: category.name,
   type: 'group',
-  children: category.components.map(({ name, path, icon }) => ({
-    label: makeLabel(name, path),
-    icon: makeIcon(icon),
+  children: category.components.map((tool) => ({
+    label: makeLabel(tool.name, tool.path),
+    icon: makeIcon(tool),
     key: name,
   })),
 }));
@@ -218,6 +220,11 @@ const menuOptions = toolsByCategory.map((category) => ({
   }
 }
 
+// ::v-deep(.n-menu-item-content-header) {
+//   overflow: visible !important;
+//   // overflow-x: hidden !important;
+// }
+
 .navigation {
   display: flex;
   align-items: center;
diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue
index 58e8fb8..aae5d07 100644
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -4,8 +4,10 @@ import BaseLayout from './base.layout.vue';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
 import { reactive } from 'vue';
+import { useThemeVars } from 'naive-ui';
 
 const route = useRoute();
+const theme = useThemeVars();
 
 const head = reactive<HeadObject>({
   title: `${route.meta.name} - IT Tools`,
@@ -27,7 +29,21 @@ useHead(head);
   <base-layout>
     <div class="tool-layout">
       <div class="tool-header">
-        <n-h1>{{ route.meta.name }}</n-h1>
+        <n-h1>
+          {{ route.meta.name }}
+
+          <n-tag
+            v-if="route.meta.isNew"
+            round
+            type="success"
+            :bordered="false"
+            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+          >
+            New tool
+          </n-tag>
+          <!-- <span class="new-tool-badge">New !</span> -->
+        </n-h1>
+
         <div class="separator" />
         <div class="description">
           {{ route.meta.description }}