feat: add internationalization support

This commit is contained in:
AshAnand34
2025-07-12 23:02:35 -07:00
parent 3b702b260c
commit f22bb8bd57
149 changed files with 2807 additions and 1045 deletions

View File

@@ -9,6 +9,7 @@ import { GetGroupsType } from '@components/options/ToolOptions';
import { Box } from '@mui/material';
import SimpleRadio from '@components/options/SimpleRadio';
import { InitialValuesType } from './types';
import { useTranslation } from 'react-i18next';
const initialValues: InitialValuesType = {
mode: 'encode'
@@ -33,6 +34,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
];
export default function Base64({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -45,18 +47,18 @@ export default function Base64({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Base64 Options',
title: t('string.base64.optionsTitle'),
component: (
<Box>
<SimpleRadio
onClick={() => updateField('mode', 'encode')}
checked={values.mode === 'encode'}
title={'Base64 Encode'}
title={t('string.base64.encode')}
/>
<SimpleRadio
onClick={() => updateField('mode', 'decode')}
checked={values.mode === 'decode'}
title={'Base64 Decode'}
title={t('string.base64.decode')}
/>
</Box>
)
@@ -67,15 +69,20 @@ export default function Base64({ title }: ToolComponentProps) {
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input Data" value={input} onChange={setInput} />
<ToolTextInput
title={t('string.base64.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={t('string.base64.resultTitle')} value={result} />
}
resultComponent={<ToolTextResult title="Result" value={result} />}
initialValues={initialValues}
getGroups={getGroups}
toolInfo={{
title: 'What is Base64?',
description:
'Base64 is an encoding scheme that represents data in an ASCII string format by translating it into a radix-64 representation. Although it can be used to encode strings, it is commonly used to encode binary data for transmission over media that are designed to deal with textual data.'
title: t('string.base64.toolInfo.title'),
description: t('string.base64.toolInfo.description')
}}
exampleCards={exampleCards}
input={input}

View File

@@ -9,5 +9,10 @@ export const tool = defineTool('string', {
'A simple tool to encode or decode data using Base64, which is commonly used in web applications.',
shortDescription: 'Encode or decode data using Base64.',
keywords: ['base64'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.base64.name',
description: 'string.base64.description',
shortDescription: 'string.base64.shortDescription'
}
});

View File

@@ -12,5 +12,11 @@ export const tool = defineTool('string', {
longDescription:
'With this online tool, you can censor certain words in any text. You can specify a list of unwanted words (such as swear words or secret words) and the program will replace them with alternative words and create a safe-to-read text. The words can be specified in a multi-line text field in the options by entering one word per line.',
keywords: ['text', 'censor', 'words', 'characters'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.censor.name',
description: 'string.censor.description',
shortDescription: 'string.censor.shortDescription',
longDescription: 'string.censor.longDescription'
}
});

View File

@@ -12,5 +12,10 @@ export const tool = defineTool('string', {
longDescription:
'This tool creates a palindrome from the given string. It does it by generating a copy of the string, reversing it, and appending it at the end of the original string. This method creates a palindrome with the last character duplicated twice. There is also another way to do it, which deletes the first letter of the reversed copy. In this case, when the string and the copy are joined together, you also get a palindrome but without the repeating last character. You can compare the two types of palindromes by switching between them in the options. You can also enable the multi-line mode that will create palindromes of every string on every line. Stringabulous!',
keywords: ['create', 'palindrome'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.createPalindrome.name',
description: 'string.createPalindrome.description',
shortDescription: 'string.createPalindrome.shortDescription'
}
});

View File

@@ -7,8 +7,13 @@ export const tool = defineTool('string', {
path: 'extract-substring',
icon: 'material-symbols-light:content-cut',
description:
"World's simplest browser-based utility for extracting substrings from text. Easily extract specific portions of text by specifying start position and length. Perfect for parsing data, isolating specific parts of text, or data extraction tasks. Supports multi-line text processing and character-level precision.",
shortDescription: 'Extract specific portions of text by position and length',
"World's simplest browser-based utility for extracting substrings from text. Input your text and specify start and end positions to extract the desired portion. Perfect for data processing, text analysis, or extracting specific content from larger text blocks.",
shortDescription: 'Extract a portion of text between specified positions',
keywords: ['extract', 'substring'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.extractSubstring.name',
description: 'string.extractSubstring.description',
shortDescription: 'string.extractSubstring.shortDescription'
}
});

View File

@@ -0,0 +1,196 @@
{
"uppercase": {
"title": "Convert to Uppercase",
"description": "Convert text to uppercase letters.",
"inputTitle": "Input text",
"resultTitle": "Uppercase text"
},
"reverse": {
"title": "Reverse Text",
"description": "Reverse the order of characters in text.",
"inputTitle": "Input text",
"resultTitle": "Reversed text",
"processMultiLine": "Process as multi-line text (reverse each line separately)",
"skipEmptyLines": "Skip empty lines",
"trimWhitespace": "Trim whitespace from lines"
},
"base64": {
"title": "Base64 Encoder/Decoder",
"description": "Encode or decode text using Base64 encoding.",
"inputTitle": "Input Data",
"resultTitle": "Result",
"optionsTitle": "Base64 Options",
"encode": "Base64 Encode",
"decode": "Base64 Decode",
"toolInfo": {
"title": "What is Base64?",
"description": "Base64 is an encoding scheme that represents data in an ASCII string format by translating it into a radix-64 representation. Although it can be used to encode strings, it is commonly used to encode binary data for transmission over media that are designed to deal with textual data."
}
},
"truncate": {
"title": "Truncate Text",
"description": "Shorten text to a specified length.",
"inputTitle": "Input text",
"resultTitle": "Truncated text",
"truncationSide": "Truncation Side",
"rightSideTruncation": "Right-side Truncation",
"rightSideDescription": "Remove characters from the end of the text.",
"leftSideTruncation": "Left-side Truncation",
"leftSideDescription": "Remove characters from the start of the text.",
"lengthAndLines": "Length and Lines",
"maxLengthDescription": "Number of characters to leave in the text.",
"numberPlaceholder": "Number",
"lineByLineTruncating": "Line-by-line Truncating",
"lineByLineDescription": "Truncate each line separately.",
"suffixAndAffix": "Suffix and Affix",
"addTruncationIndicator": "Add Truncation Indicator",
"indicatorDescription": "Characters to add at the end (or start) of the text. Note: They count towards the length.",
"charactersPlaceholder": "Characters",
"toolInfo": {
"title": "Truncate text",
"description": "Load your text in the input form on the left and you will automatically get truncated text on the right."
}
},
"quote": {
"title": "Text Quoter",
"description": "Add quotes around text with customizable options.",
"inputTitle": "Input Text",
"resultTitle": "Quoted Text",
"quoteOptions": "Quote Options",
"leftQuoteDescription": "Left quote character(s)",
"rightQuoteDescription": "Right quote character(s)",
"allowDoubleQuotation": "Allow double quotation",
"quoteEmptyLines": "Quote empty lines",
"processAsMultiLine": "Process as multi-line text",
"toolInfo": {
"title": "Text Quoter",
"description": "This tool allows you to add quotes around text. You can choose different quote characters, handle multi-line text, and control how empty lines are processed. It's useful for preparing text for programming, formatting data, or creating stylized text."
}
},
"split": {
"title": "Split Text",
"description": "Split text into parts based on various criteria.",
"resultTitle": "Text pieces",
"splitSeparatorOptions": "Split separator options",
"symbolTitle": "Use a Symbol for Splitting",
"symbolDescription": "Character that will be used to break text into parts. (Space by default.)",
"regexTitle": "Use a Regex for Splitting",
"regexDescription": "Regular expression that will be used to break text into parts. (Multiple spaces by default.)",
"lengthTitle": "Use Length for Splitting",
"lengthDescription": "Number of symbols that will be put in each output chunk.",
"chunksTitle": "Use a Number of Chunks",
"chunksDescription": "Number of chunks of equal length in the output.",
"outputSeparatorOptions": "Output separator options",
"outputSeparatorDescription": "Character that will be put between the split chunks. (It's newline \"\\n\" by default.)",
"charBeforeChunkDescription": "Character before each chunk",
"charAfterChunkDescription": "Character after each chunk"
},
"join": {
"title": "Join Text",
"description": "Join text pieces together with customizable separators.",
"inputTitle": "Text Pieces",
"resultTitle": "Joined Text",
"textMergedOptions": "Text Merged Options",
"joinCharacterPlaceholder": "Join Character",
"joinCharacterDescription": "Symbol that connects broken pieces of text. (Space by default.)",
"blankLinesAndTrailingSpaces": "Blank Lines and Trailing Spaces",
"deleteBlankTitle": "Delete Blank Lines",
"deleteBlankDescription": "Delete lines that don't have text symbols.",
"deleteTrailingTitle": "Delete Trailing Spaces",
"deleteTrailingDescription": "Remove spaces and tabs at the end of the lines.",
"toolInfo": {
"title": "What Is a Text Joiner?",
"description": "With this tool you can join parts of the text together. It takes a list of text values, separated by newlines, and merges them together. You can set the character that will be placed between the parts of the combined text. Also, you can ignore all empty lines and remove spaces and tabs at the end of all lines. Textabulous!"
}
},
"rotate": {
"title": "Rotate Text",
"description": "Rotate characters in text by specified positions.",
"inputTitle": "Input Text",
"resultTitle": "Rotated Text",
"rotationOptions": "Rotation Options",
"stepDescription": "Number of positions to rotate",
"rotateRight": "Rotate Right",
"rotateLeft": "Rotate Left",
"processAsMultiLine": "Process as multi-line text (rotate each line separately)",
"toolInfo": {
"title": "String Rotation",
"description": "This tool allows you to rotate characters in a string by a specified number of positions. You can rotate to the left or right, and process multi-line text by rotating each line separately. String rotation is useful for simple text transformations, creating patterns, or implementing basic encryption techniques."
}
},
"repeat": {
"title": "Repeat Text",
"description": "Repeat text multiple times with customizable separators.",
"inputTitle": "Input text",
"resultTitle": "Repeated text",
"textRepetitions": "Text Repetitions",
"repeatAmountDescription": "Number of repetitions.",
"numberPlaceholder": "Number",
"repetitionsDelimiter": "Repetitions Delimiter",
"delimiterDescription": "Delimiter for output copies.",
"delimiterPlaceholder": "Delimiter",
"toolInfo": {
"title": "Repeat text",
"description": "This tool allows you to repeat a given text multiple times with an optional separator."
}
},
"rot13": {
"title": "ROT13 Encoder/Decoder",
"description": "Encode or decode text using ROT13 cipher.",
"inputTitle": "Input Text",
"resultTitle": "ROT13 Result",
"toolInfo": {
"title": "What Is ROT13?",
"description": "ROT13 (rotate by 13 places) is a simple letter substitution cipher that replaces a letter with the 13th letter after it in the alphabet. ROT13 is a special case of the Caesar cipher which was developed in ancient Rome. Because there are 26 letters in the English alphabet, ROT13 is its own inverse; that is, to undo ROT13, the same algorithm is applied, so the same action can be used for encoding and decoding."
}
},
"toMorse": {
"title": "To Morse",
"description": "Convert text to Morse code.",
"resultTitle": "Morse code",
"shortSignal": "Short Signal",
"dotSymbolDescription": "Symbol that will correspond to the dot in Morse code.",
"longSignal": "Long Signal",
"dashSymbolDescription": "Symbol that will correspond to the dash in Morse code."
},
"statistic": {
"title": "Text Statistics",
"description": "Analyze text and generate comprehensive statistics.",
"inputTitle": "Input text",
"resultTitle": "Text Statistics",
"delimitersOptions": "Delimiters Options",
"sentenceDelimitersPlaceholder": "e.g. ., !, ?, ...",
"sentenceDelimitersDescription": "Enter custom characters used to delimit sentences in your language (separated by comma) or leave it blank for default.",
"wordDelimitersPlaceholder": "eg. \\s.,;:!?\"«»()…",
"wordDelimitersDescription": "Enter custom Regex to count Words or leave it blank for default.",
"statisticsOptions": "Statistics Options",
"wordFrequencyAnalysis": "Word Frequency Analysis",
"wordFrequencyAnalysisDescription": "Count how often each word appears in the text",
"characterFrequencyAnalysis": "Character Frequency Analysis",
"characterFrequencyAnalysisDescription": "Count how often each character appears in the text",
"includeEmptyLines": "Include Empty Lines",
"includeEmptyLinesDescription": "Include blank lines when counting lines",
"toolInfo": {
"title": "What is a {{title}}?",
"description": "This tool allows you to analyze text and generate comprehensive statistics including character count, word count, line count, and frequency analysis of characters and words."
}
},
"textReplacer": {
"title": "Text Replacer",
"description": "Replace text patterns with new content.",
"inputTitle": "Text to replace",
"resultTitle": "Text with replacements",
"searchText": "Search text",
"findPatternInText": "Find This Pattern in Text",
"searchPatternDescription": "Enter the text pattern that you want to replace.",
"findPatternUsingRegexp": "Find a Pattern Using a RegExp",
"regexpDescription": "Enter the regular expression that you want to replace.",
"replaceText": "Replace Text",
"replacePatternDescription": "Enter the pattern to use for replacement.",
"newTextPlaceholder": "New text",
"toolInfo": {
"title": "Text Replacer",
"description": "Easily replace specific text in your content with this simple, browser-based tool. Just input your text, set the text you want to replace and the replacement value, and instantly get the updated version."
}
}
}

View File

@@ -9,6 +9,7 @@ import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { useTranslation } from 'react-i18next';
const initialValues = {
joinCharacter: '',
@@ -107,6 +108,7 @@ s
];
export default function JoinText({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const compute = (optionsValues: InitialValuesType, input: any) => {
@@ -119,25 +121,25 @@ export default function JoinText({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Text Merged Options',
title: t('string.join.textMergedOptions'),
component: (
<TextFieldWithDesc
placeholder={mergeOptions.placeholder}
placeholder={t('string.join.joinCharacterPlaceholder')}
value={values['joinCharacter']}
onOwnChange={(value) => updateField(mergeOptions.accessor, value)}
description={mergeOptions.description}
description={t('string.join.joinCharacterDescription')}
/>
)
},
{
title: 'Blank Lines and Trailing Spaces',
title: t('string.join.blankLinesAndTrailingSpaces'),
component: blankTrailingOptions.map((option) => (
<CheckboxWithDesc
key={option.accessor}
title={option.title}
title={t(`string.join.${option.accessor}Title`)}
checked={!!values[option.accessor]}
onChange={(value) => updateField(option.accessor, value)}
description={option.description}
description={t(`string.join.${option.accessor}Description`)}
/>
))
}
@@ -151,17 +153,18 @@ export default function JoinText({ title }: ToolComponentProps) {
setInput={setInput}
inputComponent={
<ToolTextInput
title={'Text Pieces'}
title={t('string.join.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={<ToolTextResult title={'Joined Text'} value={result} />}
resultComponent={
<ToolTextResult title={t('string.join.resultTitle')} value={result} />
}
getGroups={getGroups}
toolInfo={{
title: 'What Is a Text Joiner?',
description:
'With this tool you can join parts of the text together. It takes a list of text values, separated by newlines, and merges them together. You can set the character that will be placed between the parts of the combined text. Also, you can ignore all empty lines and remove spaces and tabs at the end of all lines. Textabulous!'
title: t('string.join.toolInfo.title'),
description: t('string.join.toolInfo.description')
}}
exampleCards={exampleCards}
/>

View File

@@ -2,12 +2,17 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Join',
path: 'join',
name: 'Text Joiner',
icon: 'tabler:arrows-join',
icon: 'material-symbols-light:join',
description:
"World's Simplest Text Tool World's simplest browser-based utility for joining text. Load your text in the input form on the left and you'll automatically get merged text on the right. Powerful, free, and fast. Load text get joined lines",
shortDescription: 'Quickly merge texts',
keywords: ['text', 'join'],
component: lazy(() => import('./index'))
"World's simplest browser-based utility for joining text elements. Input your text elements and specify a separator to combine them into a single string. Perfect for data processing, text manipulation, or creating formatted output from lists.",
shortDescription: 'Join text elements with a specified separator',
keywords: ['join'],
component: lazy(() => import('./index')),
i18n: {
name: 'string.join.name',
description: 'string.join.description',
shortDescription: 'string.join.shortDescription'
}
});

View File

@@ -10,5 +10,10 @@ export const tool = defineTool('string', {
"World's simplest browser-based utility for checking if text is a palindrome. Instantly verify if your text reads the same forward and backward. Perfect for word puzzles, linguistic analysis, or validating symmetrical text patterns. Supports various delimiters and multi-word palindrome detection.",
shortDescription: 'Check if text reads the same forward and backward',
keywords: ['palindrome'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.palindrome.name',
description: 'string.palindrome.description',
shortDescription: 'string.palindrome.shortDescription'
}
});

View File

@@ -9,6 +9,7 @@ import { ToolComponentProps } from '@tools/defineTool';
import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { useTranslation } from 'react-i18next';
interface InitialValuesType {
leftQuote: string;
@@ -70,6 +71,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
];
export default function Quote({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -93,33 +95,33 @@ export default function Quote({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Quote Options',
title: t('string.quote.quoteOptions'),
component: (
<Box>
<TextFieldWithDesc
value={values.leftQuote}
onOwnChange={(val) => updateField('leftQuote', val)}
description={'Left quote character(s)'}
description={t('string.quote.leftQuoteDescription')}
/>
<TextFieldWithDesc
value={values.rightQuote}
onOwnChange={(val) => updateField('rightQuote', val)}
description={'Right quote character(s)'}
description={t('string.quote.rightQuoteDescription')}
/>
<CheckboxWithDesc
checked={values.doubleQuotation}
onChange={(checked) => updateField('doubleQuotation', checked)}
title={'Allow double quotation'}
title={t('string.quote.allowDoubleQuotation')}
/>
<CheckboxWithDesc
checked={values.emptyQuoting}
onChange={(checked) => updateField('emptyQuoting', checked)}
title={'Quote empty lines'}
title={t('string.quote.quoteEmptyLines')}
/>
<CheckboxWithDesc
checked={values.multiLine}
onChange={(checked) => updateField('multiLine', checked)}
title={'Process as multi-line text'}
title={t('string.quote.processAsMultiLine')}
/>
</Box>
)
@@ -130,15 +132,20 @@ export default function Quote({ title }: ToolComponentProps) {
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input Text" value={input} onChange={setInput} />
<ToolTextInput
title={t('string.quote.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={t('string.quote.resultTitle')} value={result} />
}
resultComponent={<ToolTextResult title="Quoted Text" value={result} />}
initialValues={initialValues}
getGroups={getGroups}
toolInfo={{
title: 'Text Quoter',
description:
"This tool allows you to add quotes around text. You can choose different quote characters, handle multi-line text, and control how empty lines are processed. It's useful for preparing text for programming, formatting data, or creating stylized text."
title: t('string.quote.toolInfo.title'),
description: t('string.quote.toolInfo.description')
}}
exampleCards={exampleCards}
input={input}

View File

@@ -5,10 +5,15 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Quote',
path: 'quote',
icon: 'proicons:quote',
icon: 'material-symbols-light:format-quote',
description:
'A tool to add quotation marks or custom characters around text. Perfect for formatting strings for code, citations, or stylistic purposes.',
shortDescription: 'Add quotes around text easily.',
"World's simplest browser-based utility for adding quotes to text. Input your text and instantly add various quote styles around it. Perfect for formatting text, creating citations, or adding emphasis to specific content.",
shortDescription: 'Add quotes around text with various styles',
keywords: ['quote'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.quote.name',
description: 'string.quote.description',
shortDescription: 'string.quote.shortDescription'
}
});

View File

@@ -5,10 +5,15 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Randomize case',
path: 'randomize-case',
icon: 'material-symbols-light:format-textdirection-l-to-r',
icon: 'material-symbols-light:shuffle',
description:
"World's simplest browser-based utility for randomizing the case of text. Just paste your text and get it instantly transformed with random uppercase and lowercase letters. Perfect for creating playful text styles, meme text, or simulating chaotic writing.",
shortDescription: 'Convert text to random uppercase and lowercase letters',
"World's simplest browser-based utility for randomizing text case. Input your text and instantly transform it with random upper and lower case letters. Perfect for creating unique text effects, testing case sensitivity, or generating varied text patterns.",
shortDescription: 'Randomize the case of letters in text',
keywords: ['randomize', 'case'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.randomizeCase.name',
description: 'string.randomizeCase.description',
shortDescription: 'string.randomizeCase.shortDescription'
}
});

View File

@@ -9,5 +9,10 @@ export const tool = defineTool('string', {
"Load your text in the input form on the left and you'll instantly get text with no duplicate lines in the output area. Powerful, free, and fast. Load text lines get unique text lines",
shortDescription: 'Quickly delete all repeated lines from text',
keywords: ['remove', 'duplicate', 'lines'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.removeDuplicateLines.name',
description: 'string.removeDuplicateLines.description',
shortDescription: 'string.removeDuplicateLines.shortDescription'
}
});

View File

@@ -9,6 +9,7 @@ import { initialValues, InitialValuesType } from './initialValues';
import ToolContent from '@components/ToolContent';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { useTranslation } from 'react-i18next';
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
@@ -48,6 +49,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
];
export default function Replacer({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -60,12 +62,12 @@ export default function Replacer({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Text Repetitions',
title: t('string.repeat.textRepetitions'),
component: (
<Box>
<TextFieldWithDesc
description={'Number of repetitions.'}
placeholder="Number"
description={t('string.repeat.repeatAmountDescription')}
placeholder={t('string.repeat.numberPlaceholder')}
value={values.repeatAmount}
onOwnChange={(val) => updateField('repeatAmount', val)}
type={'number'}
@@ -74,12 +76,12 @@ export default function Replacer({ title }: ToolComponentProps) {
)
},
{
title: 'Repetitions Delimiter',
title: t('string.repeat.repetitionsDelimiter'),
component: (
<Box>
<TextFieldWithDesc
description={'Delimiter for output copies.'}
placeholder="Delimiter"
description={t('string.repeat.delimiterDescription')}
placeholder={t('string.repeat.delimiterPlaceholder')}
value={values.delimiter}
onOwnChange={(val) => updateField('delimiter', val)}
type={'text'}
@@ -98,15 +100,18 @@ export default function Replacer({ title }: ToolComponentProps) {
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput title={'Input text'} value={input} onChange={setInput} />
<ToolTextInput
title={t('string.repeat.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={'Repeated text'} value={result} />
<ToolTextResult title={t('string.repeat.resultTitle')} value={result} />
}
toolInfo={{
title: 'Repeat text',
description:
'This tool allows you to repeat a given text multiple times with an optional separator.'
title: t('string.repeat.toolInfo.title'),
description: t('string.repeat.toolInfo.description')
}}
exampleCards={exampleCards}
/>

View File

@@ -9,5 +9,10 @@ export const tool = defineTool('string', {
description:
'This tool allows you to repeat a given text multiple times with an optional separator.',
keywords: ['text', 'repeat'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.repeat.name',
description: 'string.repeat.description',
shortDescription: 'string.repeat.shortDescription'
}
});

View File

@@ -12,6 +12,7 @@ import ToolExamples, {
import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik';
import ToolContent from '@components/ToolContent';
import { useTranslation } from 'react-i18next';
const initialValues = {
multiLine: true,
@@ -58,6 +59,7 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
];
export default function Reverse({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -74,27 +76,27 @@ export default function Reverse({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Reversal options',
title: t('string.reverse.reversalOptions'),
component: [
<CheckboxWithDesc
key="multiLine"
checked={values.multiLine}
title="Process multi-line text"
description="Each line will be reversed independently"
title={t('string.reverse.processMultiLine')}
description={t('string.reverse.processMultiLineDescription')}
onChange={(val) => updateField('multiLine', val)}
/>,
<CheckboxWithDesc
key="emptyItems"
checked={values.emptyItems}
title="Skip empty lines"
description="Empty lines will be removed from the output"
title={t('string.reverse.skipEmptyLines')}
description={t('string.reverse.skipEmptyLinesDescription')}
onChange={(val) => updateField('emptyItems', val)}
/>,
<CheckboxWithDesc
key="trim"
checked={values.trim}
title="Trim whitespace"
description="Remove leading and trailing whitespace from each line"
title={t('string.reverse.trimWhitespace')}
description={t('string.reverse.trimWhitespaceDescription')}
onChange={(val) => updateField('trim', val)}
/>
]
@@ -109,9 +111,18 @@ export default function Reverse({ title }: ToolComponentProps) {
compute={computeExternal}
input={input}
setInput={setInput}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
inputComponent={
<ToolTextInput
title={t('string.reverse.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={'Reversed text'} value={result} />
<ToolTextResult
title={t('string.reverse.resultTitle')}
value={result}
/>
}
exampleCards={exampleCards}
/>

View File

@@ -9,5 +9,10 @@ export const tool = defineTool('string', {
"World's simplest browser-based utility for reversing text. Input any text and get it instantly reversed, character by character. Perfect for creating mirror text, analyzing palindromes, or playing with text patterns. Preserves spaces and special characters while reversing.",
shortDescription: 'Reverse any text character by character',
keywords: ['reverse'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.reverse.name',
description: 'string.reverse.description',
shortDescription: 'string.reverse.shortDescription'
}
});

View File

@@ -5,6 +5,7 @@ import ToolTextResult from '@components/result/ToolTextResult';
import { rot13 } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { useTranslation } from 'react-i18next';
type InitialValuesType = Record<string, never>;
@@ -30,6 +31,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
];
export default function Rot13({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -41,15 +43,20 @@ export default function Rot13({ title }: ToolComponentProps) {
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input Text" value={input} onChange={setInput} />
<ToolTextInput
title={t('string.rot13.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={t('string.rot13.resultTitle')} value={result} />
}
resultComponent={<ToolTextResult title="ROT13 Result" value={result} />}
initialValues={initialValues}
getGroups={null}
toolInfo={{
title: 'What Is ROT13?',
description:
'ROT13 (rotate by 13 places) is a simple letter substitution cipher that replaces a letter with the 13th letter after it in the alphabet. ROT13 is a special case of the Caesar cipher which was developed in ancient Rome. Because there are 26 letters in the English alphabet, ROT13 is its own inverse; that is, to undo ROT13, the same algorithm is applied, so the same action can be used for encoding and decoding.'
title: t('string.rot13.toolInfo.title'),
description: t('string.rot13.toolInfo.description')
}}
exampleCards={exampleCards}
input={input}

View File

@@ -10,6 +10,7 @@ import { GetGroupsType } from '@components/options/ToolOptions';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { useTranslation } from 'react-i18next';
interface InitialValuesType {
step: string;
@@ -63,6 +64,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
];
export default function Rotate({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -79,29 +81,29 @@ export default function Rotate({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Rotation Options',
title: t('string.rotate.rotationOptions'),
component: (
<Box>
<TextFieldWithDesc
value={values.step}
onOwnChange={(val) => updateField('step', val)}
description={'Number of positions to rotate'}
description={t('string.rotate.stepDescription')}
type="number"
/>
<SimpleRadio
onClick={() => updateField('direction', 'right')}
checked={values.direction === 'right'}
title={'Rotate Right'}
title={t('string.rotate.rotateRight')}
/>
<SimpleRadio
onClick={() => updateField('direction', 'left')}
checked={values.direction === 'left'}
title={'Rotate Left'}
title={t('string.rotate.rotateLeft')}
/>
<CheckboxWithDesc
checked={values.multiLine}
onChange={(checked) => updateField('multiLine', checked)}
title={'Process as multi-line text (rotate each line separately)'}
title={t('string.rotate.processAsMultiLine')}
/>
</Box>
)
@@ -112,15 +114,20 @@ export default function Rotate({ title }: ToolComponentProps) {
<ToolContent
title={title}
inputComponent={
<ToolTextInput title="Input Text" value={input} onChange={setInput} />
<ToolTextInput
title={t('string.rotate.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={t('string.rotate.resultTitle')} value={result} />
}
resultComponent={<ToolTextResult title="Rotated Text" value={result} />}
initialValues={initialValues}
getGroups={getGroups}
toolInfo={{
title: 'String Rotation',
description:
'This tool allows you to rotate characters in a string by a specified number of positions. You can rotate to the left or right, and process multi-line text by rotating each line separately. String rotation is useful for simple text transformations, creating patterns, or implementing basic encryption techniques.'
title: t('string.rotate.toolInfo.title'),
description: t('string.rotate.toolInfo.description')
}}
exampleCards={exampleCards}
input={input}

View File

@@ -11,6 +11,7 @@ import ToolExamples, {
import { ToolComponentProps } from '@tools/defineTool';
import { FormikProps } from 'formik';
import ToolContent from '@components/ToolContent';
import { useTranslation } from 'react-i18next';
const initialValues = {
splitSeparatorType: 'symbol' as SplitOperatorType,
@@ -132,6 +133,7 @@ easy`,
];
export default function SplitText({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -170,18 +172,20 @@ export default function SplitText({ title }: ToolComponentProps) {
title={title}
input={input}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={<ToolTextResult title={'Text pieces'} value={result} />}
resultComponent={
<ToolTextResult title={t('string.split.resultTitle')} value={result} />
}
initialValues={initialValues}
getGroups={({ values, updateField }) => [
{
title: 'Split separator options',
title: t('string.split.splitSeparatorOptions'),
component: splitOperators.map(({ title, description, type }) => (
<RadioWithTextField
key={type}
checked={type === values.splitSeparatorType}
title={title}
title={t(`string.split.${type}Title`)}
fieldName={'splitSeparatorType'}
description={description}
description={t(`string.split.${type}Description`)}
value={values[`${type}Value`]}
onRadioClick={() => updateField('splitSeparatorType', type)}
onTextChange={(val) => updateField(`${type}Value`, val)}
@@ -189,13 +193,13 @@ export default function SplitText({ title }: ToolComponentProps) {
))
},
{
title: 'Output separator options',
title: t('string.split.outputSeparatorOptions'),
component: outputOptions.map((option) => (
<TextFieldWithDesc
key={option.accessor}
value={values[option.accessor]}
onOwnChange={(value) => updateField(option.accessor, value)}
description={option.description}
description={t(`string.split.${option.accessor}Description`)}
/>
))
}

View File

@@ -2,13 +2,17 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Split',
path: 'split',
name: 'Text splitter',
icon: 'material-symbols-light:arrow-split',
icon: 'material-symbols-light:call-split',
description:
"World's simplest browser-based utility for splitting text. Load your text in the input form on the left and you'll automatically get pieces of this text on the right. Powerful, free, and fast. Load text get chunks.",
shortDescription: 'Quickly split a text',
longDescription: 'Quickly split a text',
keywords: ['text', 'split'],
component: lazy(() => import('./index'))
"World's simplest browser-based utility for splitting text. Input your text and specify a separator to split it into multiple parts. Perfect for data processing, text manipulation, or extracting specific content from larger text blocks.",
shortDescription: 'Split text into multiple parts using a separator',
keywords: ['split'],
component: lazy(() => import('./index')),
i18n: {
name: 'string.split.name',
description: 'string.split.description',
shortDescription: 'string.split.shortDescription'
}
});

View File

@@ -10,6 +10,7 @@ import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { useTranslation } from 'react-i18next';
const initialValues: InitialValuesType = {
emptyLines: false,
@@ -216,6 +217,7 @@ export default function Truncate({
title,
longDescription
}: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -228,49 +230,47 @@ export default function Truncate({
updateField
}) => [
{
title: 'Delimiters Options',
title: t('string.statistic.delimitersOptions'),
component: (
<Box>
<TextFieldWithDesc
value={values.sentenceDelimiters}
onOwnChange={(val) => updateField('sentenceDelimiters', val)}
placeholder="e.g. ., !, ?, ..."
description={
'Enter custom characters used to delimit sentences in your language (separated by comma) or leave it blank for default.'
}
placeholder={t('string.statistic.sentenceDelimitersPlaceholder')}
description={t('string.statistic.sentenceDelimitersDescription')}
/>
<TextFieldWithDesc
value={values.wordDelimiters}
onOwnChange={(val) => updateField('wordDelimiters', val)}
placeholder="eg. \\s.,;:!?\”«»()…"
description={
'Enter custom Regex to count Words or leave it blank for default.'
}
placeholder={t('string.statistic.wordDelimitersPlaceholder')}
description={t('string.statistic.wordDelimitersDescription')}
/>
</Box>
)
},
{
title: 'Statistics Options',
title: t('string.statistic.statisticsOptions'),
component: (
<Box>
<CheckboxWithDesc
checked={values.wordCount}
onChange={(value) => updateField('wordCount', value)}
title="Word Frequency Analysis"
description="Count how often each word appears in the text"
title={t('string.statistic.wordFrequencyAnalysis')}
description={t('string.statistic.wordFrequencyAnalysisDescription')}
/>
<CheckboxWithDesc
checked={values.characterCount}
onChange={(value) => updateField('characterCount', value)}
title="Character Frequency Analysis"
description="Count how often each character appears in the text"
title={t('string.statistic.characterFrequencyAnalysis')}
description={t(
'string.statistic.characterFrequencyAnalysisDescription'
)}
/>
<CheckboxWithDesc
checked={values.emptyLines}
onChange={(value) => updateField('emptyLines', value)}
title="Include Empty Lines"
description="Include blank lines when counting lines"
title={t('string.statistic.includeEmptyLines')}
description={t('string.statistic.includeEmptyLinesDescription')}
/>
</Box>
)
@@ -286,12 +286,22 @@ export default function Truncate({
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput title={'Input text'} value={input} onChange={setInput} />
<ToolTextInput
title={t('string.statistic.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={'Text Statistics'} value={result} />
<ToolTextResult
title={t('string.statistic.resultTitle')}
value={result}
/>
}
toolInfo={{ title: `What is a ${title}?`, description: longDescription }}
toolInfo={{
title: t('string.statistic.toolInfo.title', { title }),
description: longDescription
}}
exampleCards={exampleCards}
/>
);

View File

@@ -11,5 +11,11 @@ export const tool = defineTool('string', {
longDescription:
'This tool provides various statistics about the text you input, including the number of lines, words, and characters. You can also choose to include empty lines in the count. it can count words and characters based on custom delimiters, allowing for flexible text analysis. Additionally, it can provide frequency statistics for words and characters, helping you understand the distribution of terms in your text.',
keywords: ['text', 'statistics', 'count', 'lines', 'words', 'characters'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.statistic.name',
description: 'string.statistic.description',
shortDescription: 'string.statistic.shortDescription',
longDescription: 'string.statistic.longDescription'
}
});

View File

@@ -10,6 +10,7 @@ import { initialValues, InitialValuesType } from './initialValues';
import ToolContent from '@components/ToolContent';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import { useTranslation } from 'react-i18next';
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
@@ -60,6 +61,7 @@ const exampleCards: CardExampleType<InitialValuesType>[] = [
];
export default function Replacer({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -72,16 +74,16 @@ export default function Replacer({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Search text',
title: t('string.textReplacer.searchText'),
component: (
<Box>
<SimpleRadio
onClick={() => updateField('mode', 'text')}
checked={values.mode === 'text'}
title={'Find This Pattern in Text'}
title={t('string.textReplacer.findPatternInText')}
/>
<TextFieldWithDesc
description={'Enter the text pattern that you want to replace.'}
description={t('string.textReplacer.searchPatternDescription')}
value={values.searchValue}
onOwnChange={(val) => updateField('searchValue', val)}
type={'text'}
@@ -89,12 +91,10 @@ export default function Replacer({ title }: ToolComponentProps) {
<SimpleRadio
onClick={() => updateField('mode', 'regexp')}
checked={values.mode === 'regexp'}
title={'Find a Pattern Using a RegExp'}
title={t('string.textReplacer.findPatternUsingRegexp')}
/>
<TextFieldWithDesc
description={
'Enter the regular expression that you want to replace.'
}
description={t('string.textReplacer.regexpDescription')}
value={values.searchRegexp}
onOwnChange={(val) => updateField('searchRegexp', val)}
type={'text'}
@@ -103,12 +103,12 @@ export default function Replacer({ title }: ToolComponentProps) {
)
},
{
title: 'Replace Text',
title: t('string.textReplacer.replaceText'),
component: (
<Box>
<TextFieldWithDesc
description={'Enter the pattern to use for replacement.'}
placeholder={'New text'}
description={t('string.textReplacer.replacePatternDescription')}
placeholder={t('string.textReplacer.newTextPlaceholder')}
value={values.replaceValue}
onOwnChange={(val) => updateField('replaceValue', val)}
type={'text'}
@@ -128,18 +128,20 @@ export default function Replacer({ title }: ToolComponentProps) {
setInput={setInput}
inputComponent={
<ToolTextInput
title="Text to replace"
title={t('string.textReplacer.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={'Text with replacements'} value={result} />
<ToolTextResult
title={t('string.textReplacer.resultTitle')}
value={result}
/>
}
toolInfo={{
title: 'Text Replacer',
description:
'Easily replace specific text in your content with this simple, browser-based tool. Just input your text, set the text you want to replace and the replacement value, and instantly get the updated version.'
title: t('string.textReplacer.toolInfo.title'),
description: t('string.textReplacer.toolInfo.description')
}}
exampleCards={exampleCards}
/>

View File

@@ -4,6 +4,7 @@ import ToolTextInput from '@components/input/ToolTextInput';
import ToolTextResult from '@components/result/ToolTextResult';
import { compute } from './service';
import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { useTranslation } from 'react-i18next';
const initialValues = {
dotSymbol: '.',
@@ -11,6 +12,7 @@ const initialValues = {
};
export default function ToMorse() {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
const computeOptions = (optionsValues: typeof initialValues, input: any) => {
@@ -20,33 +22,34 @@ export default function ToMorse() {
return (
<ToolContent
title="To Morse"
title={t('string.toMorse.title')}
initialValues={initialValues}
compute={computeOptions}
input={input}
setInput={setInput}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
resultComponent={<ToolTextResult title={'Morse code'} value={result} />}
resultComponent={
<ToolTextResult
title={t('string.toMorse.resultTitle')}
value={result}
/>
}
getGroups={({ values, updateField }) => [
{
title: 'Short Signal',
title: t('string.toMorse.shortSignal'),
component: (
<TextFieldWithDesc
description={
'Symbol that will correspond to the dot in Morse code.'
}
description={t('string.toMorse.dotSymbolDescription')}
value={values.dotSymbol}
onOwnChange={(val) => updateField('dotSymbol', val)}
/>
)
},
{
title: 'Long Signal',
title: t('string.toMorse.longSignal'),
component: (
<TextFieldWithDesc
description={
'Symbol that will correspond to the dash in Morse code.'
}
description={t('string.toMorse.dashSymbolDescription')}
value={values.dashSymbol}
onOwnChange={(val) => updateField('dashSymbol', val)}
/>

View File

@@ -10,5 +10,10 @@ export const tool = defineTool('string', {
"World's simplest browser-based utility for converting text to Morse code. Load your text in the input form on the left and you'll instantly get Morse code in the output area. Powerful, free, and fast. Load text get Morse code.",
shortDescription: 'Quickly encode text to morse',
keywords: ['to', 'morse'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.toMorse.name',
description: 'string.toMorse.description',
shortDescription: 'string.toMorse.shortDescription'
}
});

View File

@@ -11,6 +11,7 @@ import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import SimpleRadio from '@components/options/SimpleRadio';
import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
import { useTranslation } from 'react-i18next';
const exampleCards: CardExampleType<InitialValuesType>[] = [
{
@@ -67,6 +68,7 @@ Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
];
export default function Truncate({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -79,31 +81,31 @@ export default function Truncate({ title }: ToolComponentProps) {
updateField
}) => [
{
title: 'Truncation Side',
title: t('string.truncate.truncationSide'),
component: (
<Box>
<SimpleRadio
onClick={() => updateField('truncationSide', 'right')}
checked={values.truncationSide === 'right'}
title={'Right-side Truncation'}
description={'Remove characters from the end of the text.'}
title={t('string.truncate.rightSideTruncation')}
description={t('string.truncate.rightSideDescription')}
/>
<SimpleRadio
onClick={() => updateField('truncationSide', 'left')}
checked={values.truncationSide === 'left'}
title={'Left-side Truncation'}
description={'Remove characters from the start of the text.'}
title={t('string.truncate.leftSideTruncation')}
description={t('string.truncate.leftSideDescription')}
/>
</Box>
)
},
{
title: 'Length and Lines',
title: t('string.truncate.lengthAndLines'),
component: (
<Box>
<TextFieldWithDesc
description={'Number of characters to leave in the text.'}
placeholder="Number"
description={t('string.truncate.maxLengthDescription')}
placeholder={t('string.truncate.numberPlaceholder')}
value={values.maxLength}
onOwnChange={(val) => updateField('maxLength', val)}
type={'number'}
@@ -111,27 +113,25 @@ export default function Truncate({ title }: ToolComponentProps) {
<CheckboxWithDesc
onChange={(val) => updateField('lineByLine', val)}
checked={values.lineByLine}
title={'Line-by-line Truncating'}
description={'Truncate each line separately.'}
title={t('string.truncate.lineByLineTruncating')}
description={t('string.truncate.lineByLineDescription')}
/>
</Box>
)
},
{
title: 'Suffix and Affix',
title: t('string.truncate.suffixAndAffix'),
component: (
<Box>
<CheckboxWithDesc
onChange={(val) => updateField('addIndicator', val)}
checked={values.addIndicator}
title={'Add Truncation Indicator'}
title={t('string.truncate.addTruncationIndicator')}
description={''}
/>
<TextFieldWithDesc
description={
'Characters to add at the end (or start) of the text. Note: They count towards the length.'
}
placeholder="Characters"
description={t('string.truncate.indicatorDescription')}
placeholder={t('string.truncate.charactersPlaceholder')}
value={values.indicator}
onOwnChange={(val) => updateField('indicator', val)}
type={'text'}
@@ -150,15 +150,21 @@ export default function Truncate({ title }: ToolComponentProps) {
input={input}
setInput={setInput}
inputComponent={
<ToolTextInput title={'Input text'} value={input} onChange={setInput} />
<ToolTextInput
title={t('string.truncate.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={'Truncated text'} value={result} />
<ToolTextResult
title={t('string.truncate.resultTitle')}
value={result}
/>
}
toolInfo={{
title: 'Truncate text',
description:
'Load your text in the input form on the left and you will automatically get truncated text on the right.'
title: t('string.truncate.toolInfo.title'),
description: t('string.truncate.toolInfo.description')
}}
exampleCards={exampleCards}
/>

View File

@@ -2,12 +2,17 @@ import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Truncate text',
name: 'Truncate',
path: 'truncate',
shortDescription: 'Truncate your text easily',
icon: 'material-symbols-light:short-text',
icon: 'material-symbols-light:content-cut',
description:
'Load your text in the input form on the left and you will automatically get truncated text on the right.',
keywords: ['text', 'truncate'],
component: lazy(() => import('./index'))
"World's simplest browser-based utility for truncating text. Input your text and specify the maximum length to cut it down. Perfect for data processing, text formatting, or limiting content length.",
shortDescription: 'Truncate text to a specified length',
keywords: ['truncate'],
component: lazy(() => import('./index')),
i18n: {
name: 'string.truncate.name',
description: 'string.truncate.description',
shortDescription: 'string.truncate.shortDescription'
}
});

View File

@@ -5,6 +5,7 @@ import { UppercaseInput } from './service';
import { CardExampleType } from '@components/examples/ToolExamples';
import { ToolComponentProps } from '@tools/defineTool';
import ToolContent from '@components/ToolContent';
import { useTranslation } from 'react-i18next';
const initialValues = {};
@@ -35,6 +36,7 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
];
export default function Uppercase({ title }: ToolComponentProps) {
const { t } = useTranslation();
const [input, setInput] = useState<string>('');
const [result, setResult] = useState<string>('');
@@ -53,9 +55,18 @@ export default function Uppercase({ title }: ToolComponentProps) {
compute={computeExternal}
input={input}
setInput={setInput}
inputComponent={<ToolTextInput value={input} onChange={setInput} />}
inputComponent={
<ToolTextInput
title={t('string.uppercase.inputTitle')}
value={input}
onChange={setInput}
/>
}
resultComponent={
<ToolTextResult title={'Uppercase text'} value={result} />
<ToolTextResult
title={t('string.uppercase.resultTitle')}
value={result}
/>
}
exampleCards={exampleCards}
/>

View File

@@ -4,10 +4,15 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Uppercase',
path: 'uppercase',
icon: 'material-symbols-light:text-fields',
icon: 'material-symbols-light:format-textdirection-l-to-r',
description:
"World's simplest browser-based utility for converting text to uppercase. Just input your text and it will be automatically converted to all capital letters. Perfect for creating headlines, emphasizing text, or standardizing text format. Supports various text formats and preserves special characters.",
shortDescription: 'Convert text to uppercase letters',
"World's simplest browser-based utility for converting text to uppercase. Input your text and instantly get all characters in uppercase. Perfect for formatting, shouting, or emphasizing text.",
shortDescription: 'Convert text to uppercase',
keywords: ['uppercase'],
component: lazy(() => import('./index'))
component: lazy(() => import('./index')),
i18n: {
name: 'string.uppercase.name',
description: 'string.uppercase.description',
shortDescription: 'string.uppercase.shortDescription'
}
});