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

freshhhh

Browse Source
This commit is contained in:
Tejas Panchal
2025-07-24 21:31:38 +05:30
parent d502d2dbc5
commit 9f256d4254
116 changed files with 0 additions and 17816 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,58 +0,0 @@
import { Skeleton } from "@/src/components/ui/Skeleton/Skeleton";
import CategoryCardLoader from "./CategoryCard.loader";
import SidecardLoader from "./Sidecard.loader";
const SkeletonItems = ({ count, className }) => (
[...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
);
function AnimeInfoLoader() {
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]">
<Skeleton className="absolute inset-0 w-full h-full blur-lg z-[-900] bg-gray-500" animation={false} />
<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">
<Skeleton className="w-[200px] h-[270px] rounded-none" />
<div className="flex flex-col ml-4 gap-y-5 w-full max-[575px]:items-center max-[575px]:justify-center max-[575px]:mt-0">
<ul className="flex gap-x-2 items-center w-fit max-[1200px]:hidden">
<SkeletonItems count={3} className="w-[40px] h-[15px] rounded-xl " />
</ul>
<div className="flex flex-col gap-y-2">
<SkeletonItems count={2} className="w-[50%] h-[20px] rounded-xl " />
</div>
<div className="flex gap-x-[3px]">
<SkeletonItems count={6} className="w-[30px] h-[20px] rounded-sm" />
</div>
<Skeleton className="w-[150px] h-[40px] rounded-3xl mt-4" />
<div className="flex flex-col gap-y-2 mt-5 max-[575px]:hidden">
<SkeletonItems count={3} className="w-[80%] h-[15px] rounded-3xl " />
</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" />
<div className="flex flex-col w-fit gap-y-2">
<SkeletonItems count={2} className="w-[150px] h-[10px] rounded-xl " />
</div>
</div>
</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">
<SkeletonItems count={6} className="w-full h-[15px] rounded-xl" />
<div className="flex gap-x-4 py-2 mt-4">
<Skeleton className="w-[50px] h-[20px] " />
<div className="flex flex-wrap gap-1">
<SkeletonItems count={4} className="w-[30px] h-[20px] rounded-sm bg-gray-500" />
</div>
</div>
<SkeletonItems count={2} className="w-[90%] h-[15px] rounded-xl " />
</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]"/>
<SidecardLoader className="mt-[60px]" />
</div>
</>
);
}
export default AnimeInfoLoader;

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

