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 ? (
<>
<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>
<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>
<VideoCardSkeleton />
<VideoCardSkeleton />
<VideoCardSkeleton />
<VideoCardSkeleton />
</>
) : null}
@ -94,6 +70,18 @@ interface VideoCardProps {
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 getTime = (timestamp: Date): string => {
const delta = Math.round(
@ -162,7 +150,8 @@ const VideoCard = ({ title, id, createdAt }: VideoCardProps) => {
<Image
src="https://i3.ytimg.com/vi/BuaKzm7Kq9Q/maxresdefault.jpg"
alt="video thumbnail"
fill={true}
width={248}
height={139.5}
className="!relative object-contain"
/>
</figure>