diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 4479873..a28aee5 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -820,4 +820,4 @@
-
\ No newline at end of file
+
diff --git a/src/components/ToolContent.tsx b/src/components/ToolContent.tsx
index dc6ae0e..4eb02fb 100644
--- a/src/components/ToolContent.tsx
+++ b/src/components/ToolContent.tsx
@@ -25,7 +25,7 @@ interface ToolContentProps extends ToolComponentProps {
// Tool info (optional)
toolInfo?: {
title: string;
- description: string;
+ description?: string;
};
// Input value to pass to the compute function
@@ -66,7 +66,7 @@ export default function ToolContent({
validationSchema={validationSchema}
/>
- {toolInfo && (
+ {toolInfo && toolInfo.title && toolInfo.description && (
)}
diff --git a/src/components/examples/ExampleCard.tsx b/src/components/examples/ExampleCard.tsx
index f4b1bf0..c16295c 100644
--- a/src/components/examples/ExampleCard.tsx
+++ b/src/components/examples/ExampleCard.tsx
@@ -60,33 +60,36 @@ export default function ExampleCard({
{description}
-
-
-
+ >
+
+
+ )}
{
compute: (optionsValues: T, input: any) => void;
input: any;
children?: ReactNode;
- getGroups: (
- formikProps: FormikProps & { updateField: UpdateField }
- ) => ToolOptionGroup[];
+ getGroups:
+ | null
+ | ((
+ formikProps: FormikProps & { updateField: UpdateField }
+ ) => ToolOptionGroup[]);
formikProps: FormikProps;
}
@@ -63,7 +65,9 @@ const ToolBody = ({
input={input}
initialValues={values}
/>
-
+
{children}
);
@@ -90,41 +94,41 @@ export default function ToolOptions({
formRef?: RefObject>;
}) {
const theme = useTheme();
- if (getGroups)
- return (
-
-
-
- Tool options
-
-
- {}}
- >
- {(formikProps) => (
-
- {children}
-
- )}
-
-
+ return (
+
+
+
+ Tool options
+
+
+ {}}
+ >
+ {(formikProps) => (
+
+ {children}
+
+ )}
+
- );
+
+ );
}
diff --git a/src/pages/tools/number/arithmetic-sequence/index.tsx b/src/pages/tools/number/arithmetic-sequence/index.tsx
index 11451bd..6835d99 100644
--- a/src/pages/tools/number/arithmetic-sequence/index.tsx
+++ b/src/pages/tools/number/arithmetic-sequence/index.tsx
@@ -6,6 +6,7 @@ import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
import { generateArithmeticSequence } from './service';
import * as Yup from 'yup';
import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
type InitialValuesType = {
firstTerm: string;
@@ -68,11 +69,12 @@ const exampleCards: CardExampleType[] = [
}
];
-export default function ArithmeticSequence() {
+export default function ArithmeticSequence({ title }: ToolComponentProps) {
const [result, setResult] = useState('');
return (
diff --git a/src/pages/tools/string/create-palindrome/index.tsx b/src/pages/tools/string/create-palindrome/index.tsx
index 5a45556..0f200b7 100644
--- a/src/pages/tools/string/create-palindrome/index.tsx
+++ b/src/pages/tools/string/create-palindrome/index.tsx
@@ -1,11 +1,113 @@
-import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import React, { useState } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { createPalindromeList } from './service';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolContent from '@components/ToolContent';
-const initialValues = {};
-const validationSchema = Yup.object({
- // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function CreatePalindrome() {
- return Lorem ipsum;
+const initialValues = {
+ lastChar: true,
+ multiLine: false
+};
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Create Simple Palindrome',
+ description:
+ 'Creates a palindrome by repeating the text in reverse order, including the last character.',
+ sampleText: 'level',
+ sampleResult: 'levellevel',
+ sampleOptions: {
+ ...initialValues,
+ lastChar: true
+ }
+ },
+ {
+ title: 'Create Palindrome Without Last Character Duplication',
+ description:
+ 'Creates a palindrome without repeating the last character in the reverse part.',
+ sampleText: 'radar',
+ sampleResult: 'radarada',
+ sampleOptions: {
+ ...initialValues,
+ lastChar: false
+ }
+ },
+ {
+ title: 'Multi-line Palindrome Creation',
+ description: 'Creates palindromes for each line independently.',
+ sampleText: 'mom\ndad\nwow',
+ sampleResult: 'mommom\ndaddad\nwowwow',
+ sampleOptions: {
+ ...initialValues,
+ lastChar: true,
+ multiLine: true
+ }
+ }
+];
+
+export default function CreatePalindrome({
+ title,
+ longDescription
+}: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const computeExternal = (
+ optionsValues: typeof initialValues,
+ input: string
+ ) => {
+ const { lastChar, multiLine } = optionsValues;
+ setResult(createPalindromeList(input, lastChar, multiLine));
+ };
+
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Palindrome options',
+ component: [
+ updateField('lastChar', val)}
+ />,
+ updateField('multiLine', val)}
+ />
+ ]
+ }
+ ];
+
+ return (
+
+ }
+ resultComponent={
+
+ }
+ toolInfo={{
+ title: 'What Is a String Palindrome Creator?',
+ description: longDescription
+ }}
+ exampleCards={exampleCards}
+ />
+ );
}
diff --git a/src/pages/tools/string/create-palindrome/meta.ts b/src/pages/tools/string/create-palindrome/meta.ts
index a8731e1..cee5acc 100644
--- a/src/pages/tools/string/create-palindrome/meta.ts
+++ b/src/pages/tools/string/create-palindrome/meta.ts
@@ -5,9 +5,12 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Create palindrome',
path: 'create-palindrome',
- icon: '',
- description: '',
- shortDescription: '',
+ icon: 'material-symbols-light:repeat',
+ description:
+ "World's simplest browser-based utility for creating palindromes from any text. Input text and instantly transform it into a palindrome that reads the same forward and backward. Perfect for word games, creating symmetrical text patterns, or exploring linguistic curiosities.",
+ shortDescription: 'Create text that reads the same forward and backward',
+ 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'))
});
diff --git a/src/pages/tools/string/extract-substring/index.tsx b/src/pages/tools/string/extract-substring/index.tsx
index bbd3e7d..43756a0 100644
--- a/src/pages/tools/string/extract-substring/index.tsx
+++ b/src/pages/tools/string/extract-substring/index.tsx
@@ -1,11 +1,142 @@
-import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import React, { useState } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { GetGroupsType } from '@components/options/ToolOptions';
+import { extractSubstring } from './service';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolContent from '@components/ToolContent';
-const initialValues = {};
-const validationSchema = Yup.object({
- // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function ExtractSubstring() {
- return Lorem ipsum;
+const initialValues = {
+ start: '1',
+ length: '5',
+ multiLine: false,
+ reverse: false
+};
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Extract First 5 Characters',
+ description: 'This example extracts the first 5 characters from the text.',
+ sampleText: 'The quick brown fox jumps over the lazy dog.',
+ sampleResult: 'The q',
+ sampleOptions: {
+ ...initialValues,
+ start: '1',
+ length: '5'
+ }
+ },
+ {
+ title: 'Extract Words from the Middle',
+ description:
+ 'Extract a substring starting from position 11 with a length of 10 characters.',
+ sampleText: 'The quick brown fox jumps over the lazy dog.',
+ sampleResult: 'brown fox',
+ sampleOptions: {
+ ...initialValues,
+ start: '11',
+ length: '10'
+ }
+ },
+ {
+ title: 'Multi-line Extraction with Reversal',
+ description: 'Extract characters 1-3 from each line and reverse them.',
+ sampleText: 'First line\nSecond line\nThird line',
+ sampleResult: 'riF\nceS\nihT',
+ sampleOptions: {
+ ...initialValues,
+ start: '1',
+ length: '3',
+ multiLine: true,
+ reverse: true
+ }
+ }
+];
+
+export default function ExtractSubstring({ title }: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const computeExternal = (
+ optionsValues: typeof initialValues,
+ input: string
+ ) => {
+ const { start, length, multiLine, reverse } = optionsValues;
+ try {
+ setResult(
+ extractSubstring(
+ input,
+ parseInt(start, 10),
+ parseInt(length, 10),
+ multiLine,
+ reverse
+ )
+ );
+ } catch (error) {
+ if (error instanceof Error) {
+ setResult(`Error: ${error.message}`);
+ } else {
+ setResult('An unknown error occurred');
+ }
+ }
+ };
+
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Extraction options',
+ component: [
+ updateField('start', value)}
+ description="Start position (1-based index)"
+ type="number"
+ />,
+ updateField('length', value)}
+ description="Number of characters to extract"
+ type="number"
+ />,
+ updateField('multiLine', val)}
+ />,
+ updateField('reverse', val)}
+ />
+ ]
+ }
+ ];
+
+ return (
+
+ }
+ resultComponent={
+
+ }
+ exampleCards={exampleCards}
+ />
+ );
}
diff --git a/src/pages/tools/string/extract-substring/meta.ts b/src/pages/tools/string/extract-substring/meta.ts
index 1cc7fd2..a8a6eee 100644
--- a/src/pages/tools/string/extract-substring/meta.ts
+++ b/src/pages/tools/string/extract-substring/meta.ts
@@ -5,9 +5,10 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Extract substring',
path: 'extract-substring',
- icon: '',
- description: '',
- shortDescription: '',
+ 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',
keywords: ['extract', 'substring'],
component: lazy(() => import('./index'))
});
diff --git a/src/pages/tools/string/index.ts b/src/pages/tools/string/index.ts
index 632cab2..24f6939 100644
--- a/src/pages/tools/string/index.ts
+++ b/src/pages/tools/string/index.ts
@@ -20,11 +20,11 @@ export const stringTools = [
stringRemoveDuplicateLines,
stringToMorse,
stringReplace,
- stringRepeat
- // stringReverse,
- // stringRandomizeCase,
- // stringUppercase,
- // stringExtractSubstring,
- // stringCreatePalindrome,
- // stringPalindrome
+ stringRepeat,
+ stringReverse,
+ stringRandomizeCase,
+ stringUppercase,
+ stringExtractSubstring,
+ stringCreatePalindrome,
+ stringPalindrome
];
diff --git a/src/pages/tools/string/palindrome/index.tsx b/src/pages/tools/string/palindrome/index.tsx
index 9b5d8ad..08299c4 100644
--- a/src/pages/tools/string/palindrome/index.tsx
+++ b/src/pages/tools/string/palindrome/index.tsx
@@ -1,11 +1,126 @@
import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import React, { useState, useRef } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
+import { palindromeList, SplitOperatorType } from './service';
+import RadioWithTextField from '@components/options/RadioWithTextField';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import ToolExamples, {
+ CardExampleType
+} from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import { FormikProps } from 'formik';
+import ToolContent from '@components/ToolContent';
-const initialValues = {};
-const validationSchema = Yup.object({
- // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function Palindrome() {
- return Lorem ipsum;
+const initialValues = {
+ splitOperatorType: 'symbol' as SplitOperatorType,
+ symbolValue: ' ',
+ regexValue: '\\s+'
+};
+
+const splitOperators: {
+ title: string;
+ description: string;
+ type: SplitOperatorType;
+}[] = [
+ {
+ title: 'Use a Symbol for Splitting',
+ description:
+ 'Character that will be used to split text into parts for palindrome checking.',
+ type: 'symbol'
+ },
+ {
+ title: 'Use a Regex for Splitting',
+ type: 'regex',
+ description:
+ 'Regular expression that will be used to split text into parts for palindrome checking.'
+ }
+];
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Check for Word Palindromes',
+ description:
+ 'Checks if each word in the text is a palindrome. Returns "true" for palindromes and "false" for non-palindromes.',
+ sampleText: 'radar level hello anna',
+ sampleResult: 'true true false true',
+ sampleOptions: {
+ ...initialValues,
+ symbolValue: ' '
+ }
+ },
+ {
+ title: 'Check CSV Words',
+ description: 'Checks palindrome status for comma-separated words.',
+ sampleText: 'mom,dad,wow,test',
+ sampleResult: 'true true true false',
+ sampleOptions: {
+ ...initialValues,
+ symbolValue: ','
+ }
+ },
+ {
+ title: 'Check with Regular Expression',
+ description:
+ 'Use a regular expression to split text and check for palindromes.',
+ sampleText: 'level:madam;noon|test',
+ sampleResult: 'true true true false',
+ sampleOptions: {
+ ...initialValues,
+ splitOperatorType: 'regex',
+ regexValue: '[:|;]|\\|'
+ }
+ }
+];
+
+export default function Palindrome({ title }: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const computeExternal = (
+ optionsValues: typeof initialValues,
+ input: string
+ ) => {
+ const { splitOperatorType, symbolValue, regexValue } = optionsValues;
+ const separator = splitOperatorType === 'symbol' ? symbolValue : regexValue;
+ setResult(palindromeList(splitOperatorType, input, separator));
+ };
+
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Splitting options',
+ component: splitOperators.map(({ title, description, type }) => (
+ updateField('splitOperatorType', type)}
+ onTextChange={(val) => updateField(`${type}Value`, val)}
+ />
+ ))
+ }
+ ];
+
+ return (
+ }
+ resultComponent={
+
+ }
+ exampleCards={exampleCards}
+ />
+ );
}
diff --git a/src/pages/tools/string/palindrome/meta.ts b/src/pages/tools/string/palindrome/meta.ts
index 96c7d2e..bf40d4a 100644
--- a/src/pages/tools/string/palindrome/meta.ts
+++ b/src/pages/tools/string/palindrome/meta.ts
@@ -5,9 +5,10 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Palindrome',
path: 'palindrome',
- icon: '',
- description: '',
- shortDescription: '',
+ icon: 'material-symbols-light:search',
+ description:
+ "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'))
});
diff --git a/src/pages/tools/string/randomize-case/index.tsx b/src/pages/tools/string/randomize-case/index.tsx
index 33f6b00..f34621f 100644
--- a/src/pages/tools/string/randomize-case/index.tsx
+++ b/src/pages/tools/string/randomize-case/index.tsx
@@ -1,11 +1,66 @@
-import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import React, { useState } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { randomizeCase } from './service';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolContent from '@components/ToolContent';
const initialValues = {};
-const validationSchema = Yup.object({
- // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function RandomizeCase() {
- return Lorem ipsum;
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Randomize Text Case',
+ description:
+ 'This example turns normal text into a random mix of uppercase and lowercase letters.',
+ sampleText: 'The quick brown fox jumps over the lazy dog.',
+ sampleResult: 'tHe qUIcK BrOWn fOx JuMPs ovEr ThE LaZy Dog.',
+ sampleOptions: {}
+ },
+ {
+ title: 'Randomize Code Case',
+ description:
+ 'Transform code identifiers with randomized case for a chaotic look.',
+ sampleText:
+ 'function calculateTotal(price, quantity) { return price * quantity; }',
+ sampleResult:
+ 'FuNcTIon cAlCuLAtEtOtaL(pRicE, qUaNTiTy) { rETuRn PrICe * QuAnTiTY; }',
+ sampleOptions: {}
+ },
+ {
+ title: 'Randomize a Famous Quote',
+ description:
+ 'Give a unique randomized case treatment to a well-known quote.',
+ sampleText: 'To be or not to be, that is the question.',
+ sampleResult: 'tO Be oR NoT To bE, ThAt iS ThE QueStIoN.',
+ sampleOptions: {}
+ }
+];
+
+export default function RandomizeCase({ title }: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const computeExternal = (
+ _optionsValues: typeof initialValues,
+ input: string
+ ) => {
+ setResult(randomizeCase(input));
+ };
+
+ return (
+ }
+ resultComponent={
+
+ }
+ exampleCards={exampleCards}
+ />
+ );
}
diff --git a/src/pages/tools/string/randomize-case/meta.ts b/src/pages/tools/string/randomize-case/meta.ts
index 1dcb612..2430f3a 100644
--- a/src/pages/tools/string/randomize-case/meta.ts
+++ b/src/pages/tools/string/randomize-case/meta.ts
@@ -5,9 +5,10 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Randomize case',
path: 'randomize-case',
- icon: '',
- description: '',
- shortDescription: '',
+ icon: 'material-symbols-light:format-textdirection-l-to-r',
+ 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',
keywords: ['randomize', 'case'],
component: lazy(() => import('./index'))
});
diff --git a/src/pages/tools/string/reverse/index.tsx b/src/pages/tools/string/reverse/index.tsx
index 1e40781..b017b79 100644
--- a/src/pages/tools/string/reverse/index.tsx
+++ b/src/pages/tools/string/reverse/index.tsx
@@ -1,11 +1,119 @@
import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import React, { useState, useRef } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
+import { stringReverser } from './service';
+import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
+import ToolInputAndResult from '@components/ToolInputAndResult';
+import ToolExamples, {
+ CardExampleType
+} from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import { FormikProps } from 'formik';
+import ToolContent from '@components/ToolContent';
-const initialValues = {};
-const validationSchema = Yup.object({
- // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function Reverse() {
- return Lorem ipsum;
+const initialValues = {
+ multiLine: true,
+ emptyItems: false,
+ trim: false
+};
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Simple Text Reversal',
+ description:
+ 'Reverses each character in the text. Perfect for creating mirror text.',
+ sampleText: 'Hello World',
+ sampleResult: 'dlroW olleH',
+ sampleOptions: {
+ ...initialValues,
+ multiLine: false
+ }
+ },
+ {
+ title: 'Multi-line Reversal',
+ description:
+ 'Reverses each line independently while preserving the line breaks.',
+ sampleText: 'First line\nSecond line\nThird line',
+ sampleResult: 'enil tsriF\nenil dnoceS\nenil drihT',
+ sampleOptions: {
+ ...initialValues,
+ multiLine: true
+ }
+ },
+ {
+ title: 'Clean Reversed Text',
+ description:
+ 'Trims whitespace and skips empty lines before reversing the text.',
+ sampleText: ' Spaces removed \n\nEmpty line skipped',
+ sampleResult: 'devomer secapS\ndeppiks enil ytpmE',
+ sampleOptions: {
+ ...initialValues,
+ multiLine: true,
+ emptyItems: true,
+ trim: true
+ }
+ }
+];
+
+export default function Reverse({ title }: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const computeExternal = (
+ optionsValues: typeof initialValues,
+ input: string
+ ) => {
+ const { multiLine, emptyItems, trim } = optionsValues;
+ setResult(stringReverser(input, multiLine, emptyItems, trim));
+ };
+
+ const getGroups: GetGroupsType = ({
+ values,
+ updateField
+ }) => [
+ {
+ title: 'Reversal options',
+ component: [
+ updateField('multiLine', val)}
+ />,
+ updateField('emptyItems', val)}
+ />,
+ updateField('trim', val)}
+ />
+ ]
+ }
+ ];
+
+ return (
+ }
+ resultComponent={
+
+ }
+ exampleCards={exampleCards}
+ />
+ );
}
diff --git a/src/pages/tools/string/reverse/meta.ts b/src/pages/tools/string/reverse/meta.ts
index e5a0097..bd5f192 100644
--- a/src/pages/tools/string/reverse/meta.ts
+++ b/src/pages/tools/string/reverse/meta.ts
@@ -4,7 +4,7 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Reverse',
path: 'reverse',
- icon: '',
+ icon: 'material-symbols-light:swap-horiz',
description:
"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',
diff --git a/src/pages/tools/string/split/meta.ts b/src/pages/tools/string/split/meta.ts
index 1cd519b..d6ad595 100644
--- a/src/pages/tools/string/split/meta.ts
+++ b/src/pages/tools/string/split/meta.ts
@@ -1,6 +1,5 @@
import { defineTool } from '@tools/defineTool';
import { lazy } from 'react';
-import image from '@assets/text.png';
export const tool = defineTool('string', {
path: 'split',
@@ -9,6 +8,7 @@ export const tool = defineTool('string', {
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'))
});
diff --git a/src/pages/tools/string/uppercase/index.tsx b/src/pages/tools/string/uppercase/index.tsx
index c9ee21f..e234cda 100644
--- a/src/pages/tools/string/uppercase/index.tsx
+++ b/src/pages/tools/string/uppercase/index.tsx
@@ -1,11 +1,63 @@
-import { Box } from '@mui/material';
-import React from 'react';
-import * as Yup from 'yup';
+import React, { useState } from 'react';
+import ToolTextInput from '@components/input/ToolTextInput';
+import ToolTextResult from '@components/result/ToolTextResult';
+import { UppercaseInput } from './service';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import { ToolComponentProps } from '@tools/defineTool';
+import ToolContent from '@components/ToolContent';
const initialValues = {};
-const validationSchema = Yup.object({
- // splitSeparator: Yup.string().required('The separator is required')
-});
-export default function Uppercase() {
- return Lorem ipsum;
+
+const exampleCards: CardExampleType[] = [
+ {
+ title: 'Convert Text to Uppercase',
+ description: 'This example transforms any text to ALL UPPERCASE format.',
+ sampleText: 'The quick brown fox jumps over the lazy dog.',
+ sampleResult: 'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.',
+ sampleOptions: {}
+ },
+ {
+ title: 'Uppercase Code',
+ description:
+ 'Convert code to uppercase format. Note that this is for display only and would not maintain code functionality.',
+ sampleText: 'function example() { return "hello world"; }',
+ sampleResult: 'FUNCTION EXAMPLE() { RETURN "HELLO WORLD"; }',
+ sampleOptions: {}
+ },
+ {
+ title: 'Mixed Case to Uppercase',
+ description:
+ 'Transform text with mixed casing to consistent all uppercase format.',
+ sampleText: 'ThIs Is MiXeD CaSe TeXt!',
+ sampleResult: 'THIS IS MIXED CASE TEXT!',
+ sampleOptions: {}
+ }
+];
+
+export default function Uppercase({ title }: ToolComponentProps) {
+ const [input, setInput] = useState('');
+ const [result, setResult] = useState('');
+
+ const computeExternal = (
+ _optionsValues: typeof initialValues,
+ input: string
+ ) => {
+ setResult(UppercaseInput(input));
+ };
+
+ return (
+ }
+ resultComponent={
+
+ }
+ exampleCards={exampleCards}
+ />
+ );
}
diff --git a/src/pages/tools/string/uppercase/meta.ts b/src/pages/tools/string/uppercase/meta.ts
index 313e587..30371bd 100644
--- a/src/pages/tools/string/uppercase/meta.ts
+++ b/src/pages/tools/string/uppercase/meta.ts
@@ -4,8 +4,9 @@ import { lazy } from 'react';
export const tool = defineTool('string', {
name: 'Uppercase',
path: 'uppercase',
- icon: '',
- 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.",
+ icon: 'material-symbols-light:text-fields',
+ 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',
keywords: ['uppercase'],
component: lazy(() => import('./index'))
diff --git a/src/tools/defineTool.tsx b/src/tools/defineTool.tsx
index fbf58ac..98bcfff 100644
--- a/src/tools/defineTool.tsx
+++ b/src/tools/defineTool.tsx
@@ -10,6 +10,7 @@ interface ToolOptions {
name: string;
description: string;
shortDescription: string;
+ longDescription?: string;
}
export type ToolCategory =
@@ -33,7 +34,8 @@ export interface DefinedTool {
}
export interface ToolComponentProps {
- title?: any;
+ title: string;
+ longDescription?: string;
}
export const defineTool = (
@@ -47,7 +49,8 @@ export const defineTool = (
description,
keywords,
component,
- shortDescription
+ shortDescription,
+ longDescription
} = options;
const Component = component;
return {
@@ -66,7 +69,7 @@ export const defineTool = (
icon={icon}
type={basePath}
>
-
+
);
}