@@ -1,26 +0,0 @@
import { Skeleton } from "../ui/Skeleton/Skeleton";
import CategoryCardLoader from "./CategoryCard.loader";
const SkeletonItems = ({ count, className }) => (
[...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
);
function AtoZLoader() {
return (
<div className="max-w-[1260px] 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">
<Skeleton className="w-[200px] h-[15px]" />
<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"/>
</div>
</div>
<CategoryCardLoader showLabelSkeleton={false}/>
</div >
);
}
export default AtoZLoader;

27
src/components/Loader/Cart.loader.jsx
View File

@@ -1,27 +0,0 @@
import { Skeleton } from "../ui/Skeleton/Skeleton"
const SkeletonItems = ({ count, className }) => (
[...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
);
function CartLoader() {
return (
<div className="flex flex-col w-1/4 space-y-7 max-[1200px]:w-full">
<Skeleton className="w-[200px] h-[20px]" />
<div className='w-full space-y-4 flex flex-col '>
{[...Array(5)].map((item, index) => (
<div key={index} style={{ borderBottom: "1px solid rgba(255, 255, 255, .075)" }} className="flex pb-4 items-center">
<Skeleton className="w-[60px] h-[75px] rounded-none" />
<div className='flex flex-col ml-4 space-y-2 w-full'>
<Skeleton className='w-[90%] h-[15px]' />
<div className='flex items-center w-fit space-x-1'>
<SkeletonItems count={3} className="w-[30px] h-[15px]" />
</div>
</div>
</div>
))}
</div>
<Skeleton className='w-[100px] h-[30px]' />
</div>
)
}
export default CartLoader

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

@@ -1,23 +0,0 @@
import { Skeleton } from "../ui/Skeleton/Skeleton"
import CategoryCardLoader from "./CategoryCard.loader"
import SidecardLoader from "./Sidecard.loader"
function CategoryLoader() {
return (
<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">
<Skeleton className="w-[60px] h-[60px] rounded-full bg-gray-500 max-[575px]:hidden" />
<div className="flex flex-col w-fit gap-y-2">
<Skeleton className="w-[150px] h-[10px] rounded-xl " />
<Skeleton className="w-[150px] h-[10px] rounded-xl " />
</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">
<CategoryCardLoader className={"mt-[0px]"} />
<SidecardLoader />
</div>
</div>
)
}
export default CategoryLoader

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

@@ -1,35 +0,0 @@
import { Skeleton } from "../ui/Skeleton/Skeleton";
function CategoryCardLoader({ className, showLabelSkeleton = true }) {
return (
<div className={`w-full ${className}`}>
{showLabelSkeleton && (
<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">
{[...Array(12)].map((_, index) => (
<div
key={index}
className="flex flex-col"
style={{ height: "fit-content" }}
>
<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" />
<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">
<Skeleton className="w-[50px] h-[15px] bg-gray-600 max-[320px]:w-[40%]" />
<Skeleton className="w-[50px] h-[15px] bg-gray-600 max-[320px]:w-[40%]" />
</div>
</div>
<Skeleton className="mt-1 w-[90%] h-[15px]" />
<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>
);
}
export default CategoryCardLoader;

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

@@ -1,32 +0,0 @@
import CartLoader from "./Cart.loader";
import CategoryCardLoader from "./CategoryCard.loader";
import SidecardLoader from "./Sidecard.loader";
import SpotlightLoader from "./Spotlight.loader";
import Trendingloader from "./Trending.loader";
function HomeLoader() {
return (
<div className="px-4 w-full h-full max-[1200px]:px-0 bg-[#3a395100]">
<SpotlightLoader />
<Trendingloader />
<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">
<CartLoader />
<CartLoader />
<CartLoader />
<CartLoader />
</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">
<div>
<CategoryCardLoader className="mt-[60px]" />
<CategoryCardLoader className="mt-[60px]" />
<CategoryCardLoader className="mt-[60px]" />
</div>
<div className="w-full mt-[60px]">
<SidecardLoader />
<SidecardLoader />
</div>
</div>
</div>
);
}
export default HomeLoader;

24
src/components/Loader/Loader.jsx
View File

@@ -1,24 +0,0 @@
import AnimeInfoLoader from "./AnimeInfo.loader";
import HomeLoader from "./Home.loader";
import CategoryLoader from "./Category.loader";
import AtoZLoader from "./AtoZ.loader";
import ProducerLoader from "./Producer.loader";
const Loader = ({ type }) => {
switch (type) {
case "home":
return <HomeLoader />;
case "animeInfo":
return <AnimeInfoLoader />;
case "category":
return <CategoryLoader />;
case "producer":
return <ProducerLoader />;
case "AtoZ":
return <AtoZLoader />;
default:
return <div className="loading-skeleton default-skeleton"></div>;
}
};
export default Loader;

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

@@ -1,15 +0,0 @@
import CategoryCardLoader from "./CategoryCard.loader";
import SidecardLoader from "./Sidecard.loader";
function ProducerLoader() {
return (
<div className="w-full mt-[100px] flex flex-col gap-y-4 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">
<CategoryCardLoader className={"mt-[0px]"} />
<SidecardLoader />
</div>
</div>
);
}
export default ProducerLoader;

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

@@ -1,26 +0,0 @@
import { Skeleton } from "../ui/Skeleton/Skeleton";
function SidecardLoader({ className }) {
return (
<div className={`flex flex-col space-y-6 ${className}`}>
<Skeleton className='w-[200px] h-[15px]' />
<div className='flex flex-col space-y-4 bg-[#2B2A3C] p-4 pt-8 w-full'>
{[...Array(10)].map((_, index) => (
<div key={index} className='flex items-center gap-x-4'>
<div className="flex pb-4 relative container items-center">
<Skeleton className="w-[60px] h-[75px] rounded-md" />
<div className='flex flex-col ml-4 space-y-2 w-[60%]'>
<Skeleton className='w-[90%] h-[15px]' />
<div className='flex flex-wrap items-center space-x-1'>
<Skeleton className="w-[30%] h-[15px]" />
<Skeleton className="w-[30%] h-[15px]" />
</div>
</div>
</div>
</div>
))}
</div>
</div>
);
}
export default SidecardLoader;

34
src/components/Loader/Spotlight.loader.jsx
View File

@@ -1,34 +0,0 @@
import { Skeleton } from "../ui/Skeleton/Skeleton"
const SkeletonItems = ({ count, className }) => (
[...Array(count)].map((_, index) => <Skeleton key={index} className={className} />)
);
function SpotlightLoader() {
return (
<section className="w-full h-[600px] max-[1390px]:h-[530px] max-[1300px]:h-[500px] max-md:h-[420px] relative">
<div className="absolute flex flex-col left-0 bottom-[100px] w-[55%] p-4 z-10 max-[1390px]:w-[45%] max-[1390px]:bottom-[10px] max-[1300px]:w-[600px] max-[1120px]:w-[60%] max-md:w-[90%] max-[300px]:w-full">
<Skeleton className="w-[400px] h-[20px] max-md:w-[180px]" />
<Skeleton className="w-[70%] h-[20px] mt-6 text-left max-[1300px]:mt-4 max-sm:w-[80%] max-[320px]:w-full " />
<div className="flex h-fit justify-center items-center w-fit space-x-5 mt-8 max-[1300px]:mt-6 max-md:hidden">
<SkeletonItems count={2} className="w-[30px] h-[15px]" />
<div className="flex space-x-3 w-fit">
<Skeleton className="w-[80px] h-[15px]" />
<div className='flex space-x-[1px] rounded-r-[5px] rounded-l-[5px] w-fit py-[1px] overflow-hidden'>
<SkeletonItems count={2} className="w-[30px] h-[15px]" />
</div>
</div>
</div>
<div className="mt-6 max-[1300px]:w-[500px] flex flex-col gap-y-2 max-[1120px]:w-[90%] max-md:hidden">
<Skeleton className="w-full h-[13px]" />
<Skeleton className="w-[85%] h-[13px]" />
<Skeleton className="w-[70%] h-[13px]" />
</div>
<div className='flex gap-x-5 mt-10 max-md:mt-6 max-sm:w-full max-[320px]:flex-col max-[320px]:space-y-3'>
<Skeleton className="w-[170px] h-[40px] max-[575px]:w-[120px] max-[575px]:h-[30px]" />
<Skeleton className="w-[150px] h-[40px] max-[575px]:w-[120px] max-[575px]:h-[30px]" />
</div>
</div>
</section >
)
}
export default SpotlightLoader

34
src/components/Loader/Trending.loader.jsx
View File

@@ -1,34 +0,0 @@
import { useState, useEffect } from "react";
import { Skeleton } from "../ui/Skeleton/Skeleton";
function TrendingLoader() {
const [count, setCount] = useState(() => window.innerWidth < 720 ? 3 : window.innerWidth < 1300 ? 4 : 6);
useEffect(() => {
const updateCount = () => {
if (window.innerWidth < 720) {
setCount(3);
} else if (window.innerWidth < 1300) {
setCount(4);
} else {
setCount(6);
}
};
updateCount();
window.addEventListener("resize", updateCount);
return () => window.removeEventListener("resize", updateCount);
}, []);
return (
<div className="flex flex-col w-full mt-10 max-[1200px]:px-4">
<Skeleton className="w-[150px] h-[20px] max-[400px]:w-[100px]" />
<div className="w-full h-[250px] overflow-hidden flex mt-6 justify-around max-[1300px]:h-fit">
{[...Array(count)].map((_, index) => (
<div key={index}>
<Skeleton className="w-[200px] h-full rounded-none max-[1300px]:w-[22vw] max-[1300px]:h-[30vw] max-[720px]:w-[25vw] max-[720px]:h-[35vw]" />
</div>
))}
</div>
</div>
);
}
export default TrendingLoader;

21
src/components/Loader/VoiceActorlist.loader.jsx
View File

@@ -1,21 +0,0 @@
import { Skeleton } from "../ui/Skeleton/Skeleton"
function VoiceActorlistLoader() {
return (
<div className="w-full h-fit grid grid-cols-2 gap-4 overflow-y-hidden max-sm:gap-2 max-md:h-[400px] max-md:flex max-md:flex-col">
{[...Array(10)].map((_, index) => (
<div key={index} className="h-[80px] p-4 rounded-md bg-[#444445]">
<div className="flex h-full items-center gap-x-2">
<Skeleton className="w-[45px] h-[45px] rounded-full max-sm:w-[30px] max-sm:h-[30px]" />
<div className="flex flex-col gap-y-1">
<Skeleton className="h-[10px] w-[100px] rounded-md max-[300px]:w-[50px] max-[300px]:h-[8px]" />
<Skeleton className="h-[10px] w-[70px] rounded-md max-[300px]:w-[20px] max-[300px]:h-[8px]" />
</div>
</div>
</div>
))}
</div>
)
}
export default VoiceActorlistLoader