Add string length tool

pages/tools/index.tsx

@@ -28,28 +28,37 @@ const tools = [
     title: 'XML to JSON converter',
     description:
       'Convert your data from XML to JSON and back and verify their validity',
-    links: [{ src: '/tools/xml-to-json', text: 'Convert' }],
+    links: [{ src: '/tools/xml-to-json/', text: 'Convert' }],
     imageSrc: '/images/illustrations/xml-to-json.svg'
   },
   {
     title: 'Base64 encoder/decoder',
     description: 'Encode or decode your data to/from the Base64 format',
-    links: [{ src: '/tools/base64-encode-decode', text: 'Encode/decode' }],
+    links: [{ src: '/tools/base64-encode-decode/', text: 'Encode/decode' }],
     imageSrc: '/images/illustrations/base64-encode-decode.svg'
   },
   {
     title: 'JSON to YAML converter',
     description:
       'Convert your data from JSON to YAML and back and verify their validity',
-    links: [{ src: '/tools/json-to-yaml', text: 'Convert' }],
+    links: [{ src: '/tools/json-to-yaml/', text: 'Convert' }],
     imageSrc: '/images/illustrations/json-to-yaml.svg'
   },
   {
     title: 'JSONPath and object-path online evaluator',
     description:
       'Extract values from JSON data using JSONPath or object-path syntaxes',
-    links: [{ src: '/tools/json-object-path-evaluator', text: 'Extract data' }],
+    links: [
+      { src: '/tools/json-object-path-evaluator/', text: 'Extract data' }
+    ],
     imageSrc: '/images/illustrations/json-path-evaluator.svg'
+  },
+  {
+    title: 'String length and word counter',
+    description:
+      'Count the number of characters, words, and lines in your text',
+    links: [{ src: '/tools/string-length-word-counter/', text: 'Count' }],
+    imageSrc: '/images/illustrations/string-length-word-counter.svg'
   }
 ];
 

pages/tools/string-length-word-counter.tsx

@@ -0,0 +1,76 @@
+import { FunctionComponent, useState } from 'react';
+import TextEditor from '../../components/editors/text-editor';
+import Hero from '../../components/hero';
+import Meta from '../../components/meta';
+import Layout from '../../layout/layout';
+
+const StringLengthCounter: FunctionComponent = function () {
+  const [stats, setStats] = useState({
+    length: 14,
+    words: 2,
+    lines: 1
+  });
+
+  return (
+    <Layout footerBanner='download'>
+      <Meta
+        title={'String length and word counter'}
+        description='Count the number of characters, words, and lines in your text with this online tool. Useful for social media posts, blog articles, or academic papers.'
+      />
+      <Hero
+        title='<span class="text-primary">String length</span> and word counter'
+        subtitle='Count the number of characters, words, and lines in your text with this online tool.'
+      />
+      <section className='pb-5 pb-lg-10'>
+        <div className='container'>
+          <div className='d-flex mb-4 justify-content-center'>
+            <div className='pe-5'>
+              <p className='text-gray-700 mb-0'>Length</p>
+              <h3 className='mb-0'>{stats.length}</h3>
+            </div>
+            <div className='border-start border-gray-300'></div>
+            <div className='px-5'>
+              <p className='text-gray-700 mb-0'>Words</p>{' '}
+              <h3 className='mb-0'>{stats.words}</h3>
+            </div>
+            <div className='border-start border-gray-300'></div>
+            <div className='ps-5'>
+              <p className='text-gray-700 mb-0'>Lines</p>{' '}
+              <h3 className='mb-0'>{stats.lines}</h3>
+            </div>
+          </div>
+          <TextEditor
+            value={'Example string'}
+            onValueChange={(value) => {
+              setStats({
+                length: value.length,
+                words: value.trim().split(/\s+/).length,
+                lines: value.split(/\n|\r\n/).length
+              });
+            }}
+          />
+        </div>
+      </section>
+
+      <section className='pb-5 pb-lg-10'>
+        <div className='container'>
+          <div className='row'>
+            <div className='col-12'>
+              <h3 className='mt-6 fw-medium'>About this tool</h3>
+              <p>
+                This tool allows you to count the number of characters, words,
+                and lines in your text. It is useful for checking the length of
+                your content, such as for social media posts, blog articles, or
+                academic papers. It also helps you to identify the number of
+                words and lines in your text, which can be useful for writing
+                essays, reports, or other documents.
+              </p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </Layout>
+  );
+};
+
+export default StringLengthCounter;