From 8a21e1dc7d039e4138502d9157115a83b2933bfa Mon Sep 17 00:00:00 2001
From: Guillaume <guillaume@mockoon.com>
Date: Mon, 8 Apr 2024 14:11:12 +0200
Subject: [PATCH] Add string length tool

---
 pages/tools/index.tsx                         | 17 ++++-
 pages/tools/string-length-word-counter.tsx    | 76 +++++++++++++++++++
 .../string-length-word-counter.svg            | 22 ++++++
 3 files changed, 111 insertions(+), 4 deletions(-)
 create mode 100644 pages/tools/string-length-word-counter.tsx
 create mode 100644 public/images/illustrations/string-length-word-counter.svg

diff --git a/pages/tools/index.tsx b/pages/tools/index.tsx
index 786b7cf3..39963ac7 100644
--- a/pages/tools/index.tsx
+++ b/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'
   }
 ];
 
diff --git a/pages/tools/string-length-word-counter.tsx b/pages/tools/string-length-word-counter.tsx
new file mode 100644
index 00000000..2a1814cd
--- /dev/null
+++ b/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;
diff --git a/public/images/illustrations/string-length-word-counter.svg b/public/images/illustrations/string-length-word-counter.svg
new file mode 100644
index 00000000..07c58ab8
--- /dev/null
+++ b/public/images/illustrations/string-length-word-counter.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg width="100%" height="100%" viewBox="0 0 2000 2000" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
+    <g transform="matrix(1,0,0,1,-40107,-60816)">
+        <g id="Sponsors">
+        </g>
+        <g id="string-length" transform="matrix(0.998004,0,0,0.998004,15851.5,81.4691)">
+            <rect x="24304" y="60856" width="2004" height="2004" style="fill:none;"/>
+            <g id="straighten_black_24dp.svg" transform="matrix(53.5235,0,0,53.5235,25347.8,61962.3)">
+                <g transform="matrix(1,0,0,1,-12,-12)">
+                    <rect x="0" y="0" width="24" height="24" style="fill:none;fill-rule:nonzero;"/>
+                    <g transform="matrix(1,0,0,1,0,1.5)">
+                        <path d="M21,6L3,6C1.9,6 1,6.9 1,8L1,13C1,14.1 1.9,15 3,15L21,15C22.1,15 23,14.1 23,13L23,8C23,6.9 22.1,6 21,6ZM21,13L3,13L3,8L5,8L5,10L7,10L7,8L9,8L9,10L11,10L11,8L13,8L13,10L15,10L15,8L17,8L17,10L19,10L19,8L21,8L21,13Z" style="fill:rgb(51,94,234);fill-rule:nonzero;"/>
+                    </g>
+                </g>
+            </g>
+            <g transform="matrix(0.949774,0,0,0.949774,16229.4,50131.5)">
+                <text x="8957.07px" y="12067.4px" style="font-family:'OpenSans-Bold', 'Open Sans', sans-serif;font-weight:700;font-size:269.996px;fill:rgb(55,184,135);">abcdefg...</text>
+            </g>
+        </g>
+    </g>
+</svg>