search functionality added issue #11

src/App.jsx

@@ -4,14 +4,20 @@ import Error from './components/Error/Error'
 import Header from './components/Header/Header'
 import SearchInput from './components/Search/SearchInput'
 function App() {
+  const [search, setSearch] = useState('')
 
   return (
     <>
       <Header
         notice={"Under Constraction"}
       />
-      <SearchInput />
-      <Error />
+      <SearchInput
+        search={search}
+        setSearch={setSearch}
+      />
+      <Error 
+        search={search}
+      />
     </>
   )
 }

src/components/Error/Error.jsx

@@ -1,15 +1,24 @@
+import { useState, useEffect } from 'react'
 import './css/style.css'
 import ErrorCard from './ErrorCard'
-import { errors } from  '../../data/error.json'
+import { errors } from '../../data/error.json'
+
+const Error = ({ search }) => {
+    const [error, setError] = useState([])
+    useEffect(() => {
+        setError(errors)
+    }, [])
+
+    const filteredError = error.filter((error) => {
+        return error.title.toLowerCase().includes(search.toLowerCase())
+    })
 
-const Error = () => {
     return (
         <section className="container mt-5 flex justify-center flex-wrap mx-auto px-6">
             {
-                errors.map((error, index) => (
-                    <ErrorCard key={index} title={error.title} error={error.description} type={error.type} />
+                filteredError.length === 0 ? <h1 className="text-center text-2xl text-gray-500">No Error Found</h1> : filteredError.map((error, idx) => (
+                    <ErrorCard key={idx} title={error.title} error={error.description} type={error.type} />
                 ))
-
             }
         </section>
     )

src/components/Search/SearchInput.jsx

@@ -1,8 +1,5 @@
 import React, { useState } from 'react'
-function SearchInput() {
-    const [data, setData] = useState([])
-    const [searchValue, setSearchValue] = useState('')
-    const e = e => setSearchValue(e.target.value)
+function SearchInput({ search, setSearch}) {
 
 
     return (
@@ -15,8 +12,8 @@ function SearchInput() {
                         id="searchbox"
                         className="search p-4 text-center outline-none rounded-full w-[80%] bg-slate-800"
                         placeholder="Search Error"
-                        value={searchValue}
-                        onChange={e}
+                        value={search}
+                        onChange={e=> setSearch(e.target.value)}
 
                     />
                 </form>

src/data/error.json

@@ -15,6 +15,11 @@
         "title": "! [rejected] branch -> branch (non-fast-forward)",
         "description": "Some quick example text to build on the card title and make up the bulk of the card's content.error: failed to push some refs to 'git@github.com:/reponame.git'<br /> To prevent you from losing history, non-fast-forward updates were rejected Merge the remote changes (e.g. 'git pull') before pushing again. See the 'Note about fast-forwards' section of 'git push --help' for details."
       },
+      {
+        "type": "add",
+        "title": "test title",
+        "description": "Some quick example text to build on the card title and make up the bulk of the card's content.error: failed to push some refs to 'git@github.com:/reponame.git'<br /> To prevent you from losing history, non-fast-forward updates were rejected Merge the remote changes (e.g. 'git pull') before pushing again. See the 'Note about fast-forwards' section of 'git push --help' for details."
+      },
       {
         "type": "commit",
         "title": "! [rejected] branch -> branch (non-fast-forward)",