1 files changed, 31 insertions, 0 deletions
diff --git a/src/tools/random-port-generator/random-port-generator.vue b/src/tools/random-port-generator/random-port-generator.vue
new file mode 100644
index 0000000..5c94a63
--- /dev/null
+++ b/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>
+\ No newline at end of file