marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-12-10 22:04:02 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #32 from iib0011/chesterkxng

Browse Source 
Chesterkxng
This commit is contained in:
Ibrahima G. Coulibaly
2025-03-05 21:39:44 +00:00
committed by GitHub
parent 0e864b9d1d 1577f098e0
commit 83082bd358
4 changed files with 390 additions and 167 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
.idea/workspace.xml generated
View File

@@ -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 />

156
src/pages/tools/list/reverse/index.tsx
View File

@@ -1,18 +1,26 @@
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 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,
splitSeparator: ',',
joinSeparator: '\\n'
};
type InitialValuesType = typeof initialValues;
const splitOperators: {
title: string;
description: string;
@@ -30,32 +38,92 @@ const splitOperators: {
}
];
export default function Reverse() {
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.',
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*',
joinSeparator: '; '
}
},
{
title: 'Reverse a Column of Words',
description:
'This example reverses a column of twenty three-syllable nouns and prints all the words from the bottom to top. To separate the list items, it uses the \n character as input item separator, which means that each item is on its own line..',
sampleText: `argument
pollution
emphasis
vehicle
family
property
preference
studio
suggestion
accident
analyst
permission
reaction
promotion
quantity
inspection
chemistry
conclusion
confusion
memory`,
sampleResult: `memory
confusion
conclusion
chemistry
inspection
quantity
promotion
reaction
permission
analyst
accident
suggestion
studio
preference
property
family
vehicle
emphasis
pollution
argument`,
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: '\\n',
joinSeparator: '\\n'
}
},
{
title: 'Reverse a Random List',
description:
'In this example, the list elements are random cities, zip codes, and weather conditions. To reverse list elements, we first need to identify them and separate them apart. The input list incorrectly uses the dash symbol to separate the elements but the output list fixes this and uses commas.',
sampleText: `Hamburg-21334-Dhaka-Sunny-Managua-Rainy-Chongqing-95123-Oakland`,
sampleResult: `Oakland, 95123, Chongqing, Rainy, Managua, Sunny, Dhaka, 21334, Hamburg`,
sampleOptions: {
splitOperatorType: 'symbol',
splitSeparator: '-',
joinSeparator: ', '
}
}
];
export default function Reverse({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: typeof initialValues, input: any) => {
const { splitOperatorType, splitSeparator, joinSeparator } = optionsValues;
const formRef = useRef<FormikProps<typeof initialValues>>(null);
setResult(
reverseList(splitOperatorType, splitSeparator, joinSeparator, input)
);
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
}
result={<ToolTextResult title={'Reversed list'} value={result} />}
/>
<ToolOptions
compute={compute}
getGroups={({ values, updateField }) => [
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Splitter Mode',
component: (
@@ -96,10 +164,46 @@ export default function Reverse() {
</Box>
)
}
]}
];
const compute = (optionsValues: typeof initialValues, input: any) => {
const { splitOperatorType, splitSeparator, joinSeparator } = optionsValues;
setResult(
reverseList(splitOperatorType, splitSeparator, joinSeparator, input)
);
};
return (
<Box>
<ToolInputAndResult
input={
<ToolTextInput
title={'Input list'}
value={input}
onChange={setInput}
/>
}
result={<ToolTextResult title={'Reversed list'} value={result} />}
/>
<ToolOptions
formRef={formRef}
compute={compute}
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!"
/>
<Separator backgroundColor="#5581b5" margin="50px" />
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
);
}

4
src/pages/tools/list/reverse/meta.ts
View File

@@ -6,8 +6,8 @@ export const tool = defineTool('list', {
name: 'Reverse',
path: 'reverse',
icon: 'proicons:reverse',
description: '',
shortDescription: '',
description: 'This is a super simple browser-based application prints all list items in reverse. The input items can be separated by any symbol and you can also change the separator of the reversed list items.',
shortDescription: 'Quickly reverse a list',
keywords: ['reverse'],
component: lazy(() => import('./index'))
});

144
src/pages/tools/number/sum/index.tsx
View File

