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

sidecard

Browse Source
This commit is contained in:
Tejas Panchal
2025-08-10 13:22:25 +05:30
parent 4b8f538118
commit b1effe1b5b
1 changed files with 14 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,18 +1,20 @@
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 className={`bg-[#141414] rounded-lg p-6 ${className}`}>
<h2 className="text-xl font-semibold mb-4 text-white">Related Anime</h2>
<div className="flex flex-col space-y-2 max-h-[600px] overflow-y-auto pr-2 scrollbar-thin scrollbar-track-[#1a1a1a] scrollbar-thumb-[#2a2a2a] hover:scrollbar-thumb-[#333] scrollbar-thumb-rounded">
{[...Array(8)].map((_, index) => (
<div key={index} className="group">
<div className="flex items-start gap-3 p-2 rounded-lg transition-colors hover:bg-[#1f1f1f]">
<Skeleton className="w-[50px] h-[70px] rounded object-cover flex-shrink-0" />
<div className="flex flex-col gap-1.5 flex-1 min-w-0">
<Skeleton className="w-[85%] h-[14px]" />
<div className="flex flex-wrap items-center gap-2">
<Skeleton className="w-[45px] h-[18px] rounded" />
<Skeleton className="w-[45px] h-[18px] rounded" />
<Skeleton className="w-[60px] h-[16px] rounded" />
</div>
</div>
</div>