Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui improved issue #234 #235

Merged
merged 7 commits into from
Jul 31, 2024
Merged

ui improved issue #234 #235

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
b0f0bcf
resource page added with few free resource list
devvsakib Jul 30, 2024
f7667ec
vercel deploy issue fix
devvsakib Jul 30, 2024
2492c6a
Merge branch 'main' of github.com:devvsakib/github-error-solve into r…
devvsakib Jul 30, 2024
0e08c2d
merged updated code
devvsakib Jul 31, 2024
c206451
card color issue fixed
devvsakib Jul 31, 2024
4457f0a
ui improved issue #234
devvsakib Jul 31, 2024
5692ebf
merge
devvsakib Jul 31, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Error/Error.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
9 changes: 5 additions & 4 deletions src/components/Error/ErrorCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" />

Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/components/Header/Header.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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={"/"}>
Expand Down
137 changes: 57 additions & 80 deletions src/components/Search/SearchInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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",
Expand All @@ -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
Expand All @@ -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 >
);
}
Expand Down