add text to show if no videos exist

This commit is contained in:
MarconLP 2023-04-12 18:46:12 +02:00
parent 02160a2af8
commit 1b8e3d218c
No known key found for this signature in database
GPG key ID: F4CAFFDFA3451D5E

View file

@ -33,7 +33,7 @@ const VideoList: NextPage = () => {
</div> </div>
<div className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14"> <div className="flex w-full grow items-start justify-center overflow-auto bg-[#fbfbfb] pt-14">
<div className="flex-start jusitfy-start container flex max-w-[1200px] flex-row flex-wrap items-center gap-14 px-4 pb-16"> <div className="flex-start jusitfy-start container flex max-w-[1200px] flex-row flex-wrap items-center gap-14 px-4 pb-16">
{videos && !isLoading ? ( {videos &&
videos.map(({ title, id, createdAt }) => ( videos.map(({ title, id, createdAt }) => (
<VideoCard <VideoCard
title={title} title={title}
@ -41,8 +41,9 @@ const VideoList: NextPage = () => {
createdAt={createdAt} createdAt={createdAt}
key={id} key={id}
/> />
)) ))}
) : (
{isLoading ? (
<> <>
<div className="h-[240px] w-[250px] animate-pulse overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal"> <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> <figure className="relative aspect-video w-full bg-slate-200"></figure>
@ -73,7 +74,13 @@ const VideoList: NextPage = () => {
</div> </div>
</div> </div>
</> </>
)} ) : null}
{videos && videos?.length <= 0 ? (
<div>
<span>You do not have any recordings.</span>
</div>
) : null}
</div> </div>
</div> </div>
</main> </main>