feat(new tool): My IP Address

Fix #1435

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as myIp } from './my-ip';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -164,7 +165,15 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Network',
-    components: [ipv4SubnetCalculator, ipv4AddressConverter, ipv4RangeExpander, macAddressLookup, macAddressGenerator, ipv6UlaGenerator],
+    components: [
+      ipv4SubnetCalculator,
+      ipv4AddressConverter,
+      ipv4RangeExpander,
+      macAddressLookup,
+      macAddressGenerator,
+      ipv6UlaGenerator,
+      myIp,
+    ],
   },
   {
     name: 'Math',

src/tools/my-ip/index.ts

@@ -0,0 +1,12 @@
+import { World } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'My IP Address',
+  path: '/my-ip',
+  description: 'Get your client IP Address (IPv4/6) using https://getjsonip.com/',
+  keywords: ['my', 'client', 'ip'],
+  component: () => import('./my-ip.vue'),
+  icon: World,
+  createdAt: new Date('2025-01-01'),
+});

src/tools/my-ip/my-ip.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computedRefreshableAsync } from '@/composable/computedRefreshable';
+import { useCopy } from '@/composable/copy';
+
+const [clientIP, refreshClientIP] = computedRefreshableAsync(async () => {
+  try {
+    return (await fetch('https://jsonip.com', { mode: 'cors' })).json();
+  }
+  catch (e: any) {
+    return e.toString();
+  }
+});
+
+const { copy } = useCopy({ source: clientIP, text: 'Client IP copied to the clipboard' });
+</script>
+
+<template>
+  <c-card title="Your IPv4/6 address">
+    <div class="ip">
+      {{ clientIP }}
+    </div>
+    <div flex justify-center gap-3>
+      <c-button @click="copy()">
+        Copy
+      </c-button>
+      <c-button @click="refreshClientIP">
+        Refresh
+      </c-button>
+    </div>
+  </c-card>
+</template>
+
+<style lang="less" scoped>
+.ip {
+  text-align: center;
+  font-size: 26px;
+  font-weight: 400;
+  margin: 10px 0 25px;
+}
+</style>