fix layout shift

Prototypr · Apr 28, 2024 · a403020 · a403020
1 parent 3f47699
commit a403020
Showing 1 changed file with 21 additions and 33 deletions.
diff --git a/components/v4/card/ToolIconCard.js b/components/v4/card/ToolIconCard.js
@@ -48,49 +48,37 @@ const ToolIconCard = ({ tool, withBackground, small }) => {
           className={`${withBackground ? "hover:shadow-md hover:scale-[1.005] transition transition-all duration-400 bg-white p-2 shadow-sm border border-gray-200/70 border-1 rounded-2xl" : ""} w-full h-auto cursor-pointer flex flex-col group`}
         >
           <div className="flex flex-row rounded-xl justify-between gap-3">
-            <div className="flex">
+            <div className="flex justify-start w-full">
               <div
-                style={{ flex: `0 0 ${small ? "3em" : "56px"}` }}
                 className={`${small ? "h-12 w-12" : "w-[56px] h-[56px]"} border border-gray-300/30 mr-2 relative rounded-xl overflow-hidden group-hover:scale-[1.03] group-hover:shadow-sm flex-none transition transition-all duration-700`}
               >
-                {coverImage ? (
-                  <Image
-                    tabIndex={0}
-                    loader={gumletLoader}
-                    layout="fill"
-                    objectFit="cover"
-                    src={coverImage}
-                    className="object-cover drop-shadow-sm"
-                    alt="Author profile picture"
-                  />
-                ) : (
-                  ""
-                )}
+                <Image
+                  tabIndex={0}
+                  loader={gumletLoader}
+                  layout="fill"
+                  objectFit="cover"
+                  src={
+                    coverImage ||
+                    "https://prototypr-media.sfo2.digitaloceanspaces.com/strapi/176d3d79cb9ad1acc057fb0eb3fe72d0.jpeg"
+                  }
+                  className="object-cover drop-shadow-sm"
+                  alt="Author profile picture"
+                />
               </div>
-              <div className="flex flex-col pl-1 justify-center">
+              <div className="flex flex-col justify-center">
                 <div className=" overflow-hidden tracking-tight line-clamp-1 inline font-semibold py-0 mb-0 font-inter text-base">
                   {title}
                   {/* <span className="text-xs ml-2 capitalize bg-gray-100 font-inter px-2 text-blue-800 py-0.5 border border-black border-opacity-5 text-black rounded-full">
                   Promoted
                 </span> */}
                 </div>
-                {tags?.data?.length ? (
-                  // <Link href={`/toolbox/${tags?.data[0]?.attributes?.slug}`}>
-                  <div className="flex flex-row text-sm text-gray-500">
-                    <Link
-                      href={`/toolbox/${tags?.data[0]?.attributes?.slug}/page/1`}
-                    >
-                      {/* <span className="text-xs mt-1 capitalize bg-gray-100 font-inter px-2 py-0.5 border border-black border-opacity-5 text-black rounded-full"> */}
-                      <span className="text-xs capitalize text-gray-500">
-                        {tags?.data[0]?.attributes?.name}
-                      </span>
-                      {/* </span> */}
-                    </Link>
-                  </div>
-                ) : (
-                  // </Link>
-                  ""
-                )}
+                <div className="text-sm text-gray-500">
+                  {/* <Link href={tags?.data[0]?.attributes?.name ? `/toolbox/${tags?.data[0]?.attributes?.slug}/page/1` : '#'}> */}
+                    <span className="text-xs capitalize text-gray-500">
+                      {tags?.data[0]?.attributes?.name || 'Tool'}
+                    </span>
+                  {/* </Link> */}
+                </div>
               </div>
             </div>
             <div className="flex flex-col justify-center">