From 46859592cf3f3042f108338140ba2f45e5c1ffbd Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Sun, 14 Jul 2024 00:23:30 +0100
Subject: [PATCH] feat: rotate ui

---
 .idea/workspace.xml                           |  82 +++++++--
 .../list/duplicate/duplicate.service.test.ts  | 102 +++++------
 src/pages/list/duplicate/index.tsx            |   2 +-
 src/pages/list/duplicate/meta.ts              |   2 +-
 src/pages/list/duplicate/service.ts           | 126 +++++++-------
 src/pages/list/rotate/index.tsx               | 159 +++++++++++++++++-
 .../create-palindrome.service.test.ts         | 104 ++++++------
 src/pages/string/create-palindrome/index.tsx  |   2 +-
 src/pages/string/create-palindrome/meta.ts    |   2 +-
 src/pages/string/create-palindrome/service.ts |  51 +++---
 .../extract-substring.service.test.ts         |  94 ++++++-----
 src/pages/string/extract-substring/index.tsx  |   2 +-
 src/pages/string/extract-substring/meta.ts    |   2 +-
 src/pages/string/extract-substring/service.ts |  58 +++----
 src/pages/string/palindrome/index.tsx         |   2 +-
 src/pages/string/palindrome/meta.ts           |   2 +-
 .../palindrome/palindrome.service.test.ts     |  98 +++++------
 src/pages/string/palindrome/service.ts        |  60 +++----
 src/pages/string/randomize-case/index.tsx     |   2 +-
 src/pages/string/randomize-case/meta.ts       |   2 +-
 .../randomize-case.service.test.ts            |  74 ++++----
 src/pages/string/randomize-case/service.ts    |  12 +-
 src/pages/string/reverse/index.tsx            |   2 +-
 src/pages/string/reverse/meta.ts              |   2 +-
 .../string/reverse/reverse.service.test.ts    |  82 ++++-----
 src/pages/string/reverse/service.ts           |  47 +++---
 src/pages/string/uppercase/index.tsx          |   2 +-
 src/pages/string/uppercase/meta.ts            |   2 +-
 src/pages/string/uppercase/service.ts         |   4 +-
 .../uppercase/uppercase.service.test.ts       |  52 +++---
 30 files changed, 723 insertions(+), 510 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 1a60bd3..0922ad9 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,10 +4,37 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: self host">
-      <change afterPath="$PROJECT_DIR$/src/utils/number.ts" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="chore: format number">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/list/group/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/group/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/duplicate.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/duplicate.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/duplicate/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/duplicate/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/list/rotate/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/list/rotate/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/create-palindrome.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/create-palindrome.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/create-palindrome/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/create-palindrome/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/extract-substring.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/extract-substring.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/extract-substring/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/extract-substring/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/palindrome.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/palindrome.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/palindrome/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/palindrome/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/randomize-case.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/randomize-case.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/randomize-case/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/randomize-case/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/reverse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/reverse/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/reverse/reverse.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/reverse.service.test.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/reverse/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/reverse/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/meta.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/service.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/service.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/string/uppercase/uppercase.service.test.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/string/uppercase/uppercase.service.test.ts" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -29,6 +56,18 @@
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="RESET_MODE" value="HARD" />
   </component>
+  <component name="GitHubPullRequestSearchHistory">{
+  &quot;lastFilter&quot;: {
+    &quot;state&quot;: &quot;OPEN&quot;,
+    &quot;assignee&quot;: &quot;iib0011&quot;
+  }
+}</component>
+  <component name="GithubPullRequestsUISettings">{
+  &quot;selectedUrlAndAccountId&quot;: {
+    &quot;url&quot;: &quot;https://github.com/iib0011/omni-tools&quot;,
+    &quot;accountId&quot;: &quot;59b4836a-7ded-49a0-a358-5e8d81d0d44b&quot;
+  }
+}</component>
   <component name="KubernetesApiProvider">{
   &quot;isMigrated&quot;: true
 }</component>
@@ -117,7 +156,6 @@
         <settings>
           <option name="imageTag" value="omnitools" />
           <option name="buildCliOptions" value="--target build" />
-          <option name="buildKitEnabled" value="true" />
           <option name="containerName" value="omni-tools" />
           <option name="publishAllPorts" value="true" />
           <option name="sourceFilePath" value="Dockerfile" />
@@ -179,13 +217,21 @@
     <recent_temporary>
       <list>
         <item itemvalue="npm.dev" />
+        <item itemvalue="npm.lint" />
         <item itemvalue="Docker.Dockerfile build" />
         <item itemvalue="Docker.Dockerfile" />
-        <item itemvalue="npm.lint" />
         <item itemvalue="npm.test:e2e" />
       </list>
     </recent_temporary>
   </component>
+  <component name="SharedIndexes">
+    <attachedChunks>
+      <set>
+        <option value="bundled-jdk-9f38398b9061-39b83d9b5494-intellij.indexing.shared.core-IU-241.18034.62" />
+        <option value="bundled-js-predefined-1d06a55b98c1-0b3e54e931b4-JavaScript-IU-241.18034.62" />
+      </set>
+    </attachedChunks>
+  </component>
   <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
   <component name="TaskManager">
     <task active="true" id="Default" summary="Default task">
@@ -224,15 +270,9 @@
       <workItem from="1720613598176" duration="8000" />
       <workItem from="1720655252208" duration="3975000" />
       <workItem from="1720661825389" duration="4305000" />
-      <workItem from="1720729165596" duration="730000" />
-    </task>
-    <task id="LOCAL-00047" summary="feat: change colors in png">
-      <option name="closed" value="true" />
-      <created>1719197875189</created>
-      <option name="number" value="00047" />
-      <option name="presentableId" value="LOCAL-00047" />
-      <option name="project" value="LOCAL" />
-      <updated>1719197875189</updated>
+      <workItem from="1720729165596" duration="3258000" />
+      <workItem from="1720911748039" duration="331000" />
+      <workItem from="1720912096050" duration="810000" />
     </task>
     <task id="LOCAL-00048" summary="chore: ResultFooter">
       <option name="closed" value="true" />
@@ -618,7 +658,15 @@
       <option name="project" value="LOCAL" />
       <updated>1720665220408</updated>
     </task>
-    <option name="localTasksCounter" value="96" />
+    <task id="LOCAL-00096" summary="chore: format number">
+      <option name="closed" value="true" />
+      <created>1720730102816</created>
+      <option name="number" value="00096" />
+      <option name="presentableId" value="LOCAL-00096" />
+      <option name="project" value="LOCAL" />
+      <updated>1720730102817</updated>
+    </task>
+    <option name="localTasksCounter" value="97" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -662,7 +710,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="chore: make tool examples responsive" />
     <MESSAGE value="chore: loading screen" />
     <MESSAGE value="chore: shuffle tools search" />
     <MESSAGE value="refactor: toolOptions" />
@@ -687,7 +734,8 @@
     <MESSAGE value="feat: group list ui" />
     <MESSAGE value="feat: reverse list ui" />
     <MESSAGE value="feat: self host" />
