feat: add Picture component using Astro Picture

src/components/Picture.astro

@@ -0,0 +1,30 @@
+---
+import cx from 'classnames';
+import { Picture } from '@astrojs/image/components';
+
+interface Props {
+	alt?: string;
+	aspectRatio?: number | `${number}:${number}`;
+	class?: string;
+	noMargin?: boolean;
+	sizes?: string;
+	src: string;
+	widths: number[];
+}
+
+const { alt, aspectRatio, class: className, noMargin, sizes, src, widths, ...props } = Astro.props;
+
+const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
+---
+
+<div class={classes}>
+	<Picture
+		alt={alt || ''}
+		aspectRatio={aspectRatio}
+		class="block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10"
+		sizes={sizes}
+		src={src}
+		widths={widths}
+		{...props}
+	/>
+</div>

src/components/index.ts

@@ -4,6 +4,7 @@ import EmailLink from './EmailLink.astro';
 import Image from './Image.astro';
 import MoreLink from './MoreLink.astro';
 import Pagination from './Pagination.astro';
+import Picture from './Picture.astro';
 import ProjectContainer from './ProjectContainer.astro';
 import ProjectContent from './ProjectContent.astro';
 import ProjectImage from './ProjectImage.astro';
@@ -38,6 +39,7 @@ export {
 	Image,
 	MoreLink,
 	Pagination,
+	Picture,
 	ProjectContainer,
 	ProjectContent,
 	ProjectImage,