devvsakib · devvsakib · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023 · Jan 10, 2023
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-<div align='center'>
+<div align='left'>
 
 ## GitHub Error Solve
 
@@ -15,9 +15,20 @@
 ![Vite](https://img.shields.io/badge/vite-5BB4FF?style=for-the-badge&logo=vite&logoColor=FFC018)
 
 
-> Later may convert to CRA
+### How to start App
+
+<br>
+
+```console
+    npm i
+```
+
+```console
+    npm run dev
+```
+
 <br>
 
 ### Feel free to contribute. 
 Live Link![GES](https://github-error-solve.vercel.app)
-</div
+</div
diff --git a/index.html b/index.html
@@ -8,7 +8,6 @@
     <link rel="stylesheet" href="./dist/output.css">
 </head>
 <body>  
-
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
 </body>

diff --git a/src/assets/react.svg → public/assets/react.svg b/src/assets/react.svg → public/assets/react.svg
diff --git a/public/error.json b/public/error.json
diff --git a/src/App.jsx b/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}
+      />
     </>
   )
 }

diff --git a/src/components/Error/Error.jsx b/src/components/Error/Error.jsx
@@ -1,25 +1,25 @@
+import { useState, useEffect } from 'react'
 import './css/style.css'
 import ErrorCard from './ErrorCard'
+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">
-            <ErrorCard
-                title={"! [rejected] branch -> branch (non-fast-forward)"}
-                error={"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."}
-            />
-            <ErrorCard
-                title={"! [rejected] branch -> branch (non-fast-forward)"}
-                error={"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."}
-            />
-            <ErrorCard
-                title={"! [rejected] branch -> branch (non-fast-forward)"}
-                error={"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."}
-            />
-            <ErrorCard
-                title={"! [rejected] branch -> branch (non-fast-forward)"}
-                error={"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."}
-            />
+        <section className="container mt-5 flex flex-wrap justify-center  gap-4 mx-auto px-6">
+            {
+                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} solutions={error.solutions} />
+                ))
+            }
         </section>
     )
 }

diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx
@@ -1,28 +1,56 @@
-import React from 'react'
+import React, { useState } from 'react'
+
+function ErrorCard({ title, error, solutions, type }) {
+    const [show, setShow] = useState(true)
+    const [solution, setSolution] = useState(false)
 
-function ErrorCard({ title, error }) {
     return (
-        <div className="card text-dark mx-auto p-[2rem] mb-3">
-            <div className="card-header py-2">
-                <h4>Push error<span class="before:block top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 before:bg-[#7e1aa5] relative inline-block">
-                    <span class="relative text-white text-[1rem] -top-3">Git</span>
-                </span></h4>
-            </div>
+        <div className="card text-dark mx-auto p-[2rem] mb-3 relative overflow-hidden">
+            <div className={`top-0 left-0 sm:w-2 sm:h-full w-full h-2 absolute ${type === "add" ? "bg-[#4024e0]" : type === "commit" ? "bg-[#1a5ba5]" : type === "push" ? "bg-[#1a5ba5]" : "bg-[#7e1aa5]"}`}></div>
             <div className="card-body">
-                <h5 className="card-title">{title}</h5>
+                <h4 className="card-title">{title}<span className={`before:block top-2 left-2 h-4 before:absolute before:-inset-1 before:-skew-y-3 relative inline-block ${type === "add" ? "before:bg-[#4024e0]" : type === "commit" ? "before:bg-[#1a5ba5]" : type === "push" ? "before:bg-[#1a5ba5]" : "before:bg-[#7e1aa5]"}`}>
+                    <span className="relative text-white text-[1rem] -top-3">{type}</span>
+                </span></h4>
                 <hr className='border-none h-[2px] mb-2 mt-1 bg-[#5c329e]' />
-                <code className="error block sm:hidden">{
-                    error.length > 150 ? (
-                        error.slice(0, 150) + '...'
-                    ) : (
-                        error
-                    )
+                <code className={`error  ${solution ? "hidden" : "block"}`}>
+                    {
+                        error.length > 150 ? (
+                            error.slice(0, 150) + '...'
+                        ) : (
+                            error
+                        )
+
+                    }</code>
+                {/* <code className={`error  ${solution ? "hidden" : "block"} `}>{error}</code> */}
+                <div className={`${show ? "hidden" : 'visible'} mt-4`}>
+                    <p>
+                        <span className="text-purple-400">
+                            <p className="text-orange-300 text-md">{
+                                !solutions ? (
+                                    <>
+                                        <p className="text-red-400 opacity-40">No Solution Found</p>
+                                        <p className="text-gray-400 text-sm opacity-50">You can add solution and be a part of open-source projects</p>
+                                    </>
+                                ) : (
+                                    solutions.split('<').map((item, i) => (
+                                        <p key={i} className="text-sm">
+                                            {item}
+                                            <br />
+                                        </p>
+                                    )
+                                    )
+                                )
+                            }</p>
+                        </span>
+                    </p>
+
 
-                }</code>
-                <code className="error hidden sm:block">{error}</code>
+                </div>
             </div>
-            <button class="px-4 mt-4 py-1 text-sm text-purple-600 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600 focus:ring-offset-2">Solution</button>
-        </div>
+            <button
+                onClick={() => { setShow(!show); setSolution(!solution) }}
+                className="px-4 mt-4 py-1 text-sm text-purple-400 font-semibold rounded-full border border-purple-200 hover:text-white hover:bg-purple-600 hover:border-transparent focus:outline-none">Solution</button>
+        </div >
     )
 }
 

diff --git a/src/components/Search/SearchInput.jsx b/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,9 +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>
             </div>

diff --git a/src/data/error.json b/src/data/error.json
@@ -24,17 +24,23 @@
       "description": "Please commit your changes or stash them before you stwitch branches. Aborting",
       "solutions": "git add .<git commit -m \"ges\""
     },
+    {
+      "type": "merge",
+      "title": "Auto-merging path/path/filename",
+      "description": "CONFLICT (add/add): Merge conflict in path/path/filename. Automatic merge failed; fix conflicts and then commit the result.",
+      "solutions": "You have to manually solve the conflict and then: <git add .< git commit -m \"ges\""
+    },
     {
       "type": "push",
       "title": "Everything up-to-date",
-      "description": "File changed and git add . done but git push say: Everything is up-to-date.",
+      "description": "File changed and git add . done but git push say: Everything is up-to-date",
       "solutions": "git commit -m \"ges\""
     },
     {
       "type": "branch",
       "title": "Switched to branch 'main'",
       "description": "Your branch is behind 'origin/main' by 10 commits, and can be fast-forwarded.",
-      "solutions": "git commit -m \"ges\""
+      "solutions": "git pull"
     }
   ]
 }
diff --git a/src/index.css b/src/index.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,7 +8,6 @@ @@
         <link rel="stylesheet" href="./dist/output.css">
     </head>
     <body>
         <div id="root"></div>
         <script type="module" src="/src/main.jsx"></script>
     </body>
@@ Expand Down @@