perf: lazy load images (httpcats#186)

mari48073 · Jan 4, 2024 · 19f4ff7 · 19f4ff7
1 parent c5fdd7c
commit 19f4ff7
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 73 deletions.
diff --git a/components/Thumbnail/Thumbnail.module.css b/components/Thumbnail/Thumbnail.module.css
diff --git a/components/Thumbnail/Thumbnail.tsx b/components/Thumbnail/Thumbnail.tsx
@@ -1,22 +1,26 @@
 import Link from 'next/link';
-
-import styles from './Thumbnail.module.css';
+import Image from 'next/image';
 
 type ThumbnailProps = {
   code: number;
   description: string;
 };
 
 const Thumbnail = ({ code, description }: ThumbnailProps) => (
-  <div className={styles.container}>
-    <Link href={`/status/${code}`}>
-      <div
-        className={styles.image}
-        style={{ backgroundImage: `url(/images/${code}.jpg)` }}
-      />
-      <div className={styles.content}>
-        <div className={styles.title}>{code}</div>
-        <p>{description}</p>
+  <div className="flex flex-col flex-grow h-full text-white overflow-hidden rounded shadow bg-[--interactive]">
+    <Link href={`/status/${code}`} className='text-white no-underline'>
+      <div className='pt-[56.25%] relative overflow-hidden'>
+        <Image
+          src={`/images/${code}.jpg`}
+          alt=""
+          loading='lazy'
+          fill
+          className="contrast-[70%] hover:contrast-100 transition duration-500 object-cover scale-[140%]"
+        />
+      </div>
+      <div className="flex flex-col px-4 pt-4">
+        <div className="text-[2rem] tracking-[2px] font-semibold uppercase">{code}</div>
+        <p className='font-semibold'>{description}</p>
       </div>
     </Link>
   </div>

diff --git a/components/ThumbnailGrid/ThumbnailGrid.tsx b/components/ThumbnailGrid/ThumbnailGrid.tsx
@@ -6,7 +6,7 @@ const ThumbnailGrid = ({ children }: ThumbnailGridProps) => {
   return (
     <ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 list-none p-0">
       {children.map((el, idx) => (
-        <li className="flex w-full" key={idx}>
+        <li key={idx}>
           {el}
         </li>
       ))}