refactor: use ToolContent

src/components/ToolContent.tsx

@@ -25,7 +25,7 @@ interface ToolContentProps<T, I> 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<T extends FormikValues, I>({
         validationSchema={validationSchema}
       />
 
-      {toolInfo && (
+      {toolInfo && toolInfo.title && toolInfo.description && (
         <ToolInfo title={toolInfo.title} description={toolInfo.description} />
       )}
 

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<InitialValuesType>[] = [
   }
 ];
 
-export default function ArithmeticSequence() {
+export default function ArithmeticSequence({ title }: ToolComponentProps) {
   const [result, setResult] = useState<string>('');
 
   return (
     <ToolContent
+      title={title}
       inputComponent={null}
       resultComponent={
         <ToolTextResult title="Generated Sequence" value={result} />

src/pages/tools/string/create-palindrome/index.tsx

@@ -1,16 +1,12 @@
-import { Box } from '@mui/material';
-import React, { useState, useRef } from 'react';
+import React, { useState } from 'react';
 import ToolTextInput from '@components/input/ToolTextInput';
 import ToolTextResult from '@components/result/ToolTextResult';
-import ToolOptions, { GetGroupsType } from '@components/options/ToolOptions';
+import { GetGroupsType } from '@components/options/ToolOptions';
 import { createPalindromeList } from './service';
 import CheckboxWithDesc from '@components/options/CheckboxWithDesc';
-import ToolInputAndResult from '@components/ToolInputAndResult';
-import ToolExamples, {
-  CardExampleType
-} from '@components/examples/ToolExamples';
+import { CardExampleType } from '@components/examples/ToolExamples';
 import { ToolComponentProps } from '@tools/defineTool';
-import { FormikProps } from 'formik';
+import ToolContent from '@components/ToolContent';
 
 const initialValues = {
   lastChar: true,
@@ -53,10 +49,12 @@ const exampleCards: CardExampleType<typeof initialValues>[] = [
   }
 ];
 
-export default function CreatePalindrome({ title }: ToolComponentProps) {
+export default function CreatePalindrome({
+  title,
+  longDescription
+}: ToolComponentProps) {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
-  const formRef = useRef<FormikProps<typeof initialValues>>(null);
 
   const computeExternal = (
     optionsValues: typeof initialValues,
@@ -92,24 +90,24 @@ export default function CreatePalindrome({ title }: ToolComponentProps) {
   ];
 
   return (
-    <Box>
-      <ToolInputAndResult
-        input={<ToolTextInput value={input} onChange={setInput} />}
-        result={<ToolTextResult title={'Palindrome text'} value={result} />}
-      />
-      <ToolOptions
-        compute={computeExternal}
-        getGroups={getGroups}
-        initialValues={initialValues}
-        input={input}
-      />
-      <ToolExamples
-        title={title}
-        exampleCards={exampleCards}
-        getGroups={getGroups}
-        formRef={formRef}
-        setInput={setInput}
-      />
-    </Box>
+    <ToolContent
+      title={title}
+      initialValues={initialValues}
+      getGroups={getGroups}
+      compute={computeExternal}
+      input={input}
+      setInput={setInput}
+      inputComponent={
+        <ToolTextInput title={'Input text'} value={input} onChange={setInput} />
+      }
+      resultComponent={
+        <ToolTextResult title={'Palindrome text'} value={result} />
+      }
+      toolInfo={{
+        title: 'What Is a String Palindrome Creator?',
+        description: longDescription
+      }}
+      exampleCards={exampleCards}
+    />
   );
 }

src/pages/tools/string/create-palindrome/meta.ts

@@ -9,6 +9,8 @@ export const tool = defineTool('string', {
   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'))
 });

src/pages/tools/string/extract-substring/index.tsx

@@ -138,6 +138,7 @@ export default function ExtractSubstring({ title }: ToolComponentProps) {
         getGroups={getGroups}
         initialValues={initialValues}
         input={input}
+        formRef={formRef}
       />
       <ToolExamples
         title={title}

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'))
 });

src/tools/defineTool.tsx

@@ -10,6 +10,7 @@ interface ToolOptions {
   name: string;
   description: string;
   shortDescription: string;
+  longDescription?: string;
 }
 
 export type ToolCategory =
@@ -32,7 +33,8 @@ export interface DefinedTool {
 }
 
 export interface ToolComponentProps {
-  title?: any;
+  title: string;
+  longDescription?: string;
 }
 
 export const defineTool = (
@@ -46,7 +48,8 @@ export const defineTool = (
     description,
     keywords,
     component,
-    shortDescription
+    shortDescription,
+    longDescription
   } = options;
   const Component = component;
   return {
@@ -65,7 +68,7 @@ export const defineTool = (
           icon={icon}
           type={basePath}
         >
-          <Component title={name} />
+          <Component title={name} longDescription={longDescription} />
         </ToolLayout>
       );
     }