From 391b52a6986b5b7a824c1ef2c5f1d497247045ec Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Tue, 16 May 2023 21:55:18 +0200
Subject: [PATCH] feat: add Picture component using Astro Picture

---
 src/components/Picture.astro | 30 ++++++++++++++++++++++++++++++
 src/components/index.ts      |  2 ++
 2 files changed, 32 insertions(+)
 create mode 100644 src/components/Picture.astro

diff --git a/src/components/Picture.astro b/src/components/Picture.astro
new file mode 100644
index 0000000..e228e01
--- /dev/null
+++ b/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>
diff --git a/src/components/index.ts b/src/components/index.ts
index 39ff978..730fb70 100644
--- a/src/components/index.ts
+++ b/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,