shishantbiswas/JustAnime
1
0
Fork 0
mirror of https://github.com/JustAnimeCore/JustAnime.git synced 2026-04-18 06:11:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

fixed navbar

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-27 14:42:05 +05:30
parent ef8f075689
commit 7166ff2cb7
3 changed files with 136 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/suggestion/Suggestion.jsx
View File

@@ -4,7 +4,7 @@ import BouncingLoader from "../ui/bouncingloader/Bouncingloader";
import { FaChevronRight } from "react-icons/fa";
import { Link } from "react-router-dom";
function Suggestion({ keyword, className }) {
function Suggestion({ keyword, className, onSuggestionClick }) {
const [suggestion, setSuggestion] = useState([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
@@ -31,32 +31,36 @@ function Suggestion({ keyword, className }) {
return (
<div
className={`bg-[#2d2b44] ${className} flex ${
loading ? "justify-center py-7" : "justify-start"
} ${!suggestion ? "p-3" : "justify-start"} items-center`}
style={{ boxShadow: "0 20px 20px rgba(0, 0, 0, .3)" }}
className={`bg-zinc-900 ${className} flex ${
loading ? "justify-center py-4" : "justify-start"
} ${!suggestion ? "p-2" : "justify-start"} items-center rounded-lg`}
style={{
boxShadow: "0 8px 32px rgba(0, 0, 0, 0.2)",
border: "1px solid rgba(255, 255, 255, 0.05)"
}}
>
{loading ? (
<BouncingLoader />
) : error && !suggestion ? (
<div>Error loading suggestions</div>
<div className="text-gray-400 p-3">Error loading suggestions</div>
) : suggestion && hasFetched ? (
<div className="w-full flex flex-col pt-2 overflow-y-auto">
<div className="w-full flex flex-col pt-1 overflow-y-auto">
{suggestion.map((item, index) => (
<Link
to={`/${item.id}`}
key={index}
className="group py-2 flex items-start gap-x-3 hover:bg-[#3c3a5e] cursor-pointer px-[10px]"
onClick={onSuggestionClick}
className="group py-2 flex items-start gap-x-3 hover:bg-zinc-800 transition-all duration-200 cursor-pointer px-3"
style={{
borderBottom:
index === suggestion.length - 1
? "none"
: "1px dashed rgba(255, 255, 255, .075)",
: "1px solid rgba(255, 255, 255, 0.05)",
}}
>
<img
src={`${item.poster}`}
className="w-[50px] h-[75px] flex-shrink-0 object-cover"
className="w-[45px] h-[65px] flex-shrink-0 object-cover rounded-md shadow-lg"
alt=""
onError={(e) => {
e.target.src = "https://i.postimg.cc/HnHKvHpz/no-avatar.jpg";
@@ -64,26 +68,26 @@ function Suggestion({ keyword, className }) {
/>
<div className="flex flex-col gap-y-[2px]">
{item?.title && (
<h1 className="line-clamp-1 leading-5 font-bold text-[15px] group-hover:text-[#ffbade]">
<h1 className="line-clamp-1 leading-5 font-semibold text-[14px] text-gray-100 group-hover:text-white">
{item.title || "N/A"}
</h1>
)}
{item?.japanese_title && (
<h1 className="line-clamp-1 leading-5 text-[13px] font-light text-[#aaaaaa]">
<h1 className="line-clamp-1 leading-4 text-[12px] font-normal text-gray-400">
{item.japanese_title || "N/A"}
</h1>
)}
{(item?.releaseDate || item?.showType || item?.duration) && (
<div className="flex gap-x-[5px] items-center w-full justify-start mt-[4px]">
<p className="leading-5 text-[13px] font-light text-[#aaaaaa]">
<div className="flex gap-x-2 items-center w-full justify-start mt-[2px]">
<p className="leading-4 text-[12px] font-normal text-gray-400">
{item.releaseDate || "N/A"}
</p>
<span className="dot"></span>
<p className="leading-5 text-[13px] font-medium group-hover:text-[#ffbade]">
<span className="w-1 h-1 rounded-full bg-gray-600"></span>
<p className="leading-4 text-[12px] font-medium text-gray-300 group-hover:text-white">
{item.showType || "N/A"}
</p>
<span className="dot"></span>
<p className="leading-5 text-[13px] font-light text-[#aaaaaa]">
<span className="w-1 h-1 rounded-full bg-gray-600"></span>
<p className="leading-4 text-[12px] font-normal text-gray-400">
{item.duration || "N/A"}
</p>
</div>
@@ -93,20 +97,21 @@ function Suggestion({ keyword, className }) {
))}
{!loading && hasFetched && (
<Link
className="w-full flex py-4 justify-center items-center bg-[#ffbade]"
className="w-full flex py-2.5 justify-center items-center bg-zinc-800 hover:bg-zinc-700 transition-all duration-200 rounded-b-lg"
to={`/search?keyword=${encodeURIComponent(keyword)}`}
onClick={onSuggestionClick}
>
<div className="flex w-fit items-center gap-x-2">
<p className="text-[17px] font-light text-black">
<p className="text-[14px] font-medium text-gray-200">
View all results
</p>
<FaChevronRight className="text-black text-[12px] font-black mt-[2px]" />
<FaChevronRight className="text-gray-200 text-[11px] mt-[1px]" />
</div>
</Link>
)}
</div>
) : hasFetched ? (
<p className="text-[17px]">No results found!</p>
<p className="text-gray-300 p-3">No results found!</p>
) : null}
</div>
);