feat: add blured image in post header

grzegorzpokorski · Jun 27, 2023 · d78fee7 · d78fee7
1 parent 86bb3a2
commit d78fee7
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 3 deletions.
diff --git a/.prettierrc.json b/.prettierrc.json
@@ -3,4 +3,4 @@
   "trailingComma": "all",
   "printWidth": 80,
   "tabWidth": 2
-}
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/src/components/organisms/PostHeader/PostHeader.tsx b/src/components/organisms/PostHeader/PostHeader.tsx
@@ -39,13 +39,15 @@ export const PostHeader = ({
           <TagsList tags={tags} />
           <picture className="w-full h-60 md:h-80 lg:h-[30rem] overflow-hidden relative block mt-4 rounded-md shadow-md">
             <Image
-              src={featuredImage}
+              src={featuredImage.src}
               width={featuredImage.width}
               height={featuredImage.height}
               alt={featuredImage.alt}
               className="object-cover object-center w-full h-full"
               sizes="(max-width: 720px) 100vw, (max-width: 1140px) 50vw, 66vw"
               priority
+              placeholder="blur"
+              blurDataURL={featuredImage.base64}
             />
           </picture>
         </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,4 +3,4 @@ module.exports = { @@
         tailwindcss: {},
         autoprefixer: {},
       },
-    }
+    };