Merge pull request #62 from safil-badarudeen/readMore/less_button

 showMore/less

Author: devvsakib

src/components/Error/Error.jsx

@@ -3,29 +3,34 @@ import ErrorCard from "./ErrorCard";
 import { errors } from "../../data/error.json";
 
 const Error = ({ search, type }) => {
-    const [error, setError] = useState([])
-    useEffect(() => {
-        setError(errors)
-    }, [])
-
-    const filteredError = error.filter((error) => {
-        return ((error.title.toLowerCase().includes(search.toLowerCase()) || (error.description.toLowerCase().includes(search.toLowerCase())) || (error.type.toLowerCase().includes(search.toLowerCase()))))
-    })
-
-    const filteredErrorByType = filteredError.filter((error) => {
-        return (error.type.toLowerCase().includes(type.toLowerCase()))
-    })
-
+  const [error, setError] = useState([]);
+  useEffect(() => {
+    setError(errors);
+  }, []);
 
+  const filteredError = error.filter((error) => {
     return (
-        <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 justify-center gap-8 md:mx-auto">
-            {
-                (filteredErrorByType.length === 0 ? <h1 className="text-center text-2xl text-gray-500">No Error Found</h1> : filteredErrorByType.map((error, idx) => (
-                    <ErrorCard key={idx} error={error} />
-                )))
-            }
-        </section>
+      error.title.toLowerCase().includes(search.toLowerCase()) ||
+      error.description.toLowerCase().includes(search.toLowerCase()) ||
+      error.type.toLowerCase().includes(search.toLowerCase())
     );
+  });
+
+  const filteredErrorByType = filteredError.filter((error) => {
+    return error.type.toLowerCase().includes(type.toLowerCase());
+  });
+
+  return (
+    <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 justify-center gap-8 md:mx-auto">
+      {filteredErrorByType.length === 0 ? (
+        <h1 className="text-center text-2xl text-gray-500">No Error Found</h1>
+      ) : (
+        filteredErrorByType.map((error, idx) => (
+          <ErrorCard key={idx} error={error} />
+        ))
+      )}
+    </section>
+  );
 };
 
 export default Error;

src/components/Error/ErrorCard.jsx

@@ -4,8 +4,10 @@ import ErrorSolutions from "./ErrorSolutions";
 import ErrorType from "./ErrorType";
 
 function ErrorCard({ error }) {
+  
   const [showSolution, setShowSolution] = useState(false);
   const [errorTypeColor, setErrorTypeColor] = useState('#7e1aa5');
+  const [readMore,setReadMore]=useState(false);
   useEffect(() => {
     if (error.type == "add") {
       return setErrorTypeColor("#4024e0");
@@ -50,9 +52,13 @@ function ErrorCard({ error }) {
       {showSolution ? (
         <ErrorSolutions solutions={error.solutions} />
       ) : (
-        <p className="text-sm text-gray line-clamp-3 leading-relaxed">
-          {error.description}
+        <div className="h-fit">
+        <p className="text-sm text-gray line-clamp-11 leading-relaxed">
+          {readMore ? error.description : error.description.substring(0,100)}
+          {error.description.length > 100 ?<button onClick={()=>{setReadMore(!readMore)}}>{readMore ? '...show less': '...show more'} </button>:''}
         </p>
+        
+        </div>
       )}
 
       <button