Search bar (#7)

manhtai · web-flow · commit 11d1478cd2ae · 2021-07-26T19:07:18.000+07:00
* Input padding

* Smaller padding

* Search box

* Default for input &amp; textarea

* Search ok

* Clear icon
diff --git a/src/App.global.css b/src/App.global.css
@@ -6,4 +6,12 @@
   .btn {
     @apply rounded-md bg-gray-50 px-2 py-0.5 outline-none text-xs border shadow-sm active:bg-blue-500 active:text-white disabled:opacity-50;
   }
+
+  input {
+    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2;
+  }
+
+  textarea {
+    @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2;
+  }
 }
diff --git a/src/components/Main.tsx b/src/components/Main.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { NavLink, Route } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Helmet } from 'react-helmet';
@@ -14,75 +14,110 @@ import JsonFormatter from './json/JsonFormatter';
 import QRCodeReader from './qrcode/QrCodeReader';
 import RegexTester from './regex/RegexTester';
 
+const defaultRoutes = [
+  {
+    icon: <FontAwesomeIcon icon="clock" />,
+    path: '/unix-converter',
+    name: 'Unix Time Converter',
+    Component: UnixTimestamp,
+  },
+  {
+    icon: <FontAwesomeIcon icon="registered" />,
+    path: '/regex-tester',
+    name: 'Regex Tester',
+    Component: RegexTester,
+  },
+  {
+    icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
+    path: '/markdown-to-html',
+    name: 'Markdown to HTML',
+    Component: MarkdownToHtml,
+  },
+  {
+    icon: <FontAwesomeIcon icon={['fab', 'html5']} />,
+    path: '/html-preview',
+    name: 'HTML Preview',
+    Component: HtmlPreview,
+  },
+  {
+    icon: <FontAwesomeIcon icon="qrcode" />,
+    path: '/qrcode-generator',
+    name: 'QRCode Generator',
+    Component: QrCodeGenerator,
+  },
+  {
+    icon: <FontAwesomeIcon icon="camera" />,
+    path: '/qrcode-reader',
+    name: 'QRCode Reader',
+    Component: QRCodeReader,
+  },
+  {
+    icon: <FontAwesomeIcon icon="code" />,
+    path: '/base64-encoder',
+    name: 'Base64 Encoder',
+    Component: Base64,
+  },
+  {
+    icon: <FontAwesomeIcon icon="exchange-alt" />,
+    path: '/text-diff',
+    name: 'Text Diff',
+    Component: DiffText,
+  },
+  {
+    icon: <FontAwesomeIcon icon={['fab', 'js-square']} />,
+    path: '/json-formatter',
+    name: 'JSON Formatter',
+    Component: JsonFormatter,
+  },
+  {
+    icon: <FontAwesomeIcon icon="database" />,
+    path: '/sql-formatter',
+    name: 'SQL Formatter',
+    Component: SqlFormatter,
+  },
+];
+
 const Main = () => {
-  const routes = [
-    {
-      icon: <FontAwesomeIcon icon="clock" />,
-      path: '/unix-converter',
-      name: 'Unix Time Converter',
-      Component: UnixTimestamp,
-    },
-    {
-      icon: <FontAwesomeIcon icon="registered" />,
-      path: '/regex-tester',
-      name: 'Regex Tester',
-      Component: RegexTester,
-    },
-    {
-      icon: <FontAwesomeIcon icon={['fab', 'markdown']} />,
-      path: '/markdown-to-html',
-      name: 'Markdown to HTML',
-      Component: MarkdownToHtml,
-    },
-    {
-      icon: <FontAwesomeIcon icon={['fab', 'html5']} />,
-      path: '/html-preview',
-      name: 'HTML Preview',
-      Component: HtmlPreview,
-    },
-    {
-      icon: <FontAwesomeIcon icon="qrcode" />,
-      path: '/qrcode-generator',
-      name: 'QRCode Generator',
-      Component: QrCodeGenerator,
-    },
-    {
-      icon: <FontAwesomeIcon icon="camera" />,
-      path: '/qrcode-reader',
-      name: 'QRCode Reader',
-      Component: QRCodeReader,
-    },
-    {
-      icon: <FontAwesomeIcon icon="code" />,
-      path: '/base64-encoder',
-      name: 'Base64 Encoder',
-      Component: Base64,
-    },
-    {
-      icon: <FontAwesomeIcon icon="exchange-alt" />,
-      path: '/text-diff',
-      name: 'Text Diff',
-      Component: DiffText,
-    },
-    {
-      icon: <FontAwesomeIcon icon={['fab', 'js-square']} />,
-      path: '/json-formatter',
-      name: 'JSON Formatter',
-      Component: JsonFormatter,
-    },
-    {
-      icon: <FontAwesomeIcon icon="database" />,
-      path: '/sql-formatter',
-      name: 'SQL Formatter',
-      Component: SqlFormatter,
-    },
-  ];
+  const [routes, setRoutes] = useState(defaultRoutes);
+  const [search, setSearch] = useState('');
+
+  const handleSearch = (e: { target: { value: string } }) => {
+    setSearch(e.target.value);
+  };
+
+  useEffect(() => {
+    if (search.trim()) {
+      setRoutes(
+        defaultRoutes.filter(({ name }) => name.match(new RegExp(search, 'gi')))
+      );
+    } else {
+      setRoutes(defaultRoutes);
+    }
+  }, [search]);
 
   return (
     <div className="absolute inset-0 flex flex-col overflow-hidden">
       <main className="relative flex flex-1 min-h-0">
         {/* Left sidebar */}
         <nav className="flex flex-col w-1/4 overflow-x-hidden overflow-y-auto bg-gray-300">
+          {/* Search */}
+          <div className="flex items-center px-3 mx-3 mt-6 space-x-1 text-gray-400 bg-gray-200 rounded-md focus-within:text-gray-600 focus-within:ring-2 focus-within:ring-blue-500">
+            <FontAwesomeIcon icon="search" />
+            <input
+              type="text"
+              className="w-full p-1 bg-gray-200 border-none rounded-r-md focus:ring-0"
+              value={search}
+              onChange={handleSearch}
+              placeholder="Search..."
+            />
+            {search && (
+              <FontAwesomeIcon
+                icon="times-circle"
+                onClick={() => setSearch('')}
+              />
+            )}
+          </div>
+
           <div
             className="px-2 my-6"
             role="menu"
@@ -106,7 +141,7 @@ const Main = () => {
         {/* Main content */}
         <section className="relative flex flex-col w-full bg-gray-200">
           <div className="h-full px-6 my-6 overflow-x-hidden overflow-y-auto">
-            {routes.map(({ path, name, Component }) => (
+            {defaultRoutes.map(({ path, name, Component }) => (
               <Route key={path} exact path={path}>
                 <Component />
                 <Helmet>
diff --git a/src/components/base64/Base64.tsx b/src/components/base64/Base64.tsx
@@ -123,13 +123,13 @@ const Base64 = () => {
       <div className="flex flex-1 min-h-full">
         <textarea
           onChange={handleChangeInput}
-          className="flex-1 min-h-full p-4 bg-white rounded-md"
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
           value={input}
           disabled={opening}
         />
         <div className="mx-1" />
         <textarea
-          className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
+          className="flex-1 min-h-full p-2 bg-gray-100 rounded-md"
           value={output}
           readOnly
         />
diff --git a/src/components/diff/TextDiff.tsx b/src/components/diff/TextDiff.tsx
@@ -80,12 +80,12 @@ const TextDiff = () => {
         <div className="flex flex-1 min-h-full space-x-2">
           <textarea
             onChange={handleChangeLeft}
-            className="flex-1 min-h-full p-4 bg-white rounded-md"
+            className="flex-1 min-h-full p-2 bg-white rounded-md"
             value={left}
           />
           <textarea
             onChange={handleChangeRight}
-            className="flex-1 min-h-full p-4 bg-white rounded-md"
+            className="flex-1 min-h-full p-2 bg-white rounded-md"
             value={right}
           />
         </div>
@@ -116,7 +116,7 @@ const TextDiff = () => {
         </div>
 
         <section
-          className="flex-1 w-full min-h-full p-4 bg-gray-100 rounded-md"
+          className="flex-1 w-full min-h-full p-2 bg-gray-100 rounded-md"
           dangerouslySetInnerHTML={{ __html: diff }}
         />
       </section>
diff --git a/src/components/html/HtmlPreview.tsx b/src/components/html/HtmlPreview.tsx
@@ -41,12 +41,12 @@ const HtmlPreview = () => {
       <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChange}
-          className="flex-1 min-h-full p-4 bg-white rounded-md"
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
           value={html}
           disabled={opening}
         />
         <section
-          className="flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md"
+          className="flex-1 max-w-full min-h-full p-2 prose bg-gray-100 rounded-md"
           dangerouslySetInnerHTML={{ __html: html }}
         />
       </div>
diff --git a/src/components/json/JsonFormatter.tsx b/src/components/json/JsonFormatter.tsx
@@ -97,12 +97,12 @@ const JsonFormatter = () => {
       <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChangeInput}
-          className="flex-1 min-h-full p-4 bg-white rounded-md"
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
           value={input}
           disabled={opening}
         />
         <textarea
-          className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
+          className="flex-1 min-h-full p-2 bg-gray-100 rounded-md"
           value={output}
           readOnly
         />
diff --git a/src/components/markdown/MarkdownToHtml.tsx b/src/components/markdown/MarkdownToHtml.tsx
@@ -69,18 +69,18 @@ const Md2Html = () => {
       <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChange}
-          className="flex-1 min-h-full p-4 bg-white rounded-md"
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
           value={md}
           disabled={opening}
         />
         {preview ? (
           <section
-            className="flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md"
+            className="flex-1 max-w-full min-h-full p-2 prose bg-gray-100 rounded-md"
             dangerouslySetInnerHTML={{ __html: marked(md) }}
           />
         ) : (
           <textarea
-            className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
+            className="flex-1 min-h-full p-2 bg-gray-100 rounded-md"
             value={marked(md)}
             readOnly
           />
diff --git a/src/components/qrcode/QrCodeGenerator.tsx b/src/components/qrcode/QrCodeGenerator.tsx
@@ -74,10 +74,10 @@ const QRCodeGenerator = () => {
       <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChange}
-          className="flex-1 min-h-full p-4 bg-white rounded-md"
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
           value={content}
         />
-        <section className="flex items-center flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md">
+        <section className="flex items-center flex-1 max-w-full min-h-full p-2 prose bg-gray-100 rounded-md">
           {qrCode && <img src={qrCode} alt={content} />}
         </section>
       </div>
diff --git a/src/components/qrcode/QrCodeReader.tsx b/src/components/qrcode/QrCodeReader.tsx
@@ -67,13 +67,13 @@ const QRCodeReader = () => {
         </button>
       </div>
       <div className="flex flex-1 min-h-full space-x-2">
-        <section className="flex items-center flex-1 max-w-full min-h-full p-4 prose bg-gray-100 rounded-md">
+        <section className="flex items-center flex-1 max-w-full min-h-full p-2 prose bg-gray-100 rounded-md">
           {image && !image.isEmpty() && (
             <img src={image.toDataURL()} alt="QRCode" />
           )}
         </section>
         <textarea
-          className="flex-1 min-h-full p-4 bg-white rounded-md"
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
           value={content}
           readOnly
         />
diff --git a/src/components/regex/RegexTester.tsx b/src/components/regex/RegexTester.tsx
@@ -58,12 +58,12 @@ const RegexTester = () => {
           <div className="flex items-center space-x-2">
             <input
               onChange={handleChangeSearch}
-              className="flex-1 px-4 py-1 bg-white rounded-md"
+              className="flex-1 px-2 py-1 bg-white rounded-md"
               value={search}
             />
             <input
               onChange={handleChangeFlag}
-              className="w-1/12 px-4 py-1 bg-white rounded-md"
+              className="w-1/12 px-2 py-1 bg-white rounded-md"
               value={flag}
             />
           </div>
@@ -83,7 +83,7 @@ const RegexTester = () => {
           </div>
           <textarea
             onChange={handleChangeInput}
-            className="flex-1 p-4 bg-white rounded-md"
+            className="flex-1 p-2 bg-white rounded-md"
             value={input}
           />
         </section>
@@ -101,7 +101,7 @@ const RegexTester = () => {
             </span>
           </div>
           <section
-            className="flex-1 w-full p-4 whitespace-pre bg-gray-100 rounded-md"
+            className="flex-1 w-full p-2 whitespace-pre bg-gray-100 rounded-md"
             dangerouslySetInnerHTML={{ __html: output }}
           />
         </section>
diff --git a/src/components/sql/SqlFormatter.tsx b/src/components/sql/SqlFormatter.tsx
@@ -62,12 +62,12 @@ const SqlFormatter = () => {
       <div className="flex flex-1 min-h-full space-x-2">
         <textarea
           onChange={handleChangeInput}
-          className="flex-1 min-h-full p-4 bg-white rounded-md"
+          className="flex-1 min-h-full p-2 bg-white rounded-md"
           value={input}
           disabled={opening}
         />
         <textarea
-          className="flex-1 min-h-full p-4 bg-gray-100 rounded-md"
+          className="flex-1 min-h-full p-2 bg-gray-100 rounded-md"
           value={output}
           readOnly
         />
diff --git a/src/components/timestamp/UnixTimestamp.tsx b/src/components/timestamp/UnixTimestamp.tsx
diff --git a/src/helpers/fontAwesome.ts b/src/helpers/fontAwesome.ts

Original file line number	Diff line number	Diff line change
`@@ -6,4 +6,12 @@`
`6`	`6`	`.btn {`
`7`	`7`	`@apply rounded-md bg-gray-50 px-2 py-0.5 outline-none text-xs border shadow-sm active:bg-blue-500 active:text-white disabled:opacity-50;`
`8`	`8`	`}`
	`9`	`+`
	`10`	`+ input {`
	`11`	`+ @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2;`
	`12`	`+ }`
	`13`	`+`
	`14`	`+ textarea {`
	`15`	`+ @apply rounded focus:ring-blue-500 focus:outline-none focus:ring-2;`
	`16`	`+ }`
`9`	`17`	`}`