added clear button on search input + added suggestion

Author: Binu42

src/App.css

@@ -7,6 +7,15 @@
   background-color: #f8faff !important;
 }
 
+.is-active {
+  background-color: rgb(241, 238, 238) !important;
+}
+
+.navbar-end > a.navbar-item:hover {
+  color: #6c8eef !important;
+  background-color: #f8faff !important;
+}
+
 /* Hero Section */
 .space {
   background: linear-gradient(90deg, #f8faff 19px, transparent 1%) center,
@@ -154,6 +163,11 @@ ul ol {
   margin-bottom: 4px;
 }
 
+/* tag */
+.tag:hover {
+  opacity: 0.8;
+}
+
 @media (max-width: 600px) {
   .features .feature-card {
     flex-direction: column;

src/App.js

@@ -10,8 +10,9 @@ import ScrollToTopBtn from './components/ScrollToTopBtn';
 
 function App() {
   const [searchInput, setSearchInput] = useState('');
-  const handleInputChange = (e) => {
-    setSearchInput(e.target.value);
+  const handleInputChange = (value) => {
+    // console.log(value);
+    setSearchInput(value);
   };
   return (
     <div className='App'>

src/components/Category/Resources.js

@@ -1,10 +1,26 @@
 import React from 'react';
-import { Search } from 'react-feather';
+import { Search, XCircle } from 'react-feather';
 import { resources } from './resourcesData';
 import Category from './Category';
 
 const Resources = ({ searchInput, handleInputChange }) => {
+  const filters = [
+    'Design',
+    'App',
+    'Project',
+    'interview',
+    'web',
+    'Developer',
+    'Programmer',
+    'javascript',
+    'Resources',
+  ];
   var filteredResources = [];
+  React.useEffect(() => {
+    document.getElementById('clear').addEventListener('click', () => {
+      handleInputChange('');
+    });
+  });
   if (window.location.pathname === '/resources') {
     filteredResources =
       resources &&
@@ -48,24 +64,51 @@ const Resources = ({ searchInput, handleInputChange }) => {
     );
   return (
     <div className='container' style={{ marginTop: '1rem', width: '100%' }}>
-      <div className='columns' style={{ margin: 'auto' }}>
-        <div className='column is-half is-offset-one-quarter'>
-          <div className='field'>
-            <p className='control has-icons-right box-shadow-lift'>
-              <input
-                className='input'
-                type='text'
-                onChange={handleInputChange}
-                placeholder='search from resources'
-                value={searchInput}
+      <div
+        className='field has-addons has-addons-centered'
+        style={{ outline: 'none' }}
+      >
+        <p className='control has-icons-left box-shadow-lift'>
+          <input
+            className='input'
+            type='text'
+            onChange={(e) => handleInputChange(e.target.value)}
+            placeholder='search from resources'
+            value={searchInput}
+          />
+          <span className='icon is-small is-left'>
+            <Search />
+          </span>
+        </p>
+        <div class='control' id='clear'>
+          <div
+            class='button is-info'
+            disabled={searchInput.trim() === '' ? true : false}
+          >
+            <span className='icon is-small'>
+              <XCircle
+                style={searchInput.trim() === '' ? { color: '#fff' } : {}}
               />
-              <span className='icon is-small is-right'>
-                <Search />
-              </span>
-            </p>
+            </span>
           </div>
         </div>
       </div>
+      <div
+        style={{ display: 'flex', justifyContent: 'center', padding: '10px' }}
+      >
+        <div className='tags'>
+          {filters.map((filter, index) => (
+            <span
+              key={index}
+              className='tag is-primary'
+              style={{ cursor: 'pointer' }}
+              onClick={() => handleInputChange(filter)}
+            >
+              {filter}
+            </span>
+          ))}
+        </div>
+      </div>
       <Category filteredResources={filteredResources} />
     </div>
   );