From 3b0ed18bf56f6352770a5594dc019332fd63681c Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Wed, 12 Apr 2023 19:15:31 +0200
Subject: [PATCH] create VideoCardSkeleton and adjust text margin

---
 src/pages/videos.tsx | 47 +++++++++++++++++---------------------------
 1 file changed, 18 insertions(+), 29 deletions(-)

diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 0f7cb0b..1be7471 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -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>