From 4ce5f077d3574061dda7afc03a975ddd904ec371 Mon Sep 17 00:00:00 2001
From: Stefan Imhoff <stefan@imhoff.name>
Date: Thu, 18 May 2023 14:31:50 +0200
Subject: [PATCH] refactor: remove mirrored types of Picture and Image and use
 native types instead

---
 src/components/Image.astro   | 16 ++++------------
 src/components/Picture.astro | 31 ++++++++++++-------------------
 2 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/src/components/Image.astro b/src/components/Image.astro
index 1d0ee35..a446658 100644
--- a/src/components/Image.astro
+++ b/src/components/Image.astro
@@ -1,30 +1,22 @@
 ---
 import cx from 'classnames';
 import { Image } from '@astrojs/image/components';
+import type { ImageComponentLocalImageProps } from '@astrojs/image/components';
 
-interface Props {
-	aspectRatio?: number | `${number}:${number}`;
-	alt?: string;
+interface Props extends ImageComponentLocalImageProps {
 	class?: string;
-	height?: number;
 	noMargin?: boolean;
-	src: string;
-	width: number;
+	slot?: string;
 }
 
-const { aspectRatio, alt, class: className, height, noMargin, src, width, ...props } = Astro.props;
+const { class: className, noMargin, ...props } = Astro.props;
 
 const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
 ---
 
 <div class={classes}>
 	<Image
-		aspectRatio={aspectRatio || '1:1'}
-		alt={alt || ''}
 		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"
-		height={height || 0}
-		src={src}
-		width={width}
 		{...props}
 	/>
 </div>
diff --git a/src/components/Picture.astro b/src/components/Picture.astro
index b9238c3..f0cc53b 100644
--- a/src/components/Picture.astro
+++ b/src/components/Picture.astro
@@ -1,31 +1,24 @@
 ---
 import cx from 'classnames';
-import { Picture } from '@astrojs/image/components';
 
-interface Props {
-	alt?: string;
-	aspectRatio?: number | `${number}:${number}`;
+import { Picture } from '@astrojs/image/components';
+import type { PictureComponentLocalImageProps } from '@astrojs/image/components';
+
+interface Props extends PictureComponentLocalImageProps {
 	class?: string;
-	formats?: string[];
 	noMargin?: boolean;
-	sizes?: string;
-	src: string;
-	widths: number[];
+	slot?: string;
 }
 
-const { alt, aspectRatio, class: className, noMargin, sizes, src, widths, ...props } = Astro.props;
+const { class: className, noMargin, ...props } = Astro.props;
 
-const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
+const classes = cx(
+	'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
+	{ '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}
-	/>
+	<Picture {...props} />
 </div>