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

fixed skeletons

Browse Source
This commit is contained in:
Tejas Panchal
2025-08-10 13:01:09 +05:30
parent 11b90f5406
commit 7f86a9e8a6
11 changed files with 314 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
src/components/Loader/AnimeInfo.loader.jsx
View File

@@ -9,50 +9,125 @@ const SkeletonItems = ({ count, className }) => (
function AnimeInfoLoader() { function AnimeInfoLoader() {
return ( return (
<> <>
<div className="relative grid grid-cols-[minmax(0,75%),minmax(0,25%)] h-fit w-full overflow-hidden mt-[64px] max-[1200px]:flex max-[1200px]:flex-col max-md:mt-[50px]"> <div className="min-h-screen bg-[#0a0a0a] text-white">
<Skeleton className="absolute inset-0 w-full h-full blur-lg z-[-900] bg-gray-500" animation={false} /> <div className="relative w-full overflow-hidden mt-[74px] max-md:mt-[60px]">
<div className="flex items-start z-10 px-14 py-[70px] bg-[#252434] bg-opacity-70 gap-x-8 max-[1024px]:px-6 max-[1024px]:py-10 max-[1024px]:gap-x-4 max-[575px]:flex-col max-[575px]:items-center max-[575px]:justify-center"> {/* Main Content */}
<Skeleton className="w-[200px] h-[270px] rounded-none" /> <div className="relative z-10 container mx-auto px-3 sm:px-4 py-4 sm:py-6 lg:py-12 max-[478px]:px-2">
<div className="flex flex-col ml-4 gap-y-5 w-full max-[575px]:items-center max-[575px]:justify-center max-[575px]:mt-0"> {/* Mobile Layout */}
<ul className="flex gap-x-2 items-center w-fit max-[1200px]:hidden"> <div className="block md:hidden">
<SkeletonItems count={3} className="w-[40px] h-[15px] rounded-xl " /> <div className="flex flex-row gap-4">
</ul> {/* Poster Section */}
<div className="flex flex-col gap-y-2"> <div className="flex-shrink-0">
<SkeletonItems count={2} className="w-[50%] h-[20px] rounded-xl " /> <Skeleton className="w-[130px] xs:w-[150px] aspect-[2/3] rounded-xl" />
</div> </div>
<div className="flex gap-x-[3px]">
<SkeletonItems count={6} className="w-[30px] h-[20px] rounded-sm" /> {/* Basic Info Section */}
<div className="flex-1 min-w-0 space-y-2">
{/* Title */}
<div className="space-y-1">
<Skeleton className="h-6 w-[80%]" />
<Skeleton className="h-3 w-[60%]" />
</div> </div>
<Skeleton className="w-[150px] h-[40px] rounded-3xl mt-4" />
<div className="flex flex-col gap-y-2 mt-5 max-[575px]:hidden"> {/* Tags */}
<SkeletonItems count={3} className="w-[80%] h-[15px] rounded-3xl " /> <div className="flex flex-wrap gap-1.5">
<SkeletonItems count={4} className="w-[40px] h-[20px] rounded-md" />
</div> </div>
<div className="flex gap-x-4 items-center mt-4">
<Skeleton className="w-[60px] h-[60px] rounded-full bg-gray-500 max-[575px]:hidden" /> {/* Overview */}
<div className="flex flex-col w-fit gap-y-2"> <div className="space-y-1">
<SkeletonItems count={2} className="w-[150px] h-[10px] rounded-xl " /> <SkeletonItems count={3} className="h-3 w-full" />
</div> </div>
</div> </div>
</div> </div>
{/* Watch Button */}
<div className="mt-6">
<Skeleton className="w-full h-12 rounded-lg" />
</div> </div>
<div className="bg-[#4c4b57c3] flex items-center px-8 max-[1200px]:py-10 max-[1200px]:bg-[#363544e0] max-[575px]:p-4">
<div className="w-full flex flex-col h-fit gap-y-4"> {/* Details Section */}
<SkeletonItems count={6} className="w-full h-[15px] rounded-xl" /> <div className="mt-6 space-y-3 py-3 backdrop-blur-md bg-white/5 rounded-lg px-3">
<div className="flex gap-x-4 py-2 mt-4"> <div className="grid grid-cols-2 gap-2">
<Skeleton className="w-[50px] h-[20px] " /> <SkeletonItems count={6} className="h-4 w-[90%]" />
</div>
{/* Genres */}
<div className="pt-2 border-t border-white/10">
<Skeleton className="h-4 w-[60px] mb-2" />
<div className="flex flex-wrap gap-1"> <div className="flex flex-wrap gap-1">
<SkeletonItems count={4} className="w-[30px] h-[20px] rounded-sm bg-gray-500" /> <SkeletonItems count={6} className="w-[60px] h-[22px] rounded-md" />
</div> </div>
</div> </div>
<SkeletonItems count={2} className="w-[90%] h-[15px] rounded-xl " />
{/* Studios & Producers */}
<div className="space-y-2 pt-2 border-t border-white/10">
<SkeletonItems count={2} className="h-4 w-[80%]" />
</div> </div>
</div> </div>
</div> </div>
<div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col px-4">
<CategoryCardLoader className="mt-[60px]"/> {/* Desktop Layout */}
<SidecardLoader className="mt-[60px]" /> <div className="hidden md:block">
<div className="flex flex-row gap-6 lg:gap-10">
{/* Poster Section */}
<div className="flex-shrink-0">
<Skeleton className="w-[220px] lg:w-[260px] aspect-[2/3] rounded-2xl" />
</div>
{/* Info Section */}
<div className="flex-1 space-y-4 lg:space-y-5 min-w-0">
{/* Title */}
<div className="space-y-2">
<Skeleton className="h-10 w-[70%]" />
<Skeleton className="h-5 w-[50%]" />
</div>
{/* Tags */}
<div className="flex flex-wrap gap-2">
<SkeletonItems count={4} className="w-[60px] h-[30px] rounded-xl" />
</div>
{/* Overview */}
<div className="space-y-2">
<SkeletonItems count={3} className="h-5 w-full max-w-3xl" />
</div>
{/* Watch Button */}
<Skeleton className="w-[150px] h-[42px] rounded-xl" />
{/* Details Section */}
<div className="space-y-4 py-4 backdrop-blur-md bg-white/5 rounded-xl px-5">
<div className="grid grid-cols-2 gap-3">
<SkeletonItems count={6} className="h-5 w-[90%]" />
</div>
{/* Genres */}
<div className="pt-3 border-t border-white/10">
<Skeleton className="h-5 w-[80px] mb-2" />
<div className="flex flex-wrap gap-1.5">
<SkeletonItems count={8} className="w-[80px] h-[30px] rounded-lg" />
</div>
</div>
{/* Studios & Producers */}
<div className="space-y-3 pt-3 border-t border-white/10">
<SkeletonItems count={2} className="h-5 w-[80%]" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{/* Recommendations Section */}
<div className="container mx-auto px-4 py-12 max-[478px]:px-2">
<CategoryCardLoader />
</div>
</div> </div>
</> </>
); );
} }
export default AnimeInfoLoader; export default AnimeInfoLoader;

39
src/components/Loader/AtoZ.loader.jsx
View File

@@ -6,20 +6,39 @@ const SkeletonItems = ({ count, className }) => (
); );
function AtoZLoader() { function AtoZLoader() {
const gridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
return ( return (
<div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]"> <div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
<ul className="flex gap-x-4 mt-[50px] items-center w-fit max-[1200px]:hidden">
<Skeleton className="w-[50px] h-[15px]" />
<Skeleton className="w-[70px] h-[15px]" />
</ul>
<div className="flex flex-col gap-y-5 mt-6"> <div className="flex flex-col gap-y-5 mt-6">
<Skeleton className="w-[200px] h-[15px]" /> <Skeleton className="w-[200px] h-8" />
<div className='flex gap-x-[7px] flex-wrap justify-start gap-y-2 max-md:justify-start'> <div className="flex gap-x-[7px] flex-wrap justify-start gap-y-2 max-md:justify-start">
<SkeletonItems count={20} className="w-[40px] h-[20px] rounded-sm"/> {[...Array(38)].map((_, index) => (
<Skeleton
key={index}
className="h-[34px] w-[40px] rounded-md"
/>
))}
</div>
</div>
<div className="w-full flex flex-col gap-y-8">
<div>
<CategoryCardLoader
showLabelSkeleton={false}
className="mt-8"
gridClass={gridClass}
/>
<div className="flex justify-center items-center gap-2 mt-8">
{[...Array(5)].map((_, index) => (
<Skeleton
key={index}
className="w-10 h-10 rounded-lg"
/>
))}
</div>
</div>
</div> </div>
</div> </div>
<CategoryCardLoader showLabelSkeleton={false}/>
</div >
); );
} }

