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

search and a2z

Browse Source
This commit is contained in:
Tejas Panchal
2025-08-10 12:33:29 +05:30
parent 4b97ebedc8
commit a73e9881a3
2 changed files with 60 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/pages/a2z/AtoZ.jsx
View File

@@ -46,17 +46,8 @@ function AtoZ({ path }) {
return (
<div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
<ul className="flex gap-x-2 mt-[50px] items-center w-fit max-[1200px]:hidden">
<li className="flex gap-x-3 items-center">
<Link to="/home" className="text-white hover:text-[#FFBADE] text-[17px]">
Home
</Link>
<div className="dot mt-[1px] bg-white"></div>
</li>
<li className="font-light">A-Z List</li>
</ul>
<div className="flex flex-col gap-y-5 mt-6">
<h1 className="font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px]">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Sort By Letters
</h1>
<div className="flex gap-x-[7px] flex-wrap justify-start gap-y-2 max-md:justify-start">
@@ -83,8 +74,8 @@ function AtoZ({ path }) {
<Link
to={`/az-list/${linkPath}`}
key={index}
className={`text-md bg-[#373646] py-1 px-4 rounded-md font-bold hover:text-black hover:bg-[#FFBADE] hover:cursor-pointer transition-all ease-out ${
isActive ? "text-black bg-[#FFBADE]" : ""
className={`text-md bg-[#373646] py-1 px-4 rounded-md font-bold hover:text-black hover:bg-white hover:cursor-pointer transition-all ease-out ${
isActive ? "text-black bg-white" : ""
}`}
>
{item}
@@ -104,11 +95,13 @@ function AtoZ({ path }) {
cardStyle="max-[1400px]:h-[35vw]"
/>
)}
<PageSlider
page={page}
totalPages={totalPages}
handlePageChange={handlePageChange}
/>
<div className="flex justify-center w-full mt-8">
<PageSlider
page={page}
totalPages={totalPages}
handlePageChange={handlePageChange}
/>
</div>
</div>
</div>
</div>

84
src/pages/search/Search.jsx
View File

@@ -1,15 +1,11 @@
import CategoryCard from '@/src/components/categorycard/CategoryCard';
import CategoryCardLoader from '@/src/components/Loader/CategoryCard.loader';
import SidecardLoader from '@/src/components/Loader/Sidecard.loader';
import PageSlider from '@/src/components/pageslider/PageSlider';
import Sidecard from '@/src/components/sidecard/Sidecard';
import { useHomeInfo } from '@/src/context/HomeInfoContext';
import getSearch from '@/src/utils/getSearch.utils';
import { useEffect, useState } from 'react';
import { useSearchParams } from 'react-router-dom';
function Search() {
const { homeInfo, homeInfoLoading } = useHomeInfo();
const [searchParams, setSearchParams] = useSearchParams();
const keyword = searchParams.get("keyword");
const page = parseInt(searchParams.get("page"), 10) || 1;
@@ -39,38 +35,58 @@ function Search() {
const handlePageChange = (newPage) => {
setSearchParams({ keyword, page: newPage });
};
return (
<div className='w-full px-4 mt-[128px] grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10 max-custom-md:mt-[80px] max-[478px]:mt-[60px]'>
{loading ? (
<CategoryCardLoader className={"max-[478px]:mt-2"} />
) : page > totalPages ? <p className='font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px] max-[300px]:leading-6'>You came a long way, go back <br className='max-[300px]:hidden' />nothing is here</p> : searchData && searchData.length > 0 ? (
<div>
<CategoryCard
label={`Search results for: ${keyword}`}
data={searchData}
showViewMore={false}
className={"mt-0"}
/>
<PageSlider page={page} totalPages={totalPages} handlePageChange={handlePageChange} />
</div>
) : error ? <p className='font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px]'>Couldn&apos;t get search result please try again</p> : (
<h1 className='font-bold text-2xl text-[#ffbade] max-[478px]:text-[18px]'>{`Search results for: ${keyword}`}</h1>
)}
<div className="w-full flex flex-col gap-y-10">
{homeInfoLoading ? (
<SidecardLoader />
<div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="w-full flex flex-col gap-y-8 mt-6">
{loading ? (
<CategoryCardLoader className={"max-[478px]:mt-2"} />
) : page > totalPages ? (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px] max-[300px]:leading-6'>
You came a long way, go back <br className='max-[300px]:hidden' />nothing is here
</p>
</div>
) : searchData && searchData.length > 0 ? (
<div className="flex flex-col gap-y-2">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results for: {keyword}
</h1>
<CategoryCard
data={searchData}
showViewMore={false}
className="mt-0"
cardStyle="max-[1400px]:h-[35vw]"
/>
<div className="flex justify-center w-full mt-8">
<PageSlider
page={page}
totalPages={totalPages}
handlePageChange={handlePageChange}
/>
</div>
</div>
) : error ? (
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px]'>
Couldn't get search results, please try again
</p>
</div>
) : (
<>
{homeInfo?.most_popular && (
<div className="bg-[#141414] rounded-lg p-6">
<h2 className="text-xl font-semibold mb-4 text-white">Most Popular</h2>
<Sidecard
data={homeInfo.most_popular}
className="!mt-0"
/>
</div>
)}
</>
<div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Search Results
</h1>
<p className='text-white text-lg max-[478px]:text-[16px]'>
No results found for: {keyword}
</p>
</div>
)}
</div>
</div>