Migrate from @astrojs/image to Astro Assets and Unpic

src/components/blog/GridItem.astro

@@ -1,19 +1,19 @@
 ---
-import { Picture } from '@astrojs/image/components';
-import type { ImageMetadata } from 'astro';
-
 import { APP_BLOG_CONFIG } from '~/utils/config';
 import type { Post } from '~/types';
 
+import Image from '~/components/common/Image.astro';
+
 import { findImage } from '~/utils/images';
 import { getPermalink } from '~/utils/permalinks';
 
+
 export interface Props {
   post: Post;
 }
 
 const { post } = Astro.props;
-const image = (await findImage(post.image)) as ImageMetadata | undefined;
+const image = (await findImage(post.image));
 ---
 
 <article class="mb-6 transition">
@@ -21,15 +21,15 @@ const image = (await findImage(post.image)) as ImageMetadata | undefined;
     {
       image && (
         <a href={getPermalink(post.permalink, 'post')}>
-          <Picture
+          <Image
             src={image}
-            class="md:object-cover w-full md:w-auto md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
+            class="w-full md:h-full rounded shadow-lg bg-gray-400 dark:bg-slate-700"
             widths={[400, 900]}
             width={400}
-            height={224}
             sizes="(max-width: 900px) 400px, 900px"
             alt={post.title}
             aspectRatio="16:9"
+            layout="cover"
             loading="lazy"
             decoding="async"
           />