48
src/components/Loader/Category.loader.jsx
View File

@@ -1,23 +1,43 @@
import { Skeleton } from "../ui/Skeleton/Skeleton" import { Skeleton } from "../ui/Skeleton/Skeleton";
import CategoryCardLoader from "./CategoryCard.loader" import CategoryCardLoader from "./CategoryCard.loader";
import SidecardLoader from "./Sidecard.loader" import SidecardLoader from "./Sidecard.loader";
const GenreLoader = () => (
<div className="flex flex-wrap gap-3">
{[...Array(8)].map((_, index) => (
<Skeleton
key={index}
className="h-[35px] w-[120px] rounded-full"
/>
))}
</div>
);
function CategoryLoader() { function CategoryLoader() {
return ( return (
<div className='w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]'> <div className="w-full flex flex-col gap-y-4 mt-[64px] max-md:mt-[50px]">
<div className="flex gap-x-4 items-center p-5 mt-4"> <div className="w-full px-4 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-[478px]:px-2">
<Skeleton className="w-[60px] h-[60px] rounded-full bg-gray-500 max-[575px]:hidden" /> <div>
<div className="flex flex-col w-fit gap-y-2"> <div className="flex items-center mb-6">
<Skeleton className="w-[150px] h-[10px] rounded-xl " /> <Skeleton className="h-8 w-[200px]" />
<Skeleton className="w-[150px] h-[10px] rounded-xl " /> </div>
<CategoryCardLoader className="mt-0" />
<div className="flex justify-center items-center gap-2 mt-8">
{[...Array(5)].map((_, index) => (
<Skeleton
key={index}
className="w-10 h-10 rounded-lg"
/>
))}
</div> </div>
</div> </div>
<div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10"> <div className="w-full flex flex-col gap-y-10">
<CategoryCardLoader className={"mt-[0px]"} /> <SidecardLoader title="Top 10" />
<SidecardLoader /> <GenreLoader />
</div> </div>
</div> </div>
) </div>
);
} }
export default CategoryLoader export default CategoryLoader;

