refactor: change Image component to use Astro Image

src/components/Image.astro

@@ -0,0 +1,30 @@
+---
+import cx from 'classnames';
+import { Image } from '@astrojs/image/components';
+
+interface Props {
+	aspectRatio?: number | `${number}:${number}`;
+	alt?: string;
+	class?: string;
+	height?: number;
+	noMargin?: boolean;
+	src: string;
+	width: number;
+}
+
+const { aspectRatio, alt, class: className, height, noMargin, src, width, ...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>

src/components/Image.tsx

@@ -1,31 +0,0 @@
-import cx from 'classnames';
-
-import type { FunctionalComponent } from 'preact';
-
-interface Props {
-	alt: string;
-	class?: string;
-	noMargin?: boolean;
-	src: string;
-}
-
-export const Image: FunctionalComponent<Props> = ({
-	alt,
-	class: className,
-	noMargin,
-	src,
-	...props
-}) => {
-	const classes = cx('image-shadow mbe-10 mbs-0', { 'mbe-0': noMargin }, className);
-
-	return (
-		<div class={classes}>
-			<img
-				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"
-				src={src}
-				{...props}
-			/>
-		</div>
-	);
-};

src/components/index.ts

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import DownloadLink from './DownloadLink.astro';
 import EmailLink from './EmailLink.astro';
+import Image from './Image.astro';
 import MoreLink from './MoreLink.astro';
 import Pagination from './Pagination.astro';
 import ProjectContainer from './ProjectContainer.astro';
@@ -16,7 +17,6 @@ export * from './ColorSwatch';
 export * from './Divider';
 export * from './Flag';
 export * from './Headline';
-export * from './Image';
 export * from './LegalDate';
 export * from './Link';
 export * from './ListItem';
@@ -35,6 +35,7 @@ export * from './YouTubeVideo';
 export {
 	DownloadLink,
 	EmailLink,
+	Image,
 	MoreLink,
 	Pagination,
 	ProjectContainer,