From 1577f098e01310ef29a8a52d7a0ae2df3a4a0f43 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Wed, 5 Mar 2025 21:00:26 +0000
Subject: [PATCH] chore: link examples to ui

---
 .idea/workspace.xml                    | 153 ++++++++++++++-----------
 src/pages/tools/list/reverse/index.tsx | 122 +++++++++++---------
 src/pages/tools/number/sum/index.tsx   | 134 ++++++++++++----------
 3 files changed, 231 insertions(+), 178 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index e61652d..e50bab9 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,8 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="style: optimizations">
-      <change beforePath="$PROJECT_DIR$/img.png" beforeDir="false" afterPath="$PROJECT_DIR$/img.png" afterDir="false" />
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="docs: img">
+      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/list/reverse/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/list/reverse/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/pages/tools/number/sum/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools/number/sum/index.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -27,16 +29,37 @@
     <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
     <option name="RESET_MODE" value="HARD" />
   </component>
-  <component name="GitHubPullRequestSearchHistory">{
-  &quot;history&quot;: [
+  <component name="GitHubPullRequestSearchHistory"><![CDATA[{
+  "history": [
     {
-      &quot;assignee&quot;: &quot;iib0011&quot;
+      "assignee": "iib0011"
+    },
+    {
+      "state": "OPEN"
     }
   ],
-  &quot;lastFilter&quot;: {
-    &quot;assignee&quot;: &quot;iib0011&quot;
+  "lastFilter": {
+    "state": "OPEN"
   }
-}</component>
+}]]></component>
+  <component name="GitHubPullRequestState"><![CDATA[{
+  "prStates": [
+    {
+      "id": {
+        "id": "PR_kwDOMJIfts51PkS9",
+        "number": 22
+      },
+      "lastSeen": 1741207144695
+    },
+    {
+      "id": {
+        "id": "PR_kwDOMJIfts6NiNYl",
+        "number": 32
+      },
+      "lastSeen": 1741207323147
+    }
+  ]
+}]]></component>
   <component name="GithubPullRequestsUISettings">{
   &quot;selectedUrlAndAccountId&quot;: {
     &quot;url&quot;: &quot;https://github.com/iib0011/omni-tools.git&quot;,
@@ -61,51 +84,51 @@
     <option name="hideEmptyMiddlePackages" value="true" />
     <option name="showLibraryContents" value="true" />
   </component>
-  <component name="PropertiesComponent">{
-  &quot;keyToString&quot;: {
-    &quot;ASKED_ADD_EXTERNAL_FILES&quot;: &quot;true&quot;,
-    &quot;ASKED_SHARE_PROJECT_CONFIGURATION_FILES&quot;: &quot;true&quot;,
-    &quot;Docker.Dockerfile build.executor&quot;: &quot;Run&quot;,
-    &quot;Docker.Dockerfile.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.JoinText Component.executor&quot;: &quot;Run&quot;,
-    &quot;Playwright.JoinText Component.should merge text pieces with specified join character.executor&quot;: &quot;Run&quot;,
-    &quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
-    &quot;RunOnceActivity.git.unshallow&quot;: &quot;true&quot;,
-    &quot;Vitest.compute function (1).executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.compute function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.newlines option.executor&quot;: &quot;Run&quot;,
-    &quot;Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor&quot;: &quot;Run&quot;,
-    &quot;git-widget-placeholder&quot;: &quot;main&quot;,
-    &quot;ignore.virus.scanning.warn.message&quot;: &quot;true&quot;,
-    &quot;kotlin-language-version-configured&quot;: &quot;true&quot;,
-    &quot;last_opened_file_path&quot;: &quot;C:/Users/Ibrahima/IdeaProjects/omni-tools/public/assets&quot;,
-    &quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
-    &quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
-    &quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
-    &quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
-    &quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
-    &quot;npm.build.executor&quot;: &quot;Run&quot;,
-    &quot;npm.dev.executor&quot;: &quot;Run&quot;,
-    &quot;npm.lint.executor&quot;: &quot;Run&quot;,
-    &quot;npm.prebuild.executor&quot;: &quot;Run&quot;,
-    &quot;npm.script:create:tool.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test:e2e.executor&quot;: &quot;Run&quot;,
-    &quot;npm.test:e2e:run.executor&quot;: &quot;Run&quot;,
-    &quot;prettierjs.PrettierConfiguration.Package&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier&quot;,
-    &quot;project.structure.last.edited&quot;: &quot;Problems&quot;,
-    &quot;project.structure.proportion&quot;: &quot;0.0&quot;,
-    &quot;project.structure.side.proportion&quot;: &quot;0.2&quot;,
-    &quot;settings.editor.selected.configurable&quot;: &quot;settings.typescriptcompiler&quot;,
-    &quot;ts.external.directory.path&quot;: &quot;C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib&quot;,
-    &quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
+  <component name="PropertiesComponent"><![CDATA[{
+  "keyToString": {
+    "ASKED_ADD_EXTERNAL_FILES": "true",
+    "ASKED_SHARE_PROJECT_CONFIGURATION_FILES": "true",
+    "Docker.Dockerfile build.executor": "Run",
+    "Docker.Dockerfile.executor": "Run",
+    "Playwright.JoinText Component.executor": "Run",
+    "Playwright.JoinText Component.should merge text pieces with specified join character.executor": "Run",
+    "RunOnceActivity.OpenProjectViewOnStart": "true",
+    "RunOnceActivity.ShowReadmeOnStart": "true",
+    "RunOnceActivity.git.unshallow": "true",
+    "Vitest.compute function (1).executor": "Run",
+    "Vitest.compute function.executor": "Run",
+    "Vitest.mergeText.executor": "Run",
+    "Vitest.mergeText.should merge lines and preserve blank lines when deleteBlankLines is false.executor": "Run",
+    "Vitest.mergeText.should merge lines, preserve blank lines and trailing spaces when both deleteBlankLines and deleteTrailingSpaces are false.executor": "Run",
+    "Vitest.removeDuplicateLines function.executor": "Run",
+    "Vitest.removeDuplicateLines function.newlines option.executor": "Run",
+    "Vitest.removeDuplicateLines function.newlines option.should filter newlines when newlines is set to filter.executor": "Run",
+    "git-widget-placeholder": "#32 on chesterkxng",
+    "ignore.virus.scanning.warn.message": "true",
+    "kotlin-language-version-configured": "true",
+    "last_opened_file_path": "C:/Users/Ibrahima/IdeaProjects/omni-tools/public/assets",
+    "node.js.detected.package.eslint": "true",
+    "node.js.detected.package.tslint": "true",
+    "node.js.selected.package.eslint": "(autodetect)",
+    "node.js.selected.package.tslint": "(autodetect)",
+    "nodejs_package_manager_path": "npm",
+    "npm.build.executor": "Run",
+    "npm.dev.executor": "Run",
+    "npm.lint.executor": "Run",
+    "npm.prebuild.executor": "Run",
+    "npm.script:create:tool.executor": "Run",
+    "npm.test.executor": "Run",
+    "npm.test:e2e.executor": "Run",
+    "npm.test:e2e:run.executor": "Run",
+    "prettierjs.PrettierConfiguration.Package": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\prettier",
+    "project.structure.last.edited": "Problems",
+    "project.structure.proportion": "0.0",
+    "project.structure.side.proportion": "0.2",
+    "settings.editor.selected.configurable": "settings.typescriptcompiler",
+    "ts.external.directory.path": "C:\\Users\\Ibrahima\\IdeaProjects\\omni-tools\\node_modules\\typescript\\lib",
+    "vue.rearranger.settings.migration": "true"
   }
-}</component>
+}]]></component>
   <component name="ReactDesignerToolWindowState">
     <option name="myId2Visible">
       <map>
@@ -289,15 +312,9 @@
       <workItem from="1740788856134" duration="659000" />
       <workItem from="1740880919391" duration="4395000" />
       <workItem from="1740923024259" duration="23000" />
-      <workItem from="1740933006573" duration="3679000" />
-    </task>
-    <task id="LOCAL-00092" summary="feat: find unique ui">
-      <option name="closed" value="true" />
-      <created>1720565760853</created>
-      <option name="number" value="00092" />
-      <option name="presentableId" value="LOCAL-00092" />
-      <option name="project" value="LOCAL" />
-      <updated>1720565760853</updated>
+      <workItem from="1740933006573" duration="4417000" />
+      <workItem from="1741107957446" duration="1943000" />
+      <workItem from="1741207101329" duration="1257000" />
     </task>
     <task id="LOCAL-00093" summary="feat: group list ui">
       <option name="closed" value="true" />
@@ -683,7 +700,15 @@
       <option name="project" value="LOCAL" />
       <updated>1740936527951</updated>
     </task>
-    <option name="localTasksCounter" value="141" />
+    <task id="LOCAL-00141" summary="docs: img">
+      <option name="closed" value="true" />
+      <created>1740936812936</created>
+      <option name="number" value="00141" />
+      <option name="presentableId" value="LOCAL-00141" />
+      <option name="project" value="LOCAL" />
+      <updated>1740936812936</updated>
+    </task>
+    <option name="localTasksCounter" value="142" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -750,7 +775,6 @@
     <MESSAGE value="chore: style buttons" />
     <MESSAGE value="chore: style" />
     <MESSAGE value="style: background svg" />
-    <MESSAGE value="docs: img" />
     <MESSAGE value="fix: bg" />
     <MESSAGE value="chore: handle enter press on search" />
     <MESSAGE value="chore: show tooloptions in example" />
@@ -767,7 +791,8 @@
     <MESSAGE value="feat: remove duplicate lines" />
     <MESSAGE value="fix: tsc" />
     <MESSAGE value="style: optimizations" />
-    <option name="LAST_COMMIT_MESSAGE" value="style: optimizations" />
+    <MESSAGE value="docs: img" />
+    <option name="LAST_COMMIT_MESSAGE" value="docs: img" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/pages/tools/list/reverse/index.tsx b/src/pages/tools/list/reverse/index.tsx
index 2b50349..dce6d0e 100644
--- a/src/pages/tools/list/reverse/index.tsx
+++ b/src/pages/tools/list/reverse/index.tsx
@@ -1,14 +1,19 @@
 import { Box } from '@mui/material';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
+import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
 import { reverseList, SplitOperatorType } from './service';
 import ToolInputAndResult from '@components/ToolInputAndResult';
 import SimpleRadio from '@components/options/SimpleRadio';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
-import { CardExampleType } from '@components/examples/ToolExamples';
+import ToolExamples, {
+  CardExampleType
+} from '@components/examples/ToolExamples';
 import ToolInfo from '@components/ToolInfo';
+import { FormikProps } from 'formik';
+import Separator from '@components/Separator';
+import { ToolComponentProps } from '@tools/defineTool';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
@@ -37,12 +42,12 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
   {
     title: 'Reverse a List of Digits',
     description:
-      "In this example, we load a list of digits in the input. The digits are separated by a mix of dot, comma, and semicolon characters, so we use the regular expression split mode and enter a regular expression that matches all these characters as the input item separator. In the output, we get a reversed list of digits that all use the semicolon as a separator.",
+      'In this example, we load a list of digits in the input. The digits are separated by a mix of dot, comma, and semicolon characters, so we use the regular expression split mode and enter a regular expression that matches all these characters as the input item separator. In the output, we get a reversed list of digits that all use the semicolon as a separator.',
     sampleText: `2, 9, 6; 3; 7. 4. 4. 2, 1; 4, 8. 4; 4. 8, 2, 5; 1; 7; 7. 0`,
     sampleResult: `0; 7; 7; 1; 5; 2; 8; 4; 4; 8; 4; 1; 2; 4; 4; 7; 3; 6; 9; 2`,
     sampleOptions: {
       splitOperatorType: 'regex',
-      splitSeparator: '/[;,.]\\s*/',
+      splitSeparator: '[;,.]\\s*',
       joinSeparator: '; '
     }
   },
@@ -110,9 +115,56 @@ argument`,
   }
 ];
 
-export default function Reverse() {
+export default function Reverse({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
+  const formRef = useRef<FormikProps<typeof initialValues>>(null);
+
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Splitter Mode',
+      component: (
+        <Box>
+          {splitOperators.map(({ title, description, type }) => (
+            <SimpleRadio
+              key={type}
+              onClick={() => updateField('splitOperatorType', type)}
+              title={title}
+              description={description}
+              checked={values.splitOperatorType === type}
+            />
+          ))}
+        </Box>
+      )
+    },
+    {
+      title: 'Item Separator',
+      component: (
+        <Box>
+          <TextFieldWithDesc
+            description={'Set a delimiting symbol or regular expression.'}
+            value={values.splitSeparator}
+            onOwnChange={(val) => updateField('splitSeparator', val)}
+          />
+        </Box>
+      )
+    },
+    {
+      title: 'Output List Options',
+      component: (
+        <Box>
+          <TextFieldWithDesc
+            description={'Output list item separator.'}
+            value={values.joinSeparator}
+            onOwnChange={(val) => updateField('joinSeparator', val)}
+          />
+        </Box>
+      )
+    }
+  ];
   const compute = (optionsValues: typeof initialValues, input: any) => {
     const { splitOperatorType, splitSeparator, joinSeparator } = optionsValues;
 
@@ -134,56 +186,24 @@ export default function Reverse() {
         result={<ToolTextResult title={'Reversed list'} value={result} />}
       />
       <ToolOptions
+        formRef={formRef}
         compute={compute}
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Splitter Mode',
-            component: (
-              <Box>
-                {splitOperators.map(({ title, description, type }) => (
-                  <SimpleRadio
-                    key={type}
-                    onClick={() => updateField('splitOperatorType', type)}
-                    title={title}
-                    description={description}
-                    checked={values.splitOperatorType === type}
-                  />
-                ))}
-              </Box>
-            )
-          },
-          {
-            title: 'Item Separator',
-            component: (
-              <Box>
-                <TextFieldWithDesc
-                  description={'Set a delimiting symbol or regular expression.'}
-                  value={values.splitSeparator}
-                  onOwnChange={(val) => updateField('splitSeparator', val)}
-                />
-              </Box>
-            )
-          },
-          {
-            title: 'Output List Options',
-            component: (
-              <Box>
-                <TextFieldWithDesc
-                  description={'Output list item separator.'}
-                  value={values.joinSeparator}
-                  onOwnChange={(val) => updateField('joinSeparator', val)}
-                />
-              </Box>
-            )
-          }
-        ]}
+        getGroups={getGroups}
         initialValues={initialValues}
         input={input}
       />
       <ToolInfo
-              title="What Is a List Reverser?"
-              description="With this utility, you can reverse the order of items in a list. The utility first splits the input list into individual items and then iterates through them from the last item to the first item, printing each item to the output during the iteration. The input list may contain anything that can be represented as textual data, which includes digits, numbers, strings, words, sentences, etc. The input item separator can also be a regular expression. For example, the regex /[;,]/ will allow you to use items that are either comma- or semicolon-separated. The input and output list items delimiters can be customized in the options. By default, both input and output lists are comma-separated. Listabulous!"
-        />
+        title="What Is a List Reverser?"
+        description="With this utility, you can reverse the order of items in a list. The utility first splits the input list into individual items and then iterates through them from the last item to the first item, printing each item to the output during the iteration. The input list may contain anything that can be represented as textual data, which includes digits, numbers, strings, words, sentences, etc. The input item separator can also be a regular expression. For example, the regex /[;,]/ will allow you to use items that are either comma- or semicolon-separated. The input and output list items delimiters can be customized in the options. By default, both input and output lists are comma-separated. Listabulous!"
+      />
+      <Separator backgroundColor="#5581b5" margin="50px" />
+      <ToolExamples
+        title={title}
+        exampleCards={exampleCards}
+        getGroups={getGroups}
+        formRef={formRef}
+        setInput={setInput}
+      />
     </Box>
   );
 }
diff --git a/src/pages/tools/number/sum/index.tsx b/src/pages/tools/number/sum/index.tsx
index bc2ccdf..3c2b3e8 100644
--- a/src/pages/tools/number/sum/index.tsx
+++ b/src/pages/tools/number/sum/index.tsx
@@ -1,15 +1,20 @@
 import { Box } from '@mui/material';
-import React, { useState } from 'react';
+import React, { useRef, useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions from '@components/options/ToolOptions';
+import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
 import { compute, NumberExtractionType } from './service';
 import RadioWithTextField from '@components/options/RadioWithTextField';
 import SimpleRadio from '@components/options/SimpleRadio';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
 import ToolInputAndResult from '@components/ToolInputAndResult';
-import { CardExampleType } from '@components/examples/ToolExamples';
+import ToolExamples, {
+  CardExampleType
+} from '@components/examples/ToolExamples';
 import ToolInfo from '@components/ToolInfo';
+import Separator from '@components/Separator';
+import { ToolComponentProps } from '@tools/defineTool';
+import { FormikProps } from 'formik';
 
 const initialValues = {
   extractionType: 'smart' as NumberExtractionType,
@@ -44,7 +49,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
   {
     title: 'Sum of Ten Positive Numbers',
     description:
-      "In this example, we calculate the sum of ten positive integers. These integers are listed as a column and their total sum equals 19494.",
+      'In this example, we calculate the sum of ten positive integers. These integers are listed as a column and their total sum equals 19494.',
     sampleText: `0
 1
 20
@@ -118,11 +123,57 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
   }
 ];
 
-
-export default function SplitText() {
+export default function SumNumbers({ title }: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
+  const formRef = useRef<FormikProps<typeof initialValues>>(null);
 
+  const getGroups: GetGroupsType<InitialValuesType> = ({
+    values,
+    updateField
+  }) => [
+    {
+      title: 'Number extraction',
+      component: extractionTypes.map(
+        ({ title, description, type, withTextField, textValueAccessor }) =>
+          withTextField ? (
+            <RadioWithTextField
+              key={type}
+              checked={type === values.extractionType}
+              title={title}
+              fieldName={'extractionType'}
+              description={description}
+              value={
+                textValueAccessor ? values[textValueAccessor].toString() : ''
+              }
+              onRadioClick={() => updateField('extractionType', type)}
+              onTextChange={(val) =>
+                textValueAccessor ? updateField(textValueAccessor, val) : null
+              }
+            />
+          ) : (
+            <SimpleRadio
+              key={title}
+              onClick={() => updateField('extractionType', type)}
+              checked={values.extractionType === type}
+              description={description}
+              title={title}
+            />
+          )
+      )
+    },
+    {
+      title: 'Running Sum',
+      component: (
+        <CheckboxWithDesc
+          title={'Print Running Sum'}
+          description={"Display the sum as it's calculated step by step."}
+          checked={values.printRunningSum}
+          onChange={(value) => updateField('printRunningSum', value)}
+        />
+      )
+    }
+  ];
   return (
     <Box>
       <ToolInputAndResult
@@ -130,59 +181,8 @@ export default function SplitText() {
         result={<ToolTextResult title={'Total'} value={result} />}
       />
       <ToolOptions
-        getGroups={({ values, updateField }) => [
-          {
-            title: 'Number extraction',
-            component: extractionTypes.map(
-              ({
-                title,
-                description,
-                type,
-                withTextField,
-                textValueAccessor
-              }) =>
-                withTextField ? (
-                  <RadioWithTextField
-                    key={type}
-                    checked={type === values.extractionType}
-                    title={title}
-                    fieldName={'extractionType'}
-                    description={description}
-                    value={
-                      textValueAccessor
-                        ? values[textValueAccessor].toString()
-                        : ''
-                    }
-                    onRadioClick={() => updateField('extractionType', type)}
-                    onTextChange={(val) =>
-                      textValueAccessor
-                        ? updateField(textValueAccessor, val)
-                        : null
-                    }
-                  />
-                ) : (
-                  <SimpleRadio
-                    key={title}
-                    onClick={() => updateField('extractionType', type)}
-                    checked={values.extractionType === type}
-                    description={description}
-                    title={title}
-                  />
-                )
-            )
-          },
-          {
-            title: 'Running Sum',
-            component: (
-              <CheckboxWithDesc
-                title={'Print Running Sum'}
-                description={"Display the sum as it's calculated step by step."}
-                checked={values.printRunningSum}
-                onChange={(value) => updateField('printRunningSum', value)}
-              />
-            )
-          }
-        ]}
+        formRef={formRef}
+        getGroups={getGroups}
         compute={(optionsValues, input) => {
           const { extractionType, printRunningSum, separator } = optionsValues;
           setResult(compute(input, extractionType, printRunningSum, separator));
@@ -190,10 +190,18 @@ export default function SplitText() {
         initialValues={initialValues}
         input={input}
       />
-        <ToolInfo
-            title="What Is a Number Sum Calculator?"
-            description="This is an online browser-based utility for calculating the sum of a bunch of numbers. You can enter the numbers separated by a comma, space, or any other character, including the line break. You can also simply paste a fragment of textual data that contains numerical values that you want to sum up and the utility will extract them and find their sum."
-          />
+      <ToolInfo
+        title="What Is a Number Sum Calculator?"
+        description="This is an online browser-based utility for calculating the sum of a bunch of numbers. You can enter the numbers separated by a comma, space, or any other character, including the line break. You can also simply paste a fragment of textual data that contains numerical values that you want to sum up and the utility will extract them and find their sum."
+      />
+      <Separator backgroundColor="#5581b5" margin="50px" />
+      <ToolExamples
+        title={title}
+        exampleCards={exampleCards}
+        getGroups={getGroups}
+        formRef={formRef}
+        setInput={setInput}
+      />
     </Box>
   );
 }