-    <option name="LAST_COMMIT_MESSAGE" value="feat: self host" />
+    <MESSAGE value="chore: format number" />
+    <option name="LAST_COMMIT_MESSAGE" value="chore: format number" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/list/duplicate/duplicate.service.test.ts b/src/pages/list/duplicate/duplicate.service.test.ts
index c1554e6..3e2e69f 100644
--- a/src/pages/list/duplicate/duplicate.service.test.ts
+++ b/src/pages/list/duplicate/duplicate.service.test.ts
@@ -2,61 +2,65 @@ import { expect, describe, it } from 'vitest';
 import { duplicateList } from './service';
 
 describe('duplicateList function', () => {
-    it('should duplicate elements correctly with symbol split', () => {
-        const input = "Hello World";
-        const result = duplicateList('symbol', ' ', ' ', input, true, false, 2);
-        expect(result).toBe("Hello World Hello World");
-    });
+  it('should duplicate elements correctly with symbol split', () => {
+    const input = 'Hello World';
+    const result = duplicateList('symbol', ' ', ' ', input, true, false, 2);
+    expect(result).toBe('Hello World Hello World');
+  });
 
-    it('should duplicate elements correctly with regex split', () => {
-        const input = "Hello||World";
-        const result = duplicateList('regex', '\\|\\|', ' ', input, true, false, 2);
-        expect(result).toBe("Hello World Hello World");
-    });
+  it('should duplicate elements correctly with regex split', () => {
+    const input = 'Hello||World';
+    const result = duplicateList('regex', '\\|\\|', ' ', input, true, false, 2);
+    expect(result).toBe('Hello World Hello World');
+  });
 
-    it('should handle fractional duplication', () => {
-        const input = "Hello World";
-        const result = duplicateList('symbol', ' ', ' ', input, true, false, 1.5);
-        expect(result).toBe("Hello World Hello");
-    });
+  it('should handle fractional duplication', () => {
+    const input = 'Hello World';
+    const result = duplicateList('symbol', ' ', ' ', input, true, false, 1.5);
+    expect(result).toBe('Hello World Hello');
+  });
 
-    it('should handle reverse option correctly', () => {
-        const input = "Hello World";
-        const result = duplicateList('symbol', ' ', ' ', input, true, true, 2);
-        expect(result).toBe("Hello World World Hello");
-    });
+  it('should handle reverse option correctly', () => {
+    const input = 'Hello World';
+    const result = duplicateList('symbol', ' ', ' ', input, true, true, 2);
+    expect(result).toBe('Hello World World Hello');
+  });
 
-    it('should handle concatenate option correctly', () => {
-        const input = "Hello World";
-        const result = duplicateList('symbol', ' ', ' ', input, false, false, 2);
-        expect(result).toBe("Hello Hello World World");
-    });
+  it('should handle concatenate option correctly', () => {
+    const input = 'Hello World';
+    const result = duplicateList('symbol', ' ', ' ', input, false, false, 2);
+    expect(result).toBe('Hello Hello World World');
+  });
 
-    it('should handle interweaving option correctly', () => {
-        const input = "Hello World";
-        const result = duplicateList('symbol', ' ', ' ', input, false, false, 2);
-        expect(result).toBe("Hello Hello World World");
-    });
+  it('should handle interweaving option correctly', () => {
+    const input = 'Hello World';
+    const result = duplicateList('symbol', ' ', ' ', input, false, false, 2);
+    expect(result).toBe('Hello Hello World World');
+  });
 
-    it('should throw an error for negative copies', () => {
-        expect(() => duplicateList('symbol', ' ', ' ', "Hello World", true, false, -1)).toThrow("Number of copies cannot be negative");
-    });
+  it('should throw an error for negative copies', () => {
+    expect(() =>
+      duplicateList('symbol', ' ', ' ', 'Hello World', true, false, -1)
+    ).toThrow('Number of copies cannot be negative');
+  });
 
-    it('should handle interweaving option correctly 2', () => {
-        const input = "je m'appelle king";
-        const result = duplicateList('symbol', ' ', ', ', input, false, true, 2.1);
-        expect(result).toBe("je, king, m'appelle, m'appelle, king, je");
-    });
+  it('should handle interweaving option correctly 2', () => {
+    const input = "je m'appelle king";
+    const result = duplicateList('symbol', ' ', ', ', input, false, true, 2.1);
+    expect(result).toBe("je, king, m'appelle, m'appelle, king, je");
+  });
 
-    it('should handle interweaving option correctly 3', () => {
-        const input = "je m'appelle king";
-        const result = duplicateList('symbol', ' ', ', ', input, false, true, 1);
-        expect(result).toBe("je, m'appelle, king");
-    });
+  it('should handle interweaving option correctly 3', () => {
+    const input = "je m'appelle king";
+    const result = duplicateList('symbol', ' ', ', ', input, false, true, 1);
+    expect(result).toBe("je, m'appelle, king");
+  });
 
-    it('should handle interweaving option correctly 3', () => {
-        const input = "je m'appelle king";
-        const result = duplicateList('symbol', ' ', ', ', input, true, true, 2.7);
-        expect(result).toBe("je, m'appelle, king, king, m'appelle, je, king, m'appelle");
-    });
-});
\ No newline at end of file
+  it('should handle interweaving option correctly 3', () => {
+    const input = "je m'appelle king";
+    const result = duplicateList('symbol', ' ', ', ', input, true, true, 2.7);
+    expect(result).toBe(
+      "je, m'appelle, king, king, m'appelle, je, king, m'appelle"
+    );
+  });
+});
diff --git a/src/pages/list/duplicate/index.tsx b/src/pages/list/duplicate/index.tsx
index c833d45..f5f5aeb 100644
--- a/src/pages/list/duplicate/index.tsx
+++ b/src/pages/list/duplicate/index.tsx
@@ -8,4 +8,4 @@ const validationSchema = Yup.object({
 });
 export default function Duplicate() {
   return <Box>Lorem ipsum</Box>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/list/duplicate/meta.ts b/src/pages/list/duplicate/meta.ts
index 89f9fe1..e99d39e 100644
--- a/src/pages/list/duplicate/meta.ts
+++ b/src/pages/list/duplicate/meta.ts
@@ -10,4 +10,4 @@ export const tool = defineTool('list', {
   shortDescription: '',
   keywords: ['duplicate'],
   component: lazy(() => import('./index'))
-});
\ No newline at end of file
+});
diff --git a/src/pages/list/duplicate/service.ts b/src/pages/list/duplicate/service.ts
index c1c2bbd..cc711fc 100644
--- a/src/pages/list/duplicate/service.ts
+++ b/src/pages/list/duplicate/service.ts
@@ -1,69 +1,81 @@
 export type SplitOperatorType = 'symbol' | 'regex';
 