22
src/components/Loader/CategoryCard.loader.jsx
View File

@@ -1,30 +1,27 @@
import { Skeleton } from "../ui/Skeleton/Skeleton"; import { Skeleton } from "../ui/Skeleton/Skeleton";
function CategoryCardLoader({ className, showLabelSkeleton = true }) { function CategoryCardLoader({ className, showLabelSkeleton = true, gridClass }) {
return ( return (
<div className={`w-full ${className}`}> <div className={`w-full ${className}`}>
{showLabelSkeleton && ( {showLabelSkeleton && (
<Skeleton className="w-[200px] h-[20px] max-[320px]:w-[70px]" /> <Skeleton className="w-[200px] h-[20px] max-[320px]:w-[70px]" />
)} )}
<div className="grid grid-cols-6 gap-x-3 gap-y-8 mt-6 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-2"> <div className={`grid ${gridClass || "grid-cols-6 max-[1400px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-2"} gap-x-3 gap-y-8 mt-6`}>
{[...Array(12)].map((_, index) => ( {[...Array(24)].map((_, index) => (
<div <div
key={index} key={index}
className="flex flex-col" className="flex flex-col"
style={{ height: "fit-content" }} style={{ height: "fit-content" }}
> >
<div className="w-full relative"> <div className="w-full relative">
<Skeleton className="w-full h-[250px] object-cover max-[1200px]:h-[35vw] max-[758px]:h-[45vw] max-[478px]:h-[60vw] rounded-none" /> <Skeleton className="w-full pb-[140%] rounded-lg" />
<div className="absolute left-2 bottom-4 flex items-center justify-center w-fit space-x-1 z-20 max-[320px]:w-[80%] max-[320px]:left-0"> <div className="absolute left-3 bottom-3 flex items-center gap-1.5 flex-wrap">
<Skeleton className="w-[50px] h-[15px] bg-gray-600 max-[320px]:w-[40%]" /> <Skeleton className="w-[40px] h-[20px] rounded-[2px]" />
<Skeleton className="w-[50px] h-[15px] bg-gray-600 max-[320px]:w-[40%]" /> <Skeleton className="w-[40px] h-[20px] rounded-[2px]" />
<Skeleton className="w-[40px] h-[20px] rounded-[2px]" />
</div> </div>
</div> </div>
<Skeleton className="mt-1 w-[90%] h-[15px]" /> <Skeleton className="mt-3 w-[90%] h-[20px] rounded-md" />
<div className="flex items-center gap-x-2 w-full mt-2">
<Skeleton className="w-[40%] h-[12px]" />
<Skeleton className="w-[40%] h-[12px]" />
</div>
</div> </div>
))} ))}
</div> </div>
@@ -33,3 +30,4 @@ function CategoryCardLoader({ className, showLabelSkeleton = true }) {
} }
export default CategoryCardLoader; export default CategoryCardLoader;

95
src/components/Loader/Home.loader.jsx
View File

@@ -1,28 +1,93 @@
import CartLoader from "./Cart.loader"; import { Skeleton } from "../ui/Skeleton/Skeleton";
import CategoryCardLoader from "./CategoryCard.loader"; import CategoryCardLoader from "./CategoryCard.loader";
import SidecardLoader from "./Sidecard.loader"; import SidecardLoader from "./Sidecard.loader";
import SpotlightLoader from "./Spotlight.loader"; import SpotlightLoader from "./Spotlight.loader";
import Trendingloader from "./Trending.loader"; import TrendingLoader from "./Trending.loader";
const GenreLoader = () => (
<div className="flex flex-wrap gap-3 px-4">
{[...Array(8)].map((_, index) => (
<Skeleton
key={index}
className="h-[35px] w-[120px] rounded-full"
/>
))}
</div>
);
const ContinueWatchingLoader = () => (
<div className="mt-6 px-4">
<Skeleton className="w-[200px] h-7 mb-4" />
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
{[...Array(6)].map((_, index) => (
<div key={index} className="flex flex-col gap-2">
<Skeleton className="w-full aspect-[2/3] rounded-xl" />
<Skeleton className="w-3/4 h-4" />
</div>
))}
</div>
</div>
);
const ScheduleLoader = () => (
<div className="mt-8 px-4">
<Skeleton className="w-[150px] h-7 mb-4" />
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{[...Array(6)].map((_, index) => (
<div key={index} className="flex gap-3">
<Skeleton className="w-[100px] aspect-[2/3] rounded-lg" />
<div className="flex-1 flex flex-col gap-2">
<Skeleton className="w-3/4 h-4" />
<Skeleton className="w-1/2 h-4" />
<Skeleton className="w-1/3 h-4" />
</div>
</div>
))}
</div>
</div>
);
const TabbedAnimeSectionLoader = () => (
<div className="mt-8 px-4">
<div className="flex gap-4 mb-4">
{[...Array(3)].map((_, index) => (
<Skeleton key={index} className="w-[100px] h-8 rounded-full" />
))}
</div>
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
{[...Array(12)].map((_, index) => (
<div key={index} className="flex flex-col gap-2">
<Skeleton className="w-full aspect-[2/3] rounded-xl" />
<Skeleton className="w-3/4 h-4" />
</div>
))}
</div>
</div>
);
function HomeLoader() { function HomeLoader() {
return ( return (
<div className="px-4 w-full h-full max-[1200px]:px-0 bg-[#3a395100]"> <div className="pt-16 px-4 w-full max-[1200px]:px-0 bg-[#0a0a0a]">
<SpotlightLoader /> <SpotlightLoader />
<Trendingloader /> <div className="mt-6">
<div className="mt-16 flex gap-6 max-[1200px]:px-4 max-[1200px]:grid max-[1200px]:grid-cols-2 max-[1200px]:mt-12 max-[1200px]:gap-y-10 max-[680px]:grid-cols-1"> <GenreLoader />
<CartLoader />
<CartLoader />
<CartLoader />
<CartLoader />
</div> </div>
<div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-4"> <ContinueWatchingLoader />
<div className="w-full grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex flex-col max-[1200px]:px-2">
<div> <div>
<CategoryCardLoader className="mt-[60px]" /> <CategoryCardLoader
<CategoryCardLoader className="mt-[60px]" /> className="mt-[60px]"
<CategoryCardLoader className="mt-[60px]" /> title="Latest Episode"
/>
<ScheduleLoader />
<TabbedAnimeSectionLoader />
</div> </div>
<div className="w-full mt-[60px]"> <div className="w-full mt-[60px]">
<SidecardLoader /> <TrendingLoader />
<SidecardLoader /> <div className="mt-12">
<SidecardLoader title="Top 10" />
</div>
</div> </div>
</div> </div>
</div> </div>

26
src/components/Loader/Producer.loader.jsx
View File

@@ -1,12 +1,28 @@
import { Skeleton } from "../ui/Skeleton/Skeleton";
import CategoryCardLoader from "./CategoryCard.loader"; import CategoryCardLoader from "./CategoryCard.loader";
import SidecardLoader from "./Sidecard.loader";
function ProducerLoader() { function ProducerLoader() {
const gridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
return ( return (
<div className="w-full mt-[100px] flex flex-col gap-y-4 max-md:mt-[50px]"> <div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="w-full px-4 grid grid-cols-[minmax(0,75%),minmax(0,25%)] gap-x-6 max-[1200px]:flex max-[1200px]:flex-col max-[1200px]:gap-y-10"> <div className="w-full flex flex-col gap-y-8 mt-6">
<CategoryCardLoader className={"mt-[0px]"} /> <div className="flex flex-col gap-y-2">
<SidecardLoader /> <Skeleton className="w-[250px] h-8" />
<CategoryCardLoader
showLabelSkeleton={false}
className="mt-4"
gridClass={gridClass}
/>
<div className="flex justify-center items-center gap-2 mt-8">
{[...Array(5)].map((_, index) => (
<Skeleton
key={index}
className="w-10 h-10 rounded-lg"
/>
))}
</div>
</div>
</div> </div>
</div> </div>
); );

6
src/components/producer/Producer.jsx
View File

@@ -50,7 +50,7 @@ function Producer() {
const producerName = (id.charAt(0).toUpperCase() + id.slice(1)).split("-").join(" "); const producerName = (id.charAt(0).toUpperCase() + id.slice(1)).split("-").join(" ");
return ( return (
<div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]"> <div className="max-w-[1600px] 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"> <div className="w-full flex flex-col gap-y-8 mt-6">
{loading ? ( {loading ? (
<Loader type="producer" /> <Loader type="producer" />
@@ -71,8 +71,8 @@ function Producer() {
<CategoryCard <CategoryCard
data={producerInfo} data={producerInfo}
showViewMore={false} showViewMore={false}
className="mt-0" className="mt-4"
cardStyle="max-[1400px]:h-[35vw]" cardStyle="grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2"
/> />
<div className="flex justify-center w-full mt-8"> <div className="flex justify-center w-full mt-8">
<PageSlider <PageSlider

12
src/components/ui/Skeleton/Skeleton.css
View File

@@ -10,12 +10,12 @@
.shimmer-effect { .shimmer-effect {
background: linear-gradient( background: linear-gradient(
to right, to right,
rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 0%,
rgba(255, 255, 255, 0.2) 20%, rgba(255, 255, 255, 0.08) 20%,
rgba(255, 255, 255, 0.3) 40%, rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.2) 60%, rgba(255, 255, 255, 0.08) 60%,
rgba(255, 255, 255, 0.1) 80%, rgba(255, 255, 255, 0.03) 80%,
rgba(0, 0, 0, 0.03) 100% rgba(255, 255, 255, 0.02) 100%
); );
background-size: 200% 100%; background-size: 200% 100%;
animation: shimmer 1.5s infinite linear; animation: shimmer 1.5s infinite linear;

3
src/components/ui/Skeleton/Skeleton.jsx
View File

@@ -4,7 +4,8 @@ import './Skeleton.css';
function Skeleton({ className, animation=true, ...props }) { function Skeleton({ className, animation=true, ...props }) {
return ( return (
<div <div
className={cn("bg-gray-400 rounded-3xl", className={cn(
"bg-white/5 backdrop-blur-sm rounded-lg",
animation ? "shimmer-effect" : "", animation ? "shimmer-effect" : "",
className className
)} )}

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

@@ -45,7 +45,7 @@ function AtoZ({ path }) {
}; };
return ( return (
<div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]"> <div className="max-w-[1600px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]">
<div className="flex flex-col gap-y-5 mt-6"> <div className="flex flex-col gap-y-5 mt-6">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]"> <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
Sort By Letters Sort By Letters
@@ -91,8 +91,8 @@ function AtoZ({ path }) {
data={categoryInfo} data={categoryInfo}
limit={categoryInfo.length} limit={categoryInfo.length}
showViewMore={false} showViewMore={false}
className="mt-0" className="mt-8"
cardStyle="max-[1400px]:h-[35vw]" cardStyle="grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2"
/> />
)} )}
<div className="flex justify-center w-full mt-8"> <div className="flex justify-center w-full mt-8">

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

@@ -36,11 +36,13 @@ function Search() {
setSearchParams({ keyword, page: newPage }); setSearchParams({ keyword, page: newPage });
}; };
const searchGridClass = "grid-cols-8 max-[1600px]:grid-cols-6 max-[1200px]:grid-cols-4 max-[758px]:grid-cols-3 max-[478px]:grid-cols-3 max-[478px]:gap-x-2";
return ( return (
<div className="max-w-[1260px] mx-auto px-[15px] flex flex-col mt-[64px] max-md:mt-[50px]"> <div className="max-w-[1600px] 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"> <div className="w-full flex flex-col gap-y-8 mt-6">
{loading ? ( {loading ? (
<CategoryCardLoader className={"max-[478px]:mt-2"} /> <CategoryCardLoader className={"max-[478px]:mt-2"} gridClass={searchGridClass} />
) : page > totalPages ? ( ) : page > totalPages ? (
<div className="flex flex-col gap-y-4"> <div className="flex flex-col gap-y-4">
<h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]"> <h1 className="font-bold text-2xl text-white max-[478px]:text-[18px]">
@@ -59,7 +61,7 @@ function Search() {
data={searchData} data={searchData}
showViewMore={false} showViewMore={false}
className="mt-0" className="mt-0"
cardStyle="max-[1400px]:h-[35vw]" gridClass={searchGridClass}
/> />
<div className="flex justify-center w-full mt-8"> <div className="flex justify-center w-full mt-8">
<PageSlider <PageSlider