@@ -1,19 +1,27 @@
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 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,
separator: '\\n',
printRunningSum: false
};
type InitialValuesType = typeof initialValues;
const extractionTypes: {
title: string;
description: string;
@@ -37,28 +45,97 @@ const extractionTypes: {
}
];
export default function SplitText() {
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.',
sampleText: `0
1
20
33
400
505
660
777
8008
9090`,
sampleResult: `19494`,
sampleOptions: {
extractionType: 'delimiter',
separator: '\\n',
printRunningSum: false
}
},
{
title: 'Count Trees in the Park',
description:
'This example reverses a column of twenty three-syllable nouns and prints all the words from the bottom to top. To separate the list items, it uses the \n character as input item separator, which means that each item is on its own line..',
sampleText: `This year gardeners have planted 20 red maples, 35 sweetgum, 13 quaking aspen, and 7 white oaks in the central park of the city.`,
sampleResult: `75`,
sampleOptions: {
extractionType: 'smart',
separator: '\\n',
printRunningSum: false
}
},
{
title: 'Sum of Integers and Decimals',
description:
'In this example, we add together ninety different values – positive numbers, negative numbers, integers and decimal fractions. We set the input separator to a comma and after adding all of them together, we get 0 as output.',
sampleText: `1, 2, 3, 4, 5, 6, 7, 8, 9, -1.1, -2.1, -3.1, -4.1, -5.1, -6.1, -7.1, -8.1, -9.1, 10, 20, 30, 40, 50, 60, 70, 80, 90, -10.2, -20.2, -30.2, -40.2, -50.2, -60.2, -70.2, -80.2, -90.2, 100, 200, 300, 400, 500, 600, 700, 800, 900, -100.3, -200.3, -300.3, -400.3, -500.3, -600.3, -700.3, -800.3, -900.3, 1000, 2000, 3000, 4000, 5000, 6000, 7000, 8000, 9000, -1000.4, -2000.4, -3000.4, -4000.4, -5000.4, -6000.4, -7000.4, -8000.4, -9000.4, 10001, 20001, 30001, 40001, 50001, 60001, 70001, 80001, 90001, -10000, -20000, -30000, -40000, -50000, -60000, -70000, -80000, -90000`,
sampleResult: `0`,
sampleOptions: {
extractionType: 'delimiter',
separator: ', ',
printRunningSum: false
}
},
{
title: 'Running Sum of Numbers',
description:
'In this example, we calculate the sum of all ten digits and enable the option "Print Running Sum". We get the intermediate values of the sum in the process of addition. Thus, we have the following sequence in the output: 0, 1 (0 + 1), 3 (0 + 1 + 2), 6 (0 + 1 + 2 + 3), 10 (0 + 1 + 2 + 3 + 4), and so on.',
sampleText: `0
1
2
3
4
5
6
7
8
9`,
sampleResult: `0
1
3
6
10
15
21
28
36
45`,
sampleOptions: {
extractionType: 'delimiter',
separator: '\\n',
printRunningSum: true
}
}
];
export default function SumNumbers({ title }: ToolComponentProps) {
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const formRef = useRef<FormikProps<typeof initialValues>>(null);
return (
<Box>
<ToolInputAndResult
input={<ToolTextInput value={input} onChange={setInput} />}
result={<ToolTextResult title={'Total'} value={result} />}
/>
<ToolOptions
getGroups={({ values, updateField }) => [
const getGroups: GetGroupsType<InitialValuesType> = ({
values,
updateField
}) => [
{
title: 'Number extraction',
component: extractionTypes.map(
({
title,
description,
type,
withTextField,
textValueAccessor
}) =>
({ title, description, type, withTextField, textValueAccessor }) =>
withTextField ? (
<RadioWithTextField
key={type}
@@ -67,15 +144,11 @@ export default function SplitText() {
fieldName={'extractionType'}
description={description}
value={
textValueAccessor
? values[textValueAccessor].toString()
: ''
textValueAccessor ? values[textValueAccessor].toString() : ''
}
onRadioClick={() => updateField('extractionType', type)}
onTextChange={(val) =>
textValueAccessor
? updateField(textValueAccessor, val)
: null
textValueAccessor ? updateField(textValueAccessor, val) : null
}
/>
) : (
@@ -100,7 +173,16 @@ export default function SplitText() {
/>
)
}
]}
];
return (
<Box>
<ToolInputAndResult
input={<ToolTextInput value={input} onChange={setInput} />}
result={<ToolTextResult title={'Total'} value={result} />}
/>
<ToolOptions
formRef={formRef}
getGroups={getGroups}
compute={(optionsValues, input) => {
const { extractionType, printRunningSum, separator } = optionsValues;
setResult(compute(input, extractionType, printRunningSum, separator));
@@ -108,6 +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."
/>
<Separator backgroundColor="#5581b5" margin="50px" />
<ToolExamples
title={title}
exampleCards={exampleCards}
getGroups={getGroups}
formRef={formRef}
setInput={setInput}
/>
</Box>
);
}