1 files changed, 26 insertions, 28 deletions
diff --git a/src/tools/mac-address-lookup/mac-address-lookup.vue b/src/tools/mac-address-lookup/mac-address-lookup.vue
index 4ff4c2e..095a0ee 100644
--- a/src/tools/mac-address-lookup/mac-address-lookup.vue
+++ b/src/tools/mac-address-lookup/mac-address-lookup.vue
@@ -1,37 +1,37 @@
 <template>
   <div>
-    <n-form-item label="MAC address:" v-bind="validationAttrs as any">
-      <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:">
-      <c-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>
-      </c-card>
-    </n-form-item>
-
-    <n-space justify="center">
+    <c-input-text
+      v-model:value="macAddress"
+      label="MAC address:"
+      size="large"
+      placeholder="Type a MAC address"
+      clearable
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      :validation-rules="macAddressValidationRules"
+      mb-5
+    />
+
+    <div mb-5px>Vendor info:</div>
+    <c-card mb-5>
+      <div v-if="details">
+        <div v-for="(detail, index) of details.split('\n')" :key="index">{{ detail }}</div>
+      </div>
+
+      <div v-else italic op-60>Unknown vendor for this address</div>
+    </c-card>
+
+    <div flex justify-center>
       <c-button :disabled="!details" @click="copy"> Copy vendor info </c-button>
-    </n-space>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import db from 'oui/oui.json';
-import { macAddressValidation } from '@/utils/macAddress';
+import { macAddressValidationRules } from '@/utils/macAddress';
 import { useCopy } from '@/composable/copy';
 
 const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '').toUpperCase().substring(0, 6);
@@ -39,8 +39,6 @@ const getVendorValue = (address: string) => address.trim().replace(/[.:-]/g, '')
 const macAddress = ref('20:37:06:12:34:56');
 const details = computed<string | undefined>(() => db[getVendorValue(macAddress.value)]);
 
-const { attrs: validationAttrs } = macAddressValidation(macAddress);
-
 const { copy } = useCopy({ source: details, text: 'Vendor info copied to the clipboard' });
 </script>