Renamed ThumbnailPreview to PreviewCard + removed Next/Image

src/components/Img.tsx

@@ -1,16 +1,13 @@
 import { UploadImageFragment } from "graphql/generated";
 import { getAssetURL, getImgSizesByQuality, ImageQuality } from "helpers/img";
 import { Immutable } from "helpers/types";
-import Image, { ImageProps } from "next/image";
+import { ImageProps } from "next/image";
 
 interface Props {
   className?: string;
   image?: UploadImageFragment | string;
   quality?: ImageQuality;
   alt?: ImageProps["alt"];
-  layout?: ImageProps["layout"];
-  objectFit?: ImageProps["objectFit"];
-  priority?: ImageProps["priority"];
 }
 
 export default function Img(props: Immutable<Props>): JSX.Element {
@@ -20,6 +17,7 @@ export default function Img(props: Immutable<Props>): JSX.Element {
         className={props.className}
         src={props.image}
         alt={props.alt ?? ""}
+        loading="lazy"
       />
     );
   } else if (props.image?.width && props.image.height) {
@@ -29,19 +27,16 @@ export default function Img(props: Immutable<Props>): JSX.Element {
       props.quality ?? ImageQuality.Small
     );
     return (
-      <Image
+      <img
         className={props.className}
         src={getAssetURL(
           props.image.url,
           props.quality ? props.quality : ImageQuality.Small
         )}
         alt={props.alt ?? props.image.alternativeText ?? ""}
-        width={props.layout === "fill" ? undefined : imgSize.width}
+        width={imgSize.width}
-        height={props.layout === "fill" ? undefined : imgSize.height}
+        height={imgSize.height}
-        layout={props.layout}
+        loading="lazy"
-        objectFit={props.objectFit}
-        priority={props.priority}
-        unoptimized
       />
     );
   }

src/components/Markdown/Markdawn.tsx

@@ -270,8 +270,6 @@ export default function Markdawn(props: Immutable<Props>): JSX.Element {
                           ? getAssetURL(compProps.src, ImageQuality.Small)
                           : compProps.src
                       }
-                      layout="fill"
-                      objectFit="contain"
                       quality={ImageQuality.Medium}
                     ></Img>
                   </div>

src/components/PreviewCard.tsx

@@ -44,7 +44,7 @@ interface Props {
     | { __typename: "anotherHoverlayName" };
 }
 
-export default function ThumbnailPreview(props: Immutable<Props>): JSX.Element {
+export default function PreviewCard(props: Immutable<Props>): JSX.Element {
   const {
     href,
     thumbnail,
@@ -160,9 +160,8 @@ export default function ThumbnailPreview(props: Immutable<Props>): JSX.Element {
         )}
         <div
           className={`linearbg-obi ${
-            keepInfoVisible
+            !keepInfoVisible &&
-              ? "-mt-[0.3333em]"
+            `fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md
-              : `fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md
               bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)]`
           } transition-opacity z-20 grid p-4 gap-2`}
         >

src/components/ThumbnailHeader.tsx

@@ -54,7 +54,6 @@ export default function ThumbnailHeader(props: Immutable<Props>): JSX.Element {
               className=" rounded-xl"
               image={thumbnail}
               quality={ImageQuality.Medium}
-              priority
             />
           ) : (
             <div className="w-96 aspect-[4/3] bg-light rounded-xl"></div>

src/pages/archives/videos/c/[uid].tsx

@@ -8,7 +8,7 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import PreviewCard from "components/PreviewCard";
 import { GetVideoChannelQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
@@ -68,7 +68,7 @@ export default function Channel(props: Props): JSX.Element {
         {channel?.videos?.data.map((video) => (
           <>
             {video.attributes && (
-              <ThumbnailPreview
+              <PreviewCard
                 key={video.id}
                 href={`/archives/videos/v/${video.attributes.uid}`}
                 title={video.attributes.title}

src/pages/archives/videos/index.tsx

@@ -9,7 +9,7 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import PreviewCard from "components/PreviewCard";
 import { GetVideosPreviewQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
@@ -88,7 +88,7 @@ export default function Videos(props: Props): JSX.Element {
         {paginatedVideos[page].map((video) => (
           <>
             {video.attributes && (
-              <ThumbnailPreview
+              <PreviewCard
                 key={video.id}
                 href={`/archives/videos/v/${video.attributes.uid}`}
                 title={video.attributes.title}

src/pages/contents/index.tsx

@@ -7,7 +7,7 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import PreviewCard from "components/PreviewCard";
 import { GetContentsQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
@@ -89,7 +89,7 @@ export default function Contents(props: Immutable<Props>): JSX.Element {
                 {items.map((item) => (
                   <>
                     {item.attributes && (
-                      <ThumbnailPreview
+                      <PreviewCard
                         key={item.id}
                         href={`/contents/${item.attributes.slug}`}
                         pre_title={item.attributes.titles?.[0]?.pre_title}

src/pages/library/[slug]/index.tsx

@@ -14,7 +14,7 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import PreviewCard from "components/PreviewCard";
 import { useAppLayout } from "contexts/AppLayoutContext";
 import {
   Enum_Componentmetadatabooks_Binding_Type,
@@ -172,9 +172,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
             <Img
               image={item.thumbnail.data.attributes}
               quality={ImageQuality.Large}
-              layout="fill"
+              className="w-full h-full object-contain"
-              objectFit="contain"
-              priority
             />
           ) : (
             <div className="w-full aspect-[21/29.7] bg-light rounded-xl"></div>
@@ -270,15 +268,10 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
                         }
                       }}
                     >
-                      <div
-                        className="bg-light absolute inset-0
-                        rounded-lg drop-shadow-shade-md"
-                      ></div>
                       <Img
-                        className="rounded-lg"
+                        className="bg-light rounded-lg drop-shadow-shade-md
+                        w-full h-full object-cover"
                         image={galleryItem.attributes}
-                        layout="fill"
-                        objectFit="cover"
                       />
                     </div>
                   )}
@@ -445,7 +438,7 @@ export default function LibrarySlug(props: Immutable<Props>): JSX.Element {
               {item.subitems.data.map((subitem) => (
                 <>
                   {subitem.attributes && (
-                    <ThumbnailPreview
+                    <PreviewCard
                       key={subitem.id}
                       href={`/library/${subitem.attributes.slug}`}
                       title={subitem.attributes.title}

src/pages/news/index.tsx

@@ -5,7 +5,7 @@ import ContentPanel, {
   ContentPanelWidthSizes,
 } from "components/Panels/ContentPanel";
 import SubPanel from "components/Panels/SubPanel";
-import ThumbnailPreview from "components/PreviewCard";
+import PreviewCard from "components/PreviewCard";
 import { GetPostsPreviewQuery } from "graphql/generated";
 import { AppStaticProps, getAppStaticProps } from "graphql/getAppStaticProps";
 import { getReadySdk } from "graphql/sdk";
@@ -48,7 +48,7 @@ export default function News(props: Immutable<Props>): JSX.Element {
         {posts.map((post) => (
           <>
             {post.attributes && (
-              <ThumbnailPreview
+              <PreviewCard
                 key={post.id}
                 href={`/news/${post.attributes.slug}`}
                 title={