add searchbar

package.json

@@ -12,7 +12,7 @@
     "gatsby-plugin-manifest": "^2.4.14",
     "gatsby-plugin-offline": "^3.2.13",
     "gatsby-plugin-react-helmet": "^3.3.6",
-    "gatsby-plugin-sharp": "^2.6.14",
+    "gatsby-plugin-sharp": "^2.6.38",
     "gatsby-remark-prismjs": "^3.5.10",
     "gatsby-source-filesystem": "^2.3.23",
     "gatsby-transformer-remark": "^2.8.27",

src/components/skills.js

@@ -1,7 +1,8 @@
-import React from "react"
+import React, {useState} from "react"
 import { icons, categorizedSkills } from "../constants/skills"
 
 const Skills = props => {
+  const [search, update] = useState('')
   const createSkill = skill => {
     return (
       <div className="w-1/3 sm:w-1/4 my-6" key={skill}>
@@ -22,23 +23,40 @@ const Skills = props => {
           />
           <span className="tooltiptext">{skill}</span>
         </label>
-      </div>
+      </div> 
     )
   }
 
   return (
-    <div className="px-2 sm:px-6 mb-10">
-      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-2">
+    <div className="px-2 sm:px-6 mb-10 ">
+      <div className="text-xl sm:text-2xl font-bold font-title mt-2 mb-4 flex justify-between">
         Skills
+        <input 
+          type="search" 
+          onChange={(e) => update(e.target.value)} 
+          className="leading:none text-xs my-0 py-0 sm:text-xl rounded-sm border border-gray-600 hover:border-gray-900 focus:outline-none focus:shadow-outline p-2 m-2" 
+          placeholder="Search Skills" 
+        />
       </div>
-
-      {Object.keys(categorizedSkills).map(key => (
+     
+      {Object.keys(categorizedSkills)
+      .filter(key => {
+        let filtered = categorizedSkills[key].skills.filter(skill => {
+          return skill.includes(search.toLowerCase())
+        })
+        return filtered.length !== 0
+      })
+      .map(key => (
         <div key={key}>
-          <h4 className="text-sm sm:text-xl text-gray-900 text-left">
-            {categorizedSkills[key].title}
-          </h4>
+            <div className="text-sm sm:text-xl text-gray-900 text-left border-b border-r p-2 border-gray-400 m-2 rounded-sm">
+              {categorizedSkills[key].title}
+            </div>
           <div className="flex justify-start items-center flex-wrap w-full mb-6 pl-4 sm:pl-10">
-            {categorizedSkills[key].skills.map(skill => createSkill(skill))}
+            {categorizedSkills[key].skills
+            .filter(skill => {
+              return skill.includes(search.toLowerCase())
+            })
+            .map(skill => createSkill(skill))}
           </div>
         </div>
       ))}

src/constants/skills.js

@@ -6,7 +6,7 @@ const categorizedSkills = {
       "c",
       "cplusplus",
       "csharp",
-      "go",
+      "go", 
       "java",
       "javascript",
       "typescript",

src/pages/index.js

@@ -439,7 +439,7 @@ const IndexPage = () => {
       )
       setSkills(restoreDataSkills || DEFAULT_SKILLS)
     } catch (error) {
-    } finally {
+    } finally { 
       setRestore("")
     }
   }