feat: add Image component

src/components/Image.tsx

@@ -0,0 +1,31 @@
+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,5 +1,6 @@
 export * from './Divider';
 export * from './Headline';
+export * from './Image';
 export * from './LegalDate';
 export * from './Link';
 export * from './ListItem';

src/mdx-components.ts

@@ -1,6 +1,7 @@
 import {
 	Divider,
 	Headline,
+	Image,
 	ListItem,
 	OrderedList,
 	Subheadline,
@@ -20,6 +21,7 @@ export const mapping = {
 	h5: Subsubheadline,
 	h6: Subsubheadline,
 	hr: Divider,
+	img: Image,
 	li: ListItem,
 	ol: OrderedList,
 	p: Text,

src/styles/global.css

@@ -84,4 +84,28 @@
 	cite {
 		@apply pie-[0.1em];
 	}
+
+	/** Images */
+	img[src$='.svg'] {
+		@apply border-0 bg-transparent shadow-none;
+	}
+}
+
+@layer components {
+	.image-shadow {
+		@apply relative transition-transform duration-500 ease-in-out;
+
+		&::after {
+			@apply absolute -z-[1] h-full w-full opacity-0 shadow-subtle transition-opacity duration-500 ease-in-out content-[''] block-start-0 inline-start-0;
+		}
+
+		&:hover,
+		&:focus {
+			@apply scale-[1.03];
+
+			&::after {
+				@apply opacity-100;
+			}
+		}
+	}
 }