feat(new-tool): added unicode conversion utilities (#858)

* feat: add Text to Unicode tool

* Update src/tools/text-to-unicode/index.ts

---------

Co-authored-by: Corentin THOMASSET <corentin.thomasset74@gmail.com>

1 files changed, 34 insertions, 0 deletions

diff --git a/src/tools/text-to-unicode/text-to-unicode.vue b/src/tools/text-to-unicode/text-to-unicode.vue
new file mode 100644
index 0000000..ae4c698
--- /dev/null
+++ b/src/tools/text-to-unicode/text-to-unicode.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { convertTextToUnicode, convertUnicodeToText } from './text-to-unicode.service';
+import { useCopy } from '@/composable/copy';
+
+const inputText = ref('');
+const unicodeFromText = computed(() => inputText.value.trim() === '' ? '' : convertTextToUnicode(inputText.value));
+const { copy: copyUnicode } = useCopy({ source: unicodeFromText });
+
+const inputUnicode = ref('');
+const textFromUnicode = computed(() => inputUnicode.value.trim() === '' ? '' : convertUnicodeToText(inputUnicode.value));
+const { copy: copyText } = useCopy({ source: textFromUnicode });
+</script>
+
+<template>
+  <c-card title="Text to Unicode">
+    <c-input-text v-model:value="inputText" multiline placeholder="e.g. 'Hello Avengers'" label="Enter text to convert to binary" autosize autofocus raw-text test-id="text-to-unicode-input" />
+    <c-input-text v-model:value="unicodeFromText" label="Unicode from your text" multiline raw-text readonly mt-2 placeholder="The unicode representation of your text will be here" test-id="text-to-unicode-output" />
+    <div mt-2 flex justify-center>
+      <c-button :disabled="!unicodeFromText" @click="copyUnicode()">
+        Copy binary to clipboard
+      </c-button>
+    </div>
+  </c-card>
+
+  <c-card title="Unicode to Text">
+    <c-input-text v-model:value="inputUnicode" multiline placeholder="Input Unicode" label="Enter unicode to convert to text" autosize raw-text test-id="unicode-to-text-input" />
+    <c-input-text v-model:value="textFromUnicode" label="Text from your Unicode" multiline raw-text readonly mt-2 placeholder="The text representation of your unicode will be here" test-id="unicode-to-text-output" />
+    <div mt-2 flex justify-center>
+      <c-button :disabled="!textFromUnicode" @click="copyText()">
+        Copy text to clipboard
+      </c-button>
+    </div>
+  </c-card>
+</template>