feat(new-tool): mac address lookup

src/tools/index.ts

@@ -46,6 +46,7 @@ import type { ToolCategory } from './tools.types';
 import { tool as urlEncoder } from './url-encoder';
 import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
+import { tool as macAddressLookup } from './mac-address-lookup';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -102,7 +103,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator],
+    components: [ipv4SubnetCalculator, macAddressLookup],
   },
   {
     name: 'Math',

src/tools/mac-address-lookup/index.ts

@@ -0,0 +1,12 @@
+import { Devices } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'MAC adrdress lookup',
+  path: '/mac-adrdress-lookup',
+  description: 'Find the vendor and manufacturer of a device by its MAC address.',
+  keywords: ['mac', 'adrdress', 'lookup', 'vendor', 'parser', 'manufacturer'],
+  component: () => import('./mac-address-lookup.vue'),
+  icon: Devices,
+  createdAt: new Date('2023-04-06'),
+});

src/tools/mac-address-lookup/mac-address-lookup.vue

@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <n-form-item label="MAC address:" v-bind="validationAttrs">
+      <n-input
+        v-model:value="macAddress"
+        size="large"
+        placeholder="Type a MAC address"
+        clearable
+        autocomplete="off"
+        autocorrect="off"
+        autocapitalize="off"
+        spellcheck="false"
+      />
+    </n-form-item>
+
+    <n-form-item label="Vendor info:">
+      <n-card>
+        <n-text v-if="details">
+          <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
+        </n-text>
+
+        <n-text v-else depth="3" italic>Unknown vendor for this address</n-text>
+      </n-card>
+    </n-form-item>
+
+    <n-space justify="center">
+      <n-button :disabled="!details" tertiary> Copy vendor info </n-button>
+    </n-space>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useValidation } from '@/composable/validation';
+import db from 'oui/oui.json';
+
+const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);
+
+const macAddress = ref('20:37:06:12:34:56');
+const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
+
+const { attrs: validationAttrs } = useValidation({
+  source: macAddress,
+  rules: [
+    {
+      message: 'Invalid MAC address',
+      validator: (value) => value.trim().match(/^([0-9A-Fa-f]{2}[:-]){2,5}([0-9A-Fa-f]{2})$/),
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped></style>

src/tools/mac-address-lookup/oui.d.ts

@@ -0,0 +1,4 @@
+declare module 'oui/oui.json' {
+  const db: Record<string, string>;
+  export default db;
+}