Skip to content

Added animation in filter menu #134

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

Merged
devvsakib merged 1 commit into from
Mar 7, 2023
Merged

Added animation in filter menu #134

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
44 changes: 44 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
"dependencies": {
"@tailwindcss/line-clamp": "^0.4.2",
"axios": "^1.2.2",
"framer-motion": "^10.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
Expand Down
187 changes: 121 additions & 66 deletions src/components/Search/SearchInput.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,76 +1,131 @@
import React, { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { MdSearch, MdClear } from "react-icons/md";
import './css/style.css'
const errorType = ["All", "push", "commit", "merge", "pull", "add", "branch"]

import useWindowsize from "../../hooks/useWindowsize";
import "./css/style.css";

function SearchInput({ search, setSearch, setType }) {
const [open, setOpen] = useState(true)
const { width } = useWindowsize();
const errorType = ["All", "push", "commit", "merge", "pull", "add", "branch"];

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">
<form
onSubmit={(e) => e.preventDefault()}
className="flex mx-auto mt-12 items-center gap-4 py-3 px-6 rounded-lg bg-white w-11/12 md:w-5/6"
>
<MdSearch className="text-gray text-2xl" />
<input
type="text"
id="searchbox"
value={search}
className="w-full text-sm md:text-base focus:outline-none placholder:font-semibold text-dark bg-transparent"
placeholder="Search for errors"
onChange={(e) => { setSearch(e.target.value); setType("") }}
/>
<button className={`focus:outline-none ${!search ? "hidden" : "block"}`} onClick={() => setSearch("")}>
<MdClear className="text-gray text-xl" />
</button>
</form>
<div className="types mt-4">
const fadeInVariant = {
hidden: {
x: -100,
opacity: 0,
transition: { duration: 0.4, ease: "easeOut" },
},
show: {
x: 0,
opacity: 1,
transition: { duration: 0.6, ease: "easeOut", type: "tween" },
},
};

{
width > 768 ? (
<ul className={`flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 px-6 rounded-lg bg-white w-full md:w-12/12 md:w-auto`}>
{
errorType.map((item, i) => (
<li
key={i}
className={`${item === "add" ? "bg-[#4024e0]" : item === "commit" ? "bg-[#1a5ba5]" : item === "merge" ? "bg-[#118d7c]" : item === "push" ? "bg-[#8d54e1]" : item === "branch" ? "bg-[#40E4F0]" : "bg-[#7e1aa5]"
}
w-full md:w-auto rounded-md text-white font-bold py-1 px-3 cursor-pointer`}
onClick={() => setType(item)}
>{item}</li>
))
}
</ul>
) : (
<div className="text-center">
<button className="bg-white py-3 pt-4 px-6 rounded-lg text-left text-black font-bold"
onClick={() => setOpen(!open)}>
Filter By Type
</button>
<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-[#118d7c]" : item === "push" ? "bg-[#8d54e1]" : item === "branch" ? "bg-[#40E4F0]" : "bg-[#7e1aa5]"
} w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
onClick={() => { setType(item); setOpen(!open) }}
>{
item
}

</li>
))
}
</ul>
</div>
)
}
function SearchInput({ search, setSearch, setType }) {
const [open, setOpen] = useState(true);
const { width } = useWindowsize();

</div>
</div >
);
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">
<form
onSubmit={(e) => e.preventDefault()}
className="flex mx-auto mt-12 items-center gap-4 py-3 px-6 rounded-lg bg-white w-11/12 md:w-5/6"
>
<MdSearch className="text-gray text-2xl" />
<input
type="text"
id="searchbox"
value={search}
className="w-full text-sm md:text-base focus:outline-none placholder:font-semibold text-dark bg-transparent"
placeholder="Search for errors"
onChange={(e) => {
setSearch(e.target.value);
setType("");
}}
/>
<button
className={`focus:outline-none ${!search ? "hidden" : "block"}`}
onClick={() => setSearch("")}
>
<MdClear className="text-gray text-xl" />
</button>
</form>
<div className="types mt-4">
{width > 768 ? (
<ul
className={`flex flex-col sm:flex-row mx-auto mt-2 items-start gap-4 py-3 px-6 rounded-lg bg-white w-full md:w-12/12 md:w-auto`}
>
{errorType.map((item, i) => (
<li
key={i}
className={`${
item === "add"
? "bg-[#4024e0]"
: item === "commit"
? "bg-[#1a5ba5]"
: item === "merge"
? "bg-[#118d7c]"
: item === "push"
? "bg-[#8d54e1]"
: item === "branch"
? "bg-[#40E4F0]"
: "bg-[#7e1aa5]"
}
w-full md:w-auto rounded-md text-white font-bold py-1 px-3 cursor-pointer`}
onClick={() => setType(item)}
>
{item}
</li>
))}
</ul>
) : (
<div className="text-center">
<button
className="bg-white py-3 pt-4 px-6 rounded-lg text-left text-black font-bold"
onClick={() => setOpen(!open)}
>
Filter By Type
</button>
<AnimatePresence>
{!open && (
<motion.ul
variants={fadeInVariant}
initial="hidden"
animate="show"
exit="hidden"
className={`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 `}
>
{errorType.map((item, i) => (
<li
key={i}
className={`${
item === "add"
? "bg-[#4024e0]"
: item === "commit"
? "bg-[#1a5ba5]"
: item === "merge"
? "bg-[#118d7c]"
: item === "push"
? "bg-[#8d54e1]"
: item === "branch"
? "bg-[#40E4F0]"
: "bg-[#7e1aa5]"
} w-full md:w-auto rounded-md text-white font-bold py-2 px-3 cursor-pointer`}
onClick={() => {
setType(item);
setOpen(!open);
}}
>
{item}
</li>
))}
</motion.ul>
)}
</AnimatePresence>
</div>
)}
</div>
</div>
);
}

export default SearchInput;