feat: list reverse example

src/pages/tools/list/reverse/index.tsx

@@ -7,12 +7,15 @@ import { reverseList, SplitOperatorType } from './service';
 import ToolInputAndResult from '@components/ToolInputAndResult';
 import SimpleRadio from '@components/options/SimpleRadio';
 import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import { CardExampleType } from '@components/examples/ToolExamples';
+import ToolInfo from '@components/ToolInfo';
 
 const initialValues = {
   splitOperatorType: 'symbol' as SplitOperatorType,
   splitSeparator: ',',
   joinSeparator: '\\n'
 };
+type InitialValuesType = typeof initialValues;
 const splitOperators: {
   title: string;
   description: string;
@@ -30,6 +33,83 @@ const splitOperators: {
   }
 ];
 
+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() {
   const [input, setInput] = useState<string>('');
   const [result, setResult] = useState<string>('');
@@ -100,6 +180,10 @@ export default function Reverse() {
         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!"
+        />
     </Box>
   );
 }

src/pages/tools/list/reverse/meta.ts

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