feat(tool): random port generator

src/tools/index.ts

@@ -11,6 +11,7 @@ import { tool as dateTimeConverter } from './date-time-converter';
 import { tool as gitMemo } from './git-memo';
 import { tool as baseConverter } from './integer-base-converter';
 import { tool as urlEncoder } from './url-encoder';
+import { tool as randomPortGenerator } from './random-port-generator';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -31,7 +32,7 @@ export const toolsByCategory: ToolCategory[] = [
   {
     name: 'Development',
     icon: LockOpen,
-    components: [gitMemo],
+    components: [gitMemo, randomPortGenerator],
   },
 ];
 

src/tools/random-port-generator/index.ts

@@ -0,0 +1,11 @@
+import { Server } from '@vicons/tabler';
+import type { ITool } from '../Tool';
+
+export const tool: ITool = {
+  name: 'Random port generator',
+  path: '/random-port-generator',
+  description: 'Generate random port numbers outside of the range of "known" ports (0-1023).',
+  keywords: ['system', 'port', 'lan', 'generator', 'random', 'developement', 'computer'],
+  component: () => import('./random-port-generator.vue'),
+  icon: Server,
+};

src/tools/random-port-generator/random-port-generator.model.ts

@@ -0,0 +1,3 @@
+import { randIntFromInterval } from '@/utils/random';
+
+export const generatePort = () => randIntFromInterval(1024, 65535);

src/tools/random-port-generator/random-port-generator.vue

@@ -0,0 +1,31 @@
+<template>
+    <n-card>
+        <n-input :value="port" readonly style="text-align: center; font-family: monospace;" />
+        <br>
+        <br>
+        <n-space justify="center">
+            <n-button @click="copy" secondary>Copy</n-button>
+            <n-button @click="refreshPort" secondary>Refresh</n-button>
+        </n-space>
+    </n-card>
+</template>
+
+<script setup lang="ts">
+import { useCopy } from '@/composable/copy';
+import { ref } from 'vue'
+import { generatePort } from './random-port-generator.model'
+
+const port = ref('')
+
+const { copy } = useCopy({ source: port, text: 'Port copied to the clipboard' })
+
+function refreshPort() {
+    port.value = String(generatePort())
+}
+
+refreshPort()
+
+</script>
+
+<style lang="scss" scoped>
+</style>