enhance image size for feature post

src/components/FeaturedPost/FeaturedPost.tsx

@@ -15,7 +15,19 @@ const FeaturedPost = ({ post }: Props) => {
           <PostWrapper>
             <Post
               data={post}
-              appearance={{ imageProps: { fill: true, height: '480px' } }}
+              appearance={{
+                imageProps: {
+                  fill: true,
+                  height: '480px',
+                  nextImageProps: post.coverImage
+                    ? {
+                        quality: 100,
+                        width: post.coverImage?.width * 2,
+                        height: post.coverImage?.height * 2,
+                      }
+                    : {},
+                },
+              }}
             />
           </PostWrapper>
         </PostLink>

src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -1,13 +1,11 @@
 import React, { useState } from 'react'
 import Image, { ImageProps } from 'next/image'
 import { ImageBlockEnhanced, UnbodyImageBlock } from '@/lib/unbody/unbody.types'
-import Imgix from 'react-imgix'
 import styled from '@emotion/styled'
-import { Blurhash } from 'react-blurhash'
 
 export type ResponsiveImageProps = {
   height?: number | string
-  nextImageProps?: ImageProps
+  nextImageProps?: Partial<ImageProps>
   fill?: boolean
 }
 
@@ -48,7 +46,12 @@ export const ResponsiveImage = ({
         background: 'red',
       }}
     >
-      <img src={lazyUrl} />
+      <Image
+        src={lazyUrl}
+        alt={data.alt}
+        width={data.width}
+        height={data.height}
+      />
       <Image {...imageProps} />
     </Container>
   )