ui improved issue #234

devvsakib · Jul 31, 2024 · 4457f0a · 4457f0a
1 parent c206451
commit 4457f0a
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 86 deletions.
diff --git a/src/components/Error/Error.jsx b/src/components/Error/Error.jsx
@@ -38,7 +38,7 @@ const Error = ({ search, type }) => {
           }}
         ></Toaster>
       </div>
-      <section className="mx-4 md:w-5/6 my-12 grid grid-cols-12 px-5 md:px-0 justify-center gap-8 md:mx-auto ">
+      <section className="mx-4 md:w-5/6 my-12 grid  px-5 md:px-0 justify-center gap-2 md:mx-auto ">
         {filteredErrorByType.length === 0 ? (
           <div className="col-span-12">
             <h1 className="text-center text-2xl text-gray-500 mx-auto">

diff --git a/src/components/Error/ErrorCard.jsx b/src/components/Error/ErrorCard.jsx
@@ -18,11 +18,12 @@ function ErrorCard({ error }) {
   return (
     <div
       id="main-div"
-      className={borderColor}
+      className={borderColor + " relative"}
     >
       <h3 className="title">{error.title}</h3>
-
-      <ErrorType type={error.type} />
+      <div className="absolute h-full -right-2 -top-2">
+        <ErrorType type={error.type} />
+      </div>
 
       <div className="bg-primary w-full h-[2px] my-4" />
 
@@ -44,7 +45,7 @@ function ErrorCard({ error }) {
       </div>
 
       <button
-        className="flex mt-8 items-center gap-2 px-3 py-2 border border-gray rounded-lg hover:border-primary hover:text-primary"
+        className="flex mt-2 items-center gap-2 px-3 py-2 border border-white/40 rounded-lg hover:border-primary hover:text-primary"
         onClick={() => setOpenModal((prev) => !prev)}
       >
         <span className="text-xs">Solution</span>

diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
@@ -50,7 +50,7 @@ function Header({notice }) {
   ];
 
   return (
-    <header className="p-4 shadow-lg backdrop-blur-sm  z-50">
+    <header className="p-4 shadow-lg backdrop-blur-sm  z-40">
       <div className="w-full md:w-5/6 mx-auto flex flex-row md:flex-row justify-between items-center">
         {/* Logo */}
         <Link to={"/"}>

diff --git a/src/components/Search/SearchInput.jsx b/src/components/Search/SearchInput.jsx
@@ -1,7 +1,12 @@
-import React, { useState } from "react";
-import { MdSearch, MdClear } from "react-icons/md";
+import React, { useEffect, useState } from "react";
+import { MdSearch, MdClear, MdCancel, MdCancelPresentation } from "react-icons/md";
 import { motion, AnimatePresence } from "framer-motion";
 import "./css/style.css";
+import useWindowsize from "../../hooks/useWindowsize";
+import { FaFilter } from "react-icons/fa";
+import { RxCross2 } from "react-icons/rx";
+import { CheckCircleOutlined } from "@ant-design/icons";
+
 const errorType = [
   "All",
   "push",
@@ -12,18 +17,35 @@ const errorType = [
   "branch",
   "cmd",
 ];
-import useWindowsize from "../../hooks/useWindowsize";
 
 function SearchInput({ search, setSearch, setType }) {
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState(false);
   const { width } = useWindowsize();
+  const [scrolling, setScrolling] = useState(false);
   const [selectedTag, setSelectedTag] = useState("All");
 
+  useEffect(() => {
+    const handleScroll = () => {
+      if (window.scrollY > 100) {
+        setScrolling(true);
+      } else {
+        setScrolling(false);
+      }
+    };
+
+    window.addEventListener("scroll", handleScroll);
+
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
   return (
-    <div className="flex flex-col mx-auto mt-12 items-center gap-4 py-3 px-6 rounded-lg w-11/12 md:w-5/6">
+    <div className={`flex mx-auto mt-12 justify-center items-center gap-4 py-3 px-6 rounded-lg md:w-5/6
+      sticky top-0 z-40 transition-all ${scrolling && "backdrop-blur-[1.5rem] saturate-50"}`}>
       <form
         onSubmit={(e) => e.preventDefault()}
-        className="flex mx-auto mt-12 items-center border border-zinc-300 gap-4 py-3 px-6 rounded-lg bg-white w-11/12 md:w-5/6"
+        className="flex items-center border border-primary gap-4 py-2 px-6 rounded-lg w-11/12 md:w-4/6"
       >
         <MdSearch className="text-gray text-2xl" />
         <input
@@ -44,94 +66,49 @@ function SearchInput({ search, setSearch, setType }) {
           <MdClear className="text-gray text-xl" />
         </button>
       </form>
-      <div className="types mt-4">
-        {width > 768 ? (
+      <div className={"" + selectedTag !== "All" && "text-green-400"}>
+        <FaFilter
+          onClick={e => setOpen(!open)}
+          className={"text-xl !cursor-pointer"}
+        />
+      </div>
+      {
+        open &&
+        <div className="h-dvh bg-dark fixed top-0 !-right-[0] w-[60vw] md:w-[40vw] px-5 z-[9999]">
+          <RxCross2 onClick={e => setOpen(!open)} className="ml-auto mt-5 text-2xl cursor-pointer" />
           <ul
-            className={`flex flex-col sm:flex-row mx-auto mt-2 border border-zinc-300 items-start gap-4 py-3 px-6 rounded-lg bg-white w-full md:w-12/12  md:w-auto`}
+            className={`grid mx-auto items-start gap-4 py-3 px-6 rounded-lg w-full md:w-12/12  md:w-auto mt-20`}
           >
             {errorType.map((item, i) => (
               <li
                 key={i}
-                className={`${item === "add"
-                    ? "bg-add"
-                    : item === "commit"
-                      ? "bg-commit"
-                      : item === "merge"
-                        ? "bg-merge"
-                        : item === "push"
-                          ? "bg-push"
-                          : item === "cmd"
-                            ? "bg-cmd"
-                            : item === "branch"
-                              ? "bg-branch"
-                              : "bg-default"
-                  } ${selectedTag === item ? "ring-4 ring-red-500" : ""
-                  } w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer`}
+                className={`w-full md:w-auto rounded-md capitalize text-white font-bold py-1 px-3 cursor-pointer flex items-center gap-5`}
                 onClick={() => {
                   setSelectedTag(item);
                   setType(item);
+                  setOpen(false)
                 }}
               >
+                {selectedTag && selectedTag == item && <CheckCircleOutlined className={`${item === "add"
+                  ? "text-add"
+                  : item === "commit"
+                    ? "text-commit"
+                    : item === "merge"
+                      ? "text-merge"
+                      : item === "push"
+                        ? "text-push"
+                        : item === "cmd"
+                          ? "text-cmd"
+                          : item === "branch"
+                            ? "text-branch"
+                            : "text-default"
+                  } filter brightness-200`} />}
                 {item}
               </li>
             ))}
           </ul>
-        ) : (
-          <div className="text-center">
-            <button
-              className="bg-white py-3 pt-4 px-6 rounded-lg text-left text-black font-normal"
-              onClick={() => {
-                setOpen(!open);
-              }}
-            >
-              Filter By Type
-            </button>
-            <AnimatePresence>
-              {!open && (
-                <motion.div
-                  initial={{ opacity: 0 }}
-                  animate={{ opacity: 1 }}
-                  exit={{ opacity: 0 }}
-                  transition={{ duration: 0.5 }}
-                >
-                  <ul
-                    className={`animate flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 pt-4 px-6 rounded-lg bg-white backdrop-blur-md w-[60vw] md:w-auto text-left ${open ? "hidden" : "block"
-                      }`}
-                  >
-                    {errorType.map((item, i) => (
-                      <li
-                        key={i}
-                        className={`${item === "add"
-                          ? "bg-[#4024e0]"
-                          : item === "commit"
-                            ? "bg-[#1a5ba5]"
-                            : item === "merge"
-                              ? "bg-merge"
-                              : item === "push"
-                                ? "bg-push"
-                                : item === "cmd"
-                                  ? "bg-[#40f058a8]"
-                                  : item === "branch"
-                                    ? "bg-branch"
-                                    : "bg-default"
-                          } ${selectedTag === item ? "ring-4 ring-red-500" : ""
-                          } w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
-                        onClick={() => {
-                          setSelectedTag(item);
-                          setType(item);
-                          setOpen(!open);
-                        }}
-                      >
-                        {item}
-                      </li>
-                    ))}
-                  </ul>
-                </motion.div>
-              )}
-            </AnimatePresence>
-          </div>
-        )}
-      </div>
+        </div>
+      }
     </div >
   );
 }