chore(user-agent-parser): some more changes requested by code review

src/tools/user-agent-parser/index.ts

@@ -8,4 +8,5 @@ export const tool = defineTool({
   keywords: ['user', 'agent', 'parser', 'browser', 'engine', 'os', 'cpu', 'device', 'user-agent', 'client'],
   component: () => import('./user-agent-parser.vue'),
   icon: Browser,
+  createdAt: new Date('2023-04-06'),
 });

src/tools/user-agent-parser/user-agent-parser.types.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'vue';
+import { UAParser } from 'ua-parser-js';
+
+export type UserAgentResultSection = {
+  heading: string;
+  icon?: Component;
+  content: {
+    label: string;
+    getValue: (blocks: UAParser.IResult) => string | undefined;
+    undefinedFallback?: string;
+  }[];
+};

src/tools/user-agent-parser/user-agent-parser.vue

@@ -15,11 +15,12 @@
 </template>
 
 <script setup lang="ts">
-import { computed, PropType, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { UAParser } from 'ua-parser-js';
 import { withDefaultOnError } from '@/utils/defaults';
 import { Adjustments, Browser, Cpu, Devices, Engine } from '@vicons/tabler';
 import UserAgentResultCards from './user-agent-result-cards.vue';
+import type { UserAgentResultSection } from './user-agent-parser.types';
 
 const ua = ref(navigator.userAgent as string);
 
@@ -32,15 +33,7 @@ const getUserAgentInfo = (userAgent: string) =>
     : ({ ua: '', browser: {}, cpu: {}, device: {}, engine: {}, os: {} } as UAParser.IResult);
 const userAgentInfo = computed(() => withDefaultOnError(() => getUserAgentInfo(ua.value), undefined));
 
-const sections: {
+const sections: UserAgentResultSection[] = [
-  heading: string;
-  icon?: PropType<any>;
-  content: {
-    label: string;
-    getValue: (blocks: UAParser.IResult) => string | undefined;
-    undefinedFallback?: string;
-  }[];
-}[] = [
   {
     heading: 'Browser',
     icon: Browser,

src/tools/user-agent-parser/user-agent-result-cards.vue

@@ -16,12 +16,11 @@
 
           <n-space>
             <span v-for="{ label, getValue } in content" :key="label">
-              <n-tooltip trigger="hover">
+              <n-tooltip v-if="getValue(userAgentInfo)" trigger="hover">
                 <template #trigger>
-                  <n-tag v-if="getValue(userAgentInfo)" type="success" size="large" round :bordered="false">
+                  <n-tag type="success" size="large" round :bordered="false">
                     {{ getValue(userAgentInfo) }}
                   </n-tag>
-                  <span v-else />
                 </template>
                 {{ label }}
               </n-tooltip>
@@ -39,20 +38,13 @@
 </template>
 
 <script setup lang="ts">
-import { PropType, toRefs } from 'vue';
+import { toRefs } from 'vue';
 import { UAParser } from 'ua-parser-js';
+import type { UserAgentResultSection } from './user-agent-parser.types';
 
 const props = defineProps<{
   userAgentInfo?: UAParser.IResult;
-  sections: {
+  sections: UserAgentResultSection[];
-    heading: string;
-    icon?: PropType<any>;
-    content: {
-      label: string;
-      getValue: (blocks: UAParser.IResult) => string | undefined;
-      undefinedFallback?: string;
-    }[];
-  }[];
 }>();
 const { userAgentInfo, sections } = toRefs(props);
 </script>