-function interweave(
-    array1: string[],
-    array2: string[]) {
-    const result: string[] = [];
-    const maxLength = Math.max(array1.length, array2.length);
+function interweave(array1: string[], array2: string[]) {
+  const result: string[] = [];
+  const maxLength = Math.max(array1.length, array2.length);
 
-    for (let i = 0; i < maxLength; i++) {
-        if (i < array1.length) result.push(array1[i]);
-        if (i < array2.length) result.push(array2[i]);
-    }
-    return result;
+  for (let i = 0; i < maxLength; i++) {
+    if (i < array1.length) result.push(array1[i]);
+    if (i < array2.length) result.push(array2[i]);
+  }
+  return result;
 }
 function duplicate(
-    input: string[],
-    concatenate: boolean,
-    reverse: boolean,
-    copy?: number
+  input: string[],
+  concatenate: boolean,
+  reverse: boolean,
+  copy?: number
 ) {
-    if (copy) {
-        if (copy > 0) {
-            let result: string[] = [];
-            let toAdd: string[] = [];
-            let WholePart: string[] = [];
-            let fractionalPart: string[] = [];
-            const whole = Math.floor(copy);
-            const fractional = copy - whole;
-            if (!reverse) {
-                WholePart = concatenate ? Array(whole).fill(input).flat() : Array(whole - 1).fill(input).flat();
-                fractionalPart = input.slice(0, Math.floor(input.length * fractional));
-                toAdd = WholePart.concat(fractionalPart);
-                result = concatenate ? WholePart.concat(fractionalPart) : interweave(input, toAdd);
-            } else {
-                WholePart = Array(whole - 1).fill(input).flat().reverse()
-                fractionalPart = input.slice().reverse().slice(0, Math.floor(input.length * fractional));
-                toAdd = WholePart.concat(fractionalPart);
-                result = concatenate ? input.concat(toAdd) : interweave(input, toAdd);
-            }
+  if (copy) {
+    if (copy > 0) {
+      let result: string[] = [];
+      let toAdd: string[] = [];
+      let WholePart: string[] = [];
+      let fractionalPart: string[] = [];
+      const whole = Math.floor(copy);
+      const fractional = copy - whole;
+      if (!reverse) {
+        WholePart = concatenate
+          ? Array(whole).fill(input).flat()
+          : Array(whole - 1)
+              .fill(input)
+              .flat();
+        fractionalPart = input.slice(0, Math.floor(input.length * fractional));
+        toAdd = WholePart.concat(fractionalPart);
+        result = concatenate
+          ? WholePart.concat(fractionalPart)
+          : interweave(input, toAdd);
+      } else {
+        WholePart = Array(whole - 1)
+          .fill(input)
+          .flat()
+          .reverse();
+        fractionalPart = input
+          .slice()
+          .reverse()
+          .slice(0, Math.floor(input.length * fractional));
+        toAdd = WholePart.concat(fractionalPart);
+        result = concatenate ? input.concat(toAdd) : interweave(input, toAdd);
+      }
 
-            return result;
-        }
-        throw new Error("Number of copies cannot be negative");
+      return result;
     }
-    throw new Error("Number of copies must be a valid number");
+    throw new Error('Number of copies cannot be negative');
+  }
+  throw new Error('Number of copies must be a valid number');
 }
 
 export function duplicateList(
-    splitOperatorType: SplitOperatorType,
-    splitSeparator: string,
-    joinSeparator: string,
-    input: string,
-    concatenate: boolean,
-    reverse: boolean,
-    copy?: number
+  splitOperatorType: SplitOperatorType,
+  splitSeparator: string,
+  joinSeparator: string,
+  input: string,
+  concatenate: boolean,
+  reverse: boolean,
+  copy?: number
 ): string {
-    let array: string[];
-    let result: string[];
-    switch (splitOperatorType) {
-        case 'symbol':
-            array = input.split(splitSeparator);
-            break;
-        case 'regex':
-            array = input.split(new RegExp(splitSeparator)).filter(item => item !== '');
-            break;
-    }
-    result = duplicate(array, concatenate, reverse, copy);
-    return result.join(joinSeparator);
-}
\ No newline at end of file
+  let array: string[];
+  let result: string[];
+  switch (splitOperatorType) {
+    case 'symbol':
+      array = input.split(splitSeparator);
+      break;
+    case 'regex':
+      array = input
+        .split(new RegExp(splitSeparator))
+        .filter((item) => item !== '');
+      break;
+  }
+  result = duplicate(array, concatenate, reverse, copy);
+  return result.join(joinSeparator);
+}
diff --git a/src/pages/list/rotate/index.tsx b/src/pages/list/rotate/index.tsx
index 4f8cbb8..a61779f 100644
--- a/src/pages/list/rotate/index.tsx
+++ b/src/pages/list/rotate/index.tsx
@@ -1,11 +1,158 @@
 import { Box } from '@mui/material';
-import React from 'react';
+import React, { useState } from 'react';
+import ToolTextInput from '../../../components/input/ToolTextInput';
+import ToolTextResult from '../../../components/result/ToolTextResult';
 import * as Yup from 'yup';
+import ToolOptions from '../../../components/options/ToolOptions';
+import { rotateList, SplitOperatorType } from './service';
+import ToolInputAndResult from '../../../components/ToolInputAndResult';
+import SimpleRadio from '../../../components/options/SimpleRadio';
+import TextFieldWithDesc from '../../../components/options/TextFieldWithDesc';
+import { formatNumber } from '../../../utils/number';
+
+const initialValues = {
+  splitOperatorType: 'symbol' as SplitOperatorType,
+  input: '',
+  splitSeparator: ',',
+  joinSeparator: ',',
+  right: true,
+  step: 1
+};
+const splitOperators: {
+  title: string;
+  description: string;
+  type: SplitOperatorType;
+}[] = [
+  {
+    title: 'Use a Symbol for Splitting',
+    description: 'Delimit input list items with a character.',
+    type: 'symbol'
+  },
+  {
+    title: 'Use a Regex for Splitting',
+    type: 'regex',
+    description: 'Delimit input list items with a regular expression.'
+  }
+];
+const rotationDirections: {
+  title: string;
+  description: string;
+  value: boolean;
+}[] = [
+  {
+    title: 'Rotate forward',
+    description:
+      'Rotate list items to the right. (Down if a vertical column list.)',
+    value: true
+  },
+  {
+    title: 'Rotate backward',
+    description:
+      'Rotate list items to the left. (Up if a vertical column list.)',
+    value: false
+  }
+];
 
-const initialValues = {};
-const validationSchema = Yup.object({
-  // splitSeparator: Yup.string().required('The separator is required')
-});
 export default function Rotate() {
-  return <Box>Lorem ipsum</Box>;
+  const [input, setInput] = useState<string>('');
+  const [result, setResult] = useState<string>('');
+  const compute = (optionsValues: typeof initialValues, input: any) => {
+    const { splitOperatorType, splitSeparator, joinSeparator, right, step } =
+      optionsValues;
+
+    setResult(
+      rotateList(
+        splitOperatorType,
+        input,
+        splitSeparator,
+        joinSeparator,
+        right,
+        step
+      )
+    );
+  };
+  const validationSchema = Yup.object({
+    // splitSeparator: Yup.string().required('The separator is required')
+  });
+
+  return (
+    <Box>
+      <ToolInputAndResult
+        input={
+          <ToolTextInput
+            title={'Input list'}
+            value={input}
+            onChange={setInput}
+          />
+        }
+        result={<ToolTextResult title={'Rotated list'} value={result} />}
+      />
+      <ToolOptions
+        compute={compute}
+        getGroups={({ values, updateField }) => [
+          {
+            title: 'Item split mode',
+            component: (
+              <Box>
+                {splitOperators.map(({ title, description, type }) => (
+                  <SimpleRadio
+                    key={type}
+                    onClick={() => updateField('splitOperatorType', type)}
+                    title={title}
+                    description={description}
+                    checked={values.splitOperatorType === type}
+                  />
+                ))}
+                <TextFieldWithDesc
+                  description={'Set a delimiting symbol or regular expression.'}
+                  value={values.splitSeparator}
+                  onOwnChange={(val) => updateField('splitSeparator', val)}
+                />
+              </Box>
+            )
+          },
+          {
+            title: 'Rotation Direction and Count',
+            component: (
+              <Box>
+                {rotationDirections.map(({ title, description, value }) => (
+                  <SimpleRadio
+                    key={`${value}`}
+                    onClick={() => updateField('right', Boolean(value))}
+                    title={title}
+                    description={description}
+                    checked={values.right === value}
+                  />
+                ))}
+                <TextFieldWithDesc
+                  description={'Number of items to rotate'}
+                  value={values.step}
+                  onOwnChange={(val) =>
+                    updateField('step', formatNumber(val, 1))
+                  }
+                />
+              </Box>
+            )
+          },
+          {
+            title: 'Rotated List Joining Symbol',
+            component: (
+              <Box>
+                <TextFieldWithDesc
+                  value={values.joinSeparator}
+                  onOwnChange={(value) => updateField('joinSeparator', value)}
+                  description={
+                    'Enter the character that goes between items in the rotated list.'
+                  }
+                />
+              </Box>
+            )
+          }
+        ]}
+        initialValues={initialValues}
+        input={input}
+        validationSchema={validationSchema}
+      />
+    </Box>
+  );
 }
diff --git a/src/pages/string/create-palindrome/create-palindrome.service.test.ts b/src/pages/string/create-palindrome/create-palindrome.service.test.ts
index ddd712b..f223eff 100644
--- a/src/pages/string/create-palindrome/create-palindrome.service.test.ts
+++ b/src/pages/string/create-palindrome/create-palindrome.service.test.ts
@@ -1,66 +1,66 @@
 import { expect, describe, it } from 'vitest';
- import { createPalindromeList, createPalindrome } from './service';
+import { createPalindromeList, createPalindrome } from './service';
 
 describe('createPalindrome', () => {
-    test('should create palindrome by reversing the entire string', () => {
-        const input = 'hello';
-        const result = createPalindrome(input, true);
-        expect(result).toBe('helloolleh');
-    });
+  test('should create palindrome by reversing the entire string', () => {
+    const input = 'hello';
+    const result = createPalindrome(input, true);
+    expect(result).toBe('helloolleh');
+  });
 
-    test('should create palindrome by reversing the string excluding the last character', () => {
-        const input = 'hello';
-        const result = createPalindrome(input, false);
-        expect(result).toBe('hellolleh');
-    });
+  test('should create palindrome by reversing the string excluding the last character', () => {
+    const input = 'hello';
+    const result = createPalindrome(input, false);
+    expect(result).toBe('hellolleh');
+  });
 
-    test('should return an empty string if input is empty', () => {
-        const input = '';
-        const result = createPalindrome(input, true);
-        expect(result).toBe('');
-    });
+  test('should return an empty string if input is empty', () => {
+    const input = '';
+    const result = createPalindrome(input, true);
+    expect(result).toBe('');
+  });
 });
 
 describe('createPalindromeList', () => {
-    test('should create palindrome for single-line input', () => {
-        const input = 'hello';
-        const result = createPalindromeList(input, true, false);
-        expect(result).toBe('helloolleh');
-    });
+  test('should create palindrome for single-line input', () => {
+    const input = 'hello';
+    const result = createPalindromeList(input, true, false);
+    expect(result).toBe('helloolleh');
+  });
 
-    test('should create palindrome for single-line input considering trailing spaces', () => {
-        const input = 'hello ';
-        const result = createPalindromeList(input, true, false);
-        expect(result).toBe('hello  olleh');
-    });
+  test('should create palindrome for single-line input considering trailing spaces', () => {
+    const input = 'hello ';
+    const result = createPalindromeList(input, true, false);
+    expect(result).toBe('hello  olleh');
+  });
 
-    test('should create palindrome for single-line input ignoring trailing spaces if lastChar is set to false', () => {
-        const input = 'hello ';
-        const result = createPalindromeList(input, true, false);
-        expect(result).toBe('hello  olleh');
-    });
+  test('should create palindrome for single-line input ignoring trailing spaces if lastChar is set to false', () => {
+    const input = 'hello ';
+    const result = createPalindromeList(input, true, false);
+    expect(result).toBe('hello  olleh');
+  });
 
-    test('should create palindrome for multi-line input', () => {
-        const input = 'hello\nworld';
-        const result = createPalindromeList(input, true, true);
-        expect(result).toBe('helloolleh\nworlddlrow');
-    });
+  test('should create palindrome for multi-line input', () => {
+    const input = 'hello\nworld';
+    const result = createPalindromeList(input, true, true);
+    expect(result).toBe('helloolleh\nworlddlrow');
+  });
 
-    test('should create palindrome for no multi-line input', () => {
-        const input = 'hello\nworld\n';
-        const result = createPalindromeList(input, true, false);
-        expect(result).toBe('hello\nworld\n\ndlrow\nolleh');
-    });
+  test('should create palindrome for no multi-line input', () => {
+    const input = 'hello\nworld\n';
+    const result = createPalindromeList(input, true, false);
+    expect(result).toBe('hello\nworld\n\ndlrow\nolleh');
+  });
 
-    test('should handle multi-line input with lastChar set to false', () => {
-        const input = 'hello\nworld';
-        const result = createPalindromeList(input, false, true);
-        expect(result).toBe('hellolleh\nworldlrow');
-    });
+  test('should handle multi-line input with lastChar set to false', () => {
+    const input = 'hello\nworld';
+    const result = createPalindromeList(input, false, true);
+    expect(result).toBe('hellolleh\nworldlrow');
+  });
 
-    test('should return an empty string if input is empty', () => {
-        const input = '';
-        const result = createPalindromeList(input, true, false);
-        expect(result).toBe('');
-    });
-});
\ No newline at end of file
+  test('should return an empty string if input is empty', () => {
+    const input = '';
+    const result = createPalindromeList(input, true, false);
+    expect(result).toBe('');
+  });
+});
diff --git a/src/pages/string/create-palindrome/index.tsx b/src/pages/string/create-palindrome/index.tsx
index da75227..5a45556 100644
--- a/src/pages/string/create-palindrome/index.tsx
+++ b/src/pages/string/create-palindrome/index.tsx
@@ -8,4 +8,4 @@ const validationSchema = Yup.object({
 });
 export default function CreatePalindrome() {
   return <Box>Lorem ipsum</Box>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/string/create-palindrome/meta.ts b/src/pages/string/create-palindrome/meta.ts
index 5b21620..f592900 100644
--- a/src/pages/string/create-palindrome/meta.ts
+++ b/src/pages/string/create-palindrome/meta.ts
@@ -10,4 +10,4 @@ export const tool = defineTool('string', {
   shortDescription: '',
   keywords: ['create', 'palindrome'],
   component: lazy(() => import('./index'))
-});
\ No newline at end of file
+});
diff --git a/src/pages/string/create-palindrome/service.ts b/src/pages/string/create-palindrome/service.ts
index 1f87c6d..9cf5cff 100644
--- a/src/pages/string/create-palindrome/service.ts
+++ b/src/pages/string/create-palindrome/service.ts
@@ -1,35 +1,36 @@
-import { reverseString } from 'utils/string'
+import { reverseString } from 'utils/string';
 
 export function createPalindrome(
-    input: string,
-    lastChar: boolean  // only checkbox is need here to handle it [instead of two combo boxes]
+  input: string,
+  lastChar: boolean // only checkbox is need here to handle it [instead of two combo boxes]
 ) {
-    if (!input) return '';
-    let result: string;
-    let reversedString: string;
+  if (!input) return '';
+  let result: string;
+  let reversedString: string;
 
-    // reverse the whole input if lastChar enabled
-    reversedString = lastChar ? reverseString(input) : reverseString(input.slice(0, -1));
-    result = input.concat(reversedString);
-    return result;
+  // reverse the whole input if lastChar enabled
+  reversedString = lastChar
+    ? reverseString(input)
+    : reverseString(input.slice(0, -1));
+  result = input.concat(reversedString);
+  return result;
 }
 
 export function createPalindromeList(
-    input: string,
-    lastChar: boolean,
-    multiLine: boolean
+  input: string,
+  lastChar: boolean,
+  multiLine: boolean
 ): string {
-    if (!input) return '';
-    let array: string[];
-    let result: string[] = [];
+  if (!input) return '';
+  let array: string[];
+  const result: string[] = [];
 
-    if (!multiLine) return createPalindrome(input, lastChar);
-    else {
-        array = input.split('\n');
-        for (const word of array) {
-            result.push(createPalindrome(word, lastChar));
-        }
+  if (!multiLine) return createPalindrome(input, lastChar);
+  else {
+    array = input.split('\n');
+    for (const word of array) {
+      result.push(createPalindrome(word, lastChar));
     }
-    return result.join('\n');
-    
-}
\ No newline at end of file
+  }
+  return result.join('\n');
+}
diff --git a/src/pages/string/extract-substring/extract-substring.service.test.ts b/src/pages/string/extract-substring/extract-substring.service.test.ts
index ecacc55..053da4d 100644
--- a/src/pages/string/extract-substring/extract-substring.service.test.ts
+++ b/src/pages/string/extract-substring/extract-substring.service.test.ts
@@ -2,56 +2,60 @@ import { expect, describe, it } from 'vitest';
 import { extractSubstring } from './service';
 
 describe('extractSubstring', () => {
-    it('should extract a substring from single-line input', () => {
-        const input = 'hello world';
-        const result = extractSubstring(input, 1, 4, false, false);
-        expect(result).toBe('hell');
-    });
+  it('should extract a substring from single-line input', () => {
+    const input = 'hello world';
+    const result = extractSubstring(input, 1, 4, false, false);
+    expect(result).toBe('hell');
+  });
 
-    it('should extract and reverse a substring from single-line input', () => {
-        const input = 'hello world';
-        const result = extractSubstring(input, 1, 5, false, true);
-        expect(result).toBe('olleh');
-    });
+  it('should extract and reverse a substring from single-line input', () => {
+    const input = 'hello world';
+    const result = extractSubstring(input, 1, 5, false, true);
+    expect(result).toBe('olleh');
+  });
 
-    it('should extract substrings from multi-line input', () => {
-        const input = 'hello\nworld';
-        const result = extractSubstring(input, 1, 5, true, false);
-        expect(result).toBe('hello\nworld');
-    });
+  it('should extract substrings from multi-line input', () => {
+    const input = 'hello\nworld';
+    const result = extractSubstring(input, 1, 5, true, false);
+    expect(result).toBe('hello\nworld');
+  });
 
-    it('should extract and reverse substrings from multi-line input', () => {
-        const input = 'hello\nworld';
-        const result = extractSubstring(input, 1, 4, true, true);
-        expect(result).toBe('lleh\nlrow');
-    });
+  it('should extract and reverse substrings from multi-line input', () => {
+    const input = 'hello\nworld';
+    const result = extractSubstring(input, 1, 4, true, true);
+    expect(result).toBe('lleh\nlrow');
+  });
 
-    it('should handle empty input', () => {
-        const input = '';
-        const result = extractSubstring(input, 1, 5, false, false);
-        expect(result).toBe('');
-    });
+  it('should handle empty input', () => {
+    const input = '';
+    const result = extractSubstring(input, 1, 5, false, false);
+    expect(result).toBe('');
+  });
 
-    it('should handle start and length out of bounds', () => {
-        const input = 'hello';
-        const result = extractSubstring(input, 10, 5, false, false);
-        expect(result).toBe('');
-    });
+  it('should handle start and length out of bounds', () => {
+    const input = 'hello';
+    const result = extractSubstring(input, 10, 5, false, false);
+    expect(result).toBe('');
+  });
 
-    it('should handle negative start and length', () => {
-        expect(() => extractSubstring('hello', -1, 5, false, false)).toThrow("Start index must be greater than zero.");
-        expect(() => extractSubstring('hello', 1, -5, false, false)).toThrow("Length value must be greater than or equal to zero.");
-    });
+  it('should handle negative start and length', () => {
+    expect(() => extractSubstring('hello', -1, 5, false, false)).toThrow(
+      'Start index must be greater than zero.'
+    );
+    expect(() => extractSubstring('hello', 1, -5, false, false)).toThrow(
+      'Length value must be greater than or equal to zero.'
+    );
+  });
 
-    it('should handle zero length', () => {
-        const input = 'hello';
-        const result = extractSubstring(input, 1, 0, false, false);
-        expect(result).toBe('');
-    });
+  it('should handle zero length', () => {
+    const input = 'hello';
+    const result = extractSubstring(input, 1, 0, false, false);
+    expect(result).toBe('');
+  });
 
-    it('should work', () => {
-        const input = 'je me nomme king\n22 est mon chiffre';
-        const result = extractSubstring(input, 12, 7, true, false);
-        expect(result).toBe(' king\nchiffre');
-    });
-});
\ No newline at end of file
+  it('should work', () => {
+    const input = 'je me nomme king\n22 est mon chiffre';
+    const result = extractSubstring(input, 12, 7, true, false);
+    expect(result).toBe(' king\nchiffre');
+  });
+});
diff --git a/src/pages/string/extract-substring/index.tsx b/src/pages/string/extract-substring/index.tsx
index be249e8..bbd3e7d 100644
--- a/src/pages/string/extract-substring/index.tsx
+++ b/src/pages/string/extract-substring/index.tsx
@@ -8,4 +8,4 @@ const validationSchema = Yup.object({
 });
 export default function ExtractSubstring() {
   return <Box>Lorem ipsum</Box>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/string/extract-substring/meta.ts b/src/pages/string/extract-substring/meta.ts
index 30e8f74..a9622d4 100644
--- a/src/pages/string/extract-substring/meta.ts
+++ b/src/pages/string/extract-substring/meta.ts
@@ -10,4 +10,4 @@ export const tool = defineTool('string', {
   shortDescription: '',
   keywords: ['extract', 'substring'],
   component: lazy(() => import('./index'))
-});
\ No newline at end of file
+});
diff --git a/src/pages/string/extract-substring/service.ts b/src/pages/string/extract-substring/service.ts
index c06a10f..4aacab3 100644
--- a/src/pages/string/extract-substring/service.ts
+++ b/src/pages/string/extract-substring/service.ts
@@ -1,36 +1,36 @@
-import { reverseString } from 'utils/string'
+import { reverseString } from 'utils/string';
 
 export function extractSubstring(
-    input: string,
-    start: number,
-    length: number,
-    multiLine: boolean,
-    reverse: boolean
+  input: string,
+  start: number,
+  length: number,
+  multiLine: boolean,
+  reverse: boolean
 ): string {
-    if (!input) return '';
-    // edge Cases
-    if (start <= 0) throw new Error("Start index must be greater than zero.");
-    if (length < 0) throw new Error("Length value must be greater than or equal to zero.");
-    if (length === 0) return '';
+  if (!input) return '';
+  // edge Cases
+  if (start <= 0) throw new Error('Start index must be greater than zero.');
+  if (length < 0)
+    throw new Error('Length value must be greater than or equal to zero.');
+  if (length === 0) return '';
 
-    let array: string[];
-    let result: string[] = [];
+  let array: string[];
+  let result: string[] = [];
 
-    const extract = (str: string, start: number, length: number): string => {
-        const end = start - 1 + length;
-        if (start - 1 >= str.length) return '';
-        return str.substring(start - 1, Math.min(end, str.length));
-    };
+  const extract = (str: string, start: number, length: number): string => {
+    const end = start - 1 + length;
+    if (start - 1 >= str.length) return '';
+    return str.substring(start - 1, Math.min(end, str.length));
+  };
 
-    if (!multiLine) {
-        result.push(extract(input, start, length));
+  if (!multiLine) {
+    result.push(extract(input, start, length));
+  } else {
+    array = input.split('\n');
+    for (const word of array) {
+      result.push(extract(word, start, length));
     }
-    else {
-        array = input.split('\n');
-        for (const word of array) {
-            result.push(extract(word, start, length));
-        }
-    }
-    result = reverse ? result.map(word => reverseString(word)) : result;
-    return result.join('\n');
-}
\ No newline at end of file
+  }
+  result = reverse ? result.map((word) => reverseString(word)) : result;
+  return result.join('\n');
+}
diff --git a/src/pages/string/palindrome/index.tsx b/src/pages/string/palindrome/index.tsx
index a7104cb..9b5d8ad 100644
--- a/src/pages/string/palindrome/index.tsx
+++ b/src/pages/string/palindrome/index.tsx
@@ -8,4 +8,4 @@ const validationSchema = Yup.object({
 });
 export default function Palindrome() {
   return <Box>Lorem ipsum</Box>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/string/palindrome/meta.ts b/src/pages/string/palindrome/meta.ts
index 868cff3..c2ddcb6 100644
--- a/src/pages/string/palindrome/meta.ts
+++ b/src/pages/string/palindrome/meta.ts
@@ -10,4 +10,4 @@ export const tool = defineTool('string', {
   shortDescription: '',
   keywords: ['palindrome'],
   component: lazy(() => import('./index'))
-});
\ No newline at end of file
+});
diff --git a/src/pages/string/palindrome/palindrome.service.test.ts b/src/pages/string/palindrome/palindrome.service.test.ts
index 10d5f2e..16ebf22 100644
--- a/src/pages/string/palindrome/palindrome.service.test.ts
+++ b/src/pages/string/palindrome/palindrome.service.test.ts
@@ -2,59 +2,59 @@ import { expect, describe, it } from 'vitest';
 import { palindromeList } from './service';
 
 describe('palindromeList', () => {
-    test('should return true for single character words', () => {
-        const input = 'a|b|c';
-        const separator = '|';
-        const result = palindromeList('symbol', input, separator);
-        expect(result).toBe('true|true|true');
-    });
+  test('should return true for single character words', () => {
+    const input = 'a|b|c';
+    const separator = '|';
+    const result = palindromeList('symbol', input, separator);
+    expect(result).toBe('true|true|true');
+  });
 
-    test('should return false for non-palindromes', () => {
-        const input = 'hello|world';
-        const separator = '|';
-        const result = palindromeList('symbol', input, separator);
-        expect(result).toBe('false|false');
-    });
+  test('should return false for non-palindromes', () => {
+    const input = 'hello|world';
+    const separator = '|';
+    const result = palindromeList('symbol', input, separator);
+    expect(result).toBe('false|false');
+  });
 
-    test('should split using regex', () => {
-        const input = 'racecar,abba,hello';
-        const separator = ',';
-        const result = palindromeList('regex', input, separator);
-        expect(result).toBe('true,true,false');
-    });
+  test('should split using regex', () => {
+    const input = 'racecar,abba,hello';
+    const separator = ',';
+    const result = palindromeList('regex', input, separator);
+    expect(result).toBe('true,true,false');
+  });
 
-    test('should return empty string for empty input', () => {
-        const input = '';
-        const separator = '|';
-        const result = palindromeList('symbol', input, separator);
-        expect(result).toBe('');
-    });
+  test('should return empty string for empty input', () => {
+    const input = '';
+    const separator = '|';
+    const result = palindromeList('symbol', input, separator);
+    expect(result).toBe('');
+  });
 
-    test('should split using custom separator', () => {
-        const input = 'racecar;abba;hello';
-        const separator = ';';
-        const result = palindromeList('symbol', input, separator);
-        expect(result).toBe('true;true;false');
-    });
+  test('should split using custom separator', () => {
+    const input = 'racecar;abba;hello';
+    const separator = ';';
+    const result = palindromeList('symbol', input, separator);
+    expect(result).toBe('true;true;false');
+  });
 
-    test('should handle leading and trailing spaces', () => {
-        const input = ' racecar | abba | hello ';
-        const separator = '|';
-        const result = palindromeList('symbol', input, separator);
-        expect(result).toBe('true|true|false');
-    });
+  test('should handle leading and trailing spaces', () => {
+    const input = ' racecar | abba | hello ';
+    const separator = '|';
+    const result = palindromeList('symbol', input, separator);
+    expect(result).toBe('true|true|false');
+  });
 
-    test('should handle multilines checking with trimming', () => {
-        const input = ' racecar  \n    abba \n  hello ';
-        const separator = '\n';
-        const result = palindromeList('symbol', input, separator);
-        expect(result).toBe('true\ntrue\nfalse');
-    });
+  test('should handle multilines checking with trimming', () => {
+    const input = ' racecar  \n    abba \n  hello ';
+    const separator = '\n';
+    const result = palindromeList('symbol', input, separator);
+    expect(result).toBe('true\ntrue\nfalse');
+  });
 
-    test('should handle empty strings in input', () => {
-        const input = 'racecar||hello';
-        const separator = '|';
-        const result = palindromeList('symbol', input, separator);
-        expect(result).toBe('true|true|false');
-    });
-});
\ No newline at end of file
+  test('should handle empty strings in input', () => {
+    const input = 'racecar||hello';
+    const separator = '|';
+    const result = palindromeList('symbol', input, separator);
+    expect(result).toBe('true|true|false');
+  });
+});
diff --git a/src/pages/string/palindrome/service.ts b/src/pages/string/palindrome/service.ts
index e383fd4..b00e788 100644
--- a/src/pages/string/palindrome/service.ts
+++ b/src/pages/string/palindrome/service.ts
@@ -1,47 +1,41 @@
 export type SplitOperatorType = 'symbol' | 'regex';
 
-function isPalindrome(
-    word: string,
-    left: number,
-    right: number
-): boolean {
-    if (left >= right) return true;
-    if (word[left] !== word[right]) return false;
+function isPalindrome(word: string, left: number, right: number): boolean {
+  if (left >= right) return true;
+  if (word[left] !== word[right]) return false;
 
-    return isPalindrome(word, left + 1, right - 1);
+  return isPalindrome(word, left + 1, right - 1);
 }
 
 // check each word of the input and add the palindrome status in an array
 function checkPalindromes(array: string[]): boolean[] {
-    let status: boolean[] = [];
-    for (const word of array) {
-        const palindromeStatus = isPalindrome(word, 0, word.length - 1);
-        status.push(palindromeStatus);
-    }
-    return status;
+  const status: boolean[] = [];
+  for (const word of array) {
+    const palindromeStatus = isPalindrome(word, 0, word.length - 1);
+    status.push(palindromeStatus);
+  }
+  return status;
 }
 
 export function palindromeList(
-    splitOperatorType: SplitOperatorType,
-    input: string,
-    separator: string, // the splitting separator will be the joining separator for visual satisfaction
+  splitOperatorType: SplitOperatorType,
+  input: string,
+  separator: string // the splitting separator will be the joining separator for visual satisfaction
 ): string {
-    if (!input) return '';
-    let array: string[];
-    switch (splitOperatorType) {
-        case 'symbol':
-            array = input.split(separator);
-            break;
-        case 'regex':
-            array = input.split(new RegExp(separator));
-            break;
-    }
-    // trim all items to focus on the word and not biasing the result due to spaces (leading and trailing)
-    array = array.map((item) => item.trim());
+  if (!input) return '';
+  let array: string[];
+  switch (splitOperatorType) {
+    case 'symbol':
+      array = input.split(separator);
+      break;
+    case 'regex':
+      array = input.split(new RegExp(separator));
+      break;
+  }
+  // trim all items to focus on the word and not biasing the result due to spaces (leading and trailing)
+  array = array.map((item) => item.trim());
 
-    const statusArray = checkPalindromes(array);
-
-    return statusArray.map(status => status.toString()).join(separator);
+  const statusArray = checkPalindromes(array);
 
+  return statusArray.map((status) => status.toString()).join(separator);
 }
-
diff --git a/src/pages/string/randomize-case/index.tsx b/src/pages/string/randomize-case/index.tsx
index fbb7733..33f6b00 100644
--- a/src/pages/string/randomize-case/index.tsx
+++ b/src/pages/string/randomize-case/index.tsx
@@ -8,4 +8,4 @@ const validationSchema = Yup.object({
 });
 export default function RandomizeCase() {
   return <Box>Lorem ipsum</Box>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/string/randomize-case/meta.ts b/src/pages/string/randomize-case/meta.ts
index be2da07..0c1931a 100644
--- a/src/pages/string/randomize-case/meta.ts
+++ b/src/pages/string/randomize-case/meta.ts
@@ -10,4 +10,4 @@ export const tool = defineTool('string', {
   shortDescription: '',
   keywords: ['randomize', 'case'],
   component: lazy(() => import('./index'))
-});
\ No newline at end of file
+});
diff --git a/src/pages/string/randomize-case/randomize-case.service.test.ts b/src/pages/string/randomize-case/randomize-case.service.test.ts
index 7e44a7a..35b7469 100644
--- a/src/pages/string/randomize-case/randomize-case.service.test.ts
+++ b/src/pages/string/randomize-case/randomize-case.service.test.ts
@@ -2,47 +2,49 @@ import { expect, describe, it } from 'vitest';
 import { randomizeCase } from './service';
 
 describe('randomizeCase', () => {
-    it('should randomize the case of each character in the string', () => {
-        const input = 'hello world';
-        const result = randomizeCase(input);
+  it('should randomize the case of each character in the string', () => {
+    const input = 'hello world';
+    const result = randomizeCase(input);
 
-        // Ensure the output length is the same
-        expect(result).toHaveLength(input.length);
+    // Ensure the output length is the same
+    expect(result).toHaveLength(input.length);
 
-        // Ensure each character in the input string appears in the result
-        for (let i = 0; i < input.length; i++) {
-            const inputChar = input[i];
-            const resultChar = result[i];
+    // Ensure each character in the input string appears in the result
+    for (let i = 0; i < input.length; i++) {
+      const inputChar = input[i];
+      const resultChar = result[i];
 
-            if (/[a-zA-Z]/.test(inputChar)) {
-                expect([inputChar.toLowerCase(), inputChar.toUpperCase()]).toContain(resultChar);
-            } else {
-                expect(inputChar).toBe(resultChar);
-            }
-        }
-    });
+      if (/[a-zA-Z]/.test(inputChar)) {
+        expect([inputChar.toLowerCase(), inputChar.toUpperCase()]).toContain(
+          resultChar
+        );
+      } else {
+        expect(inputChar).toBe(resultChar);
+      }
+    }
+  });
 
-    it('should handle an empty string', () => {
-        const input = '';
-        const result = randomizeCase(input);
-        expect(result).toBe('');
-    });
+  it('should handle an empty string', () => {
+    const input = '';
+    const result = randomizeCase(input);
+    expect(result).toBe('');
+  });
 
-    it('should handle a string with numbers and symbols', () => {
-        const input = '123 hello! @world';
-        const result = randomizeCase(input);
+  it('should handle a string with numbers and symbols', () => {
+    const input = '123 hello! @world';
+    const result = randomizeCase(input);
 
-        // Ensure the output length is the same
-        expect(result).toHaveLength(input.length);
+    // Ensure the output length is the same
+    expect(result).toHaveLength(input.length);
 
-        // Ensure numbers and symbols remain unchanged
-        for (let i = 0; i < input.length; i++) {
-            const inputChar = input[i];
-            const resultChar = result[i];
+    // Ensure numbers and symbols remain unchanged
+    for (let i = 0; i < input.length; i++) {
+      const inputChar = input[i];
+      const resultChar = result[i];
 
-            if (!/[a-zA-Z]/.test(inputChar)) {
-                expect(inputChar).toBe(resultChar);
-            }
-        }
-    });
-});
\ No newline at end of file
+      if (!/[a-zA-Z]/.test(inputChar)) {
+        expect(inputChar).toBe(resultChar);
+      }
+    }
+  });
+});
diff --git a/src/pages/string/randomize-case/service.ts b/src/pages/string/randomize-case/service.ts
index a6f6860..8d50d5f 100644
--- a/src/pages/string/randomize-case/service.ts
+++ b/src/pages/string/randomize-case/service.ts
@@ -1,6 +1,8 @@
 export function randomizeCase(input: string): string {
-    return input
-        .split('')
-        .map(char => (Math.random() < 0.5 ? char.toLowerCase() : char.toUpperCase()))
-        .join('');
-}
\ No newline at end of file
+  return input
+    .split('')
+    .map((char) =>
+      Math.random() < 0.5 ? char.toLowerCase() : char.toUpperCase()
+    )
+    .join('');
+}
diff --git a/src/pages/string/reverse/index.tsx b/src/pages/string/reverse/index.tsx
index e017afe..1e40781 100644
--- a/src/pages/string/reverse/index.tsx
+++ b/src/pages/string/reverse/index.tsx
@@ -8,4 +8,4 @@ const validationSchema = Yup.object({
 });
 export default function Reverse() {
   return <Box>Lorem ipsum</Box>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/string/reverse/meta.ts b/src/pages/string/reverse/meta.ts
index 886b604..724be21 100644
--- a/src/pages/string/reverse/meta.ts
+++ b/src/pages/string/reverse/meta.ts
@@ -10,4 +10,4 @@ export const tool = defineTool('string', {
   shortDescription: '',
   keywords: ['reverse'],
   component: lazy(() => import('./index'))
-});
\ No newline at end of file
+});
diff --git a/src/pages/string/reverse/reverse.service.test.ts b/src/pages/string/reverse/reverse.service.test.ts
index 0e6ed45..c8e8354 100644
--- a/src/pages/string/reverse/reverse.service.test.ts
+++ b/src/pages/string/reverse/reverse.service.test.ts
@@ -2,51 +2,51 @@ import { expect, describe, it } from 'vitest';
 import { stringReverser } from './service';
 
 describe('stringReverser', () => {
-    it('should reverse a single-line string', () => {
-        const input = 'hello world';
-        const result = stringReverser(input, false, false, false);
-        expect(result).toBe('dlrow olleh');
-    });
+  it('should reverse a single-line string', () => {
+    const input = 'hello world';
+    const result = stringReverser(input, false, false, false);
+    expect(result).toBe('dlrow olleh');
+  });
 
-    it('should reverse each line in a multi-line string', () => {
-        const input = 'hello\nworld';
-        const result = stringReverser(input, true, false, false);
-        expect(result).toBe('olleh\ndlrow');
-    });
+  it('should reverse each line in a multi-line string', () => {
+    const input = 'hello\nworld';
+    const result = stringReverser(input, true, false, false);
+    expect(result).toBe('olleh\ndlrow');
+  });
 
-    it('should remove empty items if emptyItems is true', () => {
-        const input = 'hello\n\nworld';
-        const result = stringReverser(input, true, true, false);
-        expect(result).toBe('olleh\ndlrow');
-    });
+  it('should remove empty items if emptyItems is true', () => {
+    const input = 'hello\n\nworld';
+    const result = stringReverser(input, true, true, false);
+    expect(result).toBe('olleh\ndlrow');
+  });
 
-    it('should trim each line if trim is true', () => {
-        const input = '  hello  \n  world  ';
-        const result = stringReverser(input, true, false, true);
-        expect(result).toBe('olleh\ndlrow');
-    });
+  it('should trim each line if trim is true', () => {
+    const input = '  hello  \n  world  ';
+    const result = stringReverser(input, true, false, true);
+    expect(result).toBe('olleh\ndlrow');
+  });
 
-    it('should handle empty input', () => {
-        const input = '';
-        const result = stringReverser(input, false, false, false);
-        expect(result).toBe('');
-    });
+  it('should handle empty input', () => {
+    const input = '';
+    const result = stringReverser(input, false, false, false);
+    expect(result).toBe('');
+  });
 
-    it('should handle a single line with emptyItems and trim', () => {
-        const input = '  hello world  ';
-        const result = stringReverser(input, false, true, true);
-        expect(result).toBe('dlrow olleh');
-    });
+  it('should handle a single line with emptyItems and trim', () => {
+    const input = '  hello world  ';
+    const result = stringReverser(input, false, true, true);
+    expect(result).toBe('dlrow olleh');
+  });
 
-    it('should handle a single line with emptyItems and non trim', () => {
-        const input = '  hello world  ';
-        const result = stringReverser(input, false, true, false);
-        expect(result).toBe('  dlrow olleh  ');
-    });
+  it('should handle a single line with emptyItems and non trim', () => {
+    const input = '  hello world  ';
+    const result = stringReverser(input, false, true, false);
+    expect(result).toBe('  dlrow olleh  ');
+  });
 
-    it('should handle a multi line with emptyItems and non trim', () => {
-        const input = '  hello\n\n\n\nworld  ';
-        const result = stringReverser(input, true, true, false);
-        expect(result).toBe('olleh  \n  dlrow');
-    });
-});
\ No newline at end of file
+  it('should handle a multi line with emptyItems and non trim', () => {
+    const input = '  hello\n\n\n\nworld  ';
+    const result = stringReverser(input, true, true, false);
+    expect(result).toBe('olleh  \n  dlrow');
+  });
+});
diff --git a/src/pages/string/reverse/service.ts b/src/pages/string/reverse/service.ts
index c8c68a6..b76206f 100644
--- a/src/pages/string/reverse/service.ts
+++ b/src/pages/string/reverse/service.ts
@@ -1,31 +1,30 @@
 import { reverseString } from 'utils/string';
 
 export function stringReverser(
-    input: string,
-    multiLine: boolean,
-    emptyItems: boolean,
-    trim: boolean
+  input: string,
+  multiLine: boolean,
+  emptyItems: boolean,
+  trim: boolean
 ) {
-    let array: string[] = [];
-    let result: string[] = [];
+  let array: string[] = [];
+  let result: string[] = [];
 
-    // split the input in multiLine mode
-    if (multiLine) {
-        array = input.split('\n');
-    }
-    else {
-        array.push(input);
-    }
+  // split the input in multiLine mode
+  if (multiLine) {
+    array = input.split('\n');
+  } else {
+    array.push(input);
+  }
 
-    // handle empty items
-    if (emptyItems){
-        array = array.filter(Boolean);
-    }
-    // Handle trim
-    if (trim) {
-        array = array.map(line => line.trim());
-    }
+  // handle empty items
+  if (emptyItems) {
+    array = array.filter(Boolean);
+  }
+  // Handle trim
+  if (trim) {
+    array = array.map((line) => line.trim());
+  }
 
-    result = array.map(element => reverseString(element));
-    return result.join('\n');
-}
\ No newline at end of file
+  result = array.map((element) => reverseString(element));
+  return result.join('\n');
+}
diff --git a/src/pages/string/uppercase/index.tsx b/src/pages/string/uppercase/index.tsx
index 727cc03..c9ee21f 100644
--- a/src/pages/string/uppercase/index.tsx
+++ b/src/pages/string/uppercase/index.tsx
@@ -8,4 +8,4 @@ const validationSchema = Yup.object({
 });
 export default function Uppercase() {
   return <Box>Lorem ipsum</Box>;
-}
\ No newline at end of file
+}
diff --git a/src/pages/string/uppercase/meta.ts b/src/pages/string/uppercase/meta.ts
index 014f2cd..81c5bbf 100644
--- a/src/pages/string/uppercase/meta.ts
+++ b/src/pages/string/uppercase/meta.ts
@@ -10,4 +10,4 @@ export const tool = defineTool('string', {
   shortDescription: '',
   keywords: ['uppercase'],
   component: lazy(() => import('./index'))
-});
\ No newline at end of file
+});
diff --git a/src/pages/string/uppercase/service.ts b/src/pages/string/uppercase/service.ts
index 1ffc0fa..106b6e4 100644
--- a/src/pages/string/uppercase/service.ts
+++ b/src/pages/string/uppercase/service.ts
@@ -1,3 +1,3 @@
 export function UppercaseInput(input: string): string {
-    return input.toUpperCase();
-}
\ No newline at end of file
+  return input.toUpperCase();
+}
diff --git a/src/pages/string/uppercase/uppercase.service.test.ts b/src/pages/string/uppercase/uppercase.service.test.ts
index 6bb3f11..b30c1b2 100644
--- a/src/pages/string/uppercase/uppercase.service.test.ts
+++ b/src/pages/string/uppercase/uppercase.service.test.ts
@@ -2,33 +2,33 @@ import { expect, describe, it } from 'vitest';
 import { UppercaseInput } from './service';
 
 describe('UppercaseInput', () => {
-    it('should convert a lowercase string to uppercase', () => {
-        const input = 'hello';
-        const result = UppercaseInput(input);
-        expect(result).toBe('HELLO');
-    });
+  it('should convert a lowercase string to uppercase', () => {
+    const input = 'hello';
+    const result = UppercaseInput(input);
+    expect(result).toBe('HELLO');
+  });
 
-    it('should convert a mixed case string to uppercase', () => {
-        const input = 'HeLLo WoRLd';
-        const result = UppercaseInput(input);
-        expect(result).toBe('HELLO WORLD');
-    });
+  it('should convert a mixed case string to uppercase', () => {
+    const input = 'HeLLo WoRLd';
+    const result = UppercaseInput(input);
+    expect(result).toBe('HELLO WORLD');
+  });
 
-    it('should convert an already uppercase string to uppercase', () => {
-        const input = 'HELLO';
-        const result = UppercaseInput(input);
-        expect(result).toBe('HELLO');
-    });
+  it('should convert an already uppercase string to uppercase', () => {
+    const input = 'HELLO';
+    const result = UppercaseInput(input);
+    expect(result).toBe('HELLO');
+  });
 
-    it('should handle an empty string', () => {
-        const input = '';
-        const result = UppercaseInput(input);
-        expect(result).toBe('');
-    });
+  it('should handle an empty string', () => {
+    const input = '';
+    const result = UppercaseInput(input);
+    expect(result).toBe('');
+  });
 
-    it('should handle a string with numbers and symbols', () => {
-        const input = '123 hello! @world';
-        const result = UppercaseInput(input);
-        expect(result).toBe('123 HELLO! @WORLD');
-    });
-});
\ No newline at end of file
+  it('should handle a string with numbers and symbols', () => {
+    const input = '123 hello! @world';
+    const result = UppercaseInput(input);
+    expect(result).toBe('123 HELLO! @WORLD');
+  });
+});