admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

create VideoCardSkeleton and adjust text margin

Browse source
This commit is contained in:
MarconLP 2023-04-12 19:15:31 +02:00
parent cef346a201
commit 3b0ed18bf5
No known key found for this signature in database
GPG key ID: F4CAFFDFA3451D5E
1 changed files with 18 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
src/pages/videos.tsx
View file

@ -45,34 +45,10 @@ const VideoList: NextPage = () => {
{isLoading ? ( {isLoading ? (
<> <>
<div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal"> <VideoCardSkeleton />
<figure className="relative aspect-video w-full bg-slate-200"></figure> <VideoCardSkeleton />
<div className="m-4 flex flex-col"> <VideoCardSkeleton />
<span className="h-4 rounded bg-slate-200"></span> <VideoCardSkeleton />
<span className="mt-2 h-4 rounded bg-slate-200"></span>
</div>
</div>
<div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
<figure className="relative aspect-video w-full bg-slate-200"></figure>
<div className="m-4 flex flex-col">
<span className="h-4 rounded bg-slate-200"></span>
<span className="mt-2 h-4 rounded bg-slate-200"></span>
</div>
</div>
<div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
<figure className="relative aspect-video w-full bg-slate-200"></figure>
<div className="m-4 flex flex-col">
<span className="h-4 rounded bg-slate-200"></span>
<span className="mt-2 h-4 rounded bg-slate-200"></span>
</div>
</div>
<div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
<figure className="relative aspect-video w-full bg-slate-200"></figure>
<div className="m-4 flex flex-col">
<span className="h-4 rounded bg-slate-200"></span>
<span className="mt-2 h-4 rounded bg-slate-200"></span>
</div>
</div>
</> </>
) : null} ) : null}
@ -94,6 +70,18 @@ interface VideoCardProps {
createdAt: Date; createdAt: Date;
} }
const VideoCardSkeleton = () => {
return (
<div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
<figure className="relative aspect-video w-full bg-slate-200"></figure>
<div className="m-4 flex flex-col">
<span className="h-4 rounded bg-slate-200"></span>
<span className="mt-4 h-4 rounded bg-slate-200"></span>
</div>
</div>
);
};
const VideoCard = ({ title, id, createdAt }: VideoCardProps) => { const VideoCard = ({ title, id, createdAt }: VideoCardProps) => {
const getTime = (timestamp: Date): string => { const getTime = (timestamp: Date): string => {
const delta = Math.round( const delta = Math.round(
@ -162,7 +150,8 @@ const VideoCard = ({ title, id, createdAt }: VideoCardProps) => {
<Image <Image
src="https://i3.ytimg.com/vi/BuaKzm7Kq9Q/maxresdefault.jpg" src="https://i3.ytimg.com/vi/BuaKzm7Kq9Q/maxresdefault.jpg"
alt="video thumbnail" alt="video thumbnail"
fill={true} width={248}
height={139.5}
className="!relative object-contain" className="!relative object-contain"
/> />
</figure> </figure>