feat: allow next/img

src/components/Atoms/Image/Image.tsx

@@ -1,11 +1,15 @@
 import React, { FC, ImgHTMLAttributes } from 'react';
-import { ImageService } from './ImageService';
 
 /*
  * Type
  */
 
-export type TImage = {
+type TImage<T> = {
+	/**
+	 * optional: HTML tag to render an image (e.g. NextImage)
+	 */
+	imageComponent?: FC<T>;
+
 	/**
 	 * src of the image
 	 */
@@ -30,11 +34,12 @@ export type TImage = {
 	 * optional: caption string for text caption of the image11
 	 */
 	caption?: string;
-} & ImgHTMLAttributes<HTMLImageElement>;
+} & Omit<T, 'className' | 'src' | 'alt'>;
 
 /**
  * Controls for Image Component
  *
+ * @param { string } imageComponent - HTML tag to render an image (e.g. NextImage)
  * @param { string } src for image
  * @param { number } width display width for image
  * @param { number } height display height for image (optional)
@@ -43,15 +48,24 @@ export type TImage = {
  *
  * @example	<Image src="//picsum.photos/id/28/1600/1587/" alt="lemon tree" width="640" height="320" />
  */
-
-export const Image: FC<TImage> = ({ src, alt = '', caption, ...props }) => {
-	props = {
-		...ImageService.imgAttr(props.width as number, props.height as number, src as string),
-	};
+export function Image<T = ImgHTMLAttributes<HTMLImageElement>>({
+	imageComponent,
+	src,
+	alt,
+	caption,
+	...props
+}: Omit<TImage<T>, 'className'>): JSX.Element {
+	const ImageComponent = imageComponent || 'img';
 	return (
 		<figure className="bg-purple-200">
-			<img className="block object-cover h-full w-full" src={src} alt={alt} {...props} />
+			<ImageComponent
+				// eslint-disable-next-line @typescript-eslint/no-explicit-any
+				{...(props as any)}
+				className="block object-cover h-full w-full"
+				src={src}
+				alt={alt}
+			/>
 			{caption ? <figcaption>{caption}</figcaption> : null}
 		</figure>
 	);
-};
+}

src/components/Atoms/Link/Link.tsx

@@ -27,8 +27,6 @@ type TLink<T> = {
 	newTab?: boolean;
 } & Omit<T, 'className' | 'target' | 'rel'>;
 
-
-
 /*
  * Style
  */

src/components/Molecules/ImageOverlay/ImageOverlay.stories.tsx

@@ -3,7 +3,6 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { ImageOverlay as Component } from './ImageOverlay';
 import { IconNames } from '../../Atoms/Icon/IconLib';
-import { Image } from '../../Atoms/Image';
 
 export default {
 	title: 'Components/Molecules/ImageOverlay',
@@ -23,7 +22,7 @@ const Template: ComponentStory<typeof Component> = (args): JSX.Element => <Compo
 export const EditOverlay = Template.bind({});
 export const ZoomOverlay = Template.bind({});
 
-const img = <Image width={584} height={320} src="//picsum.photos/id/28/1600/1587/" alt={''} />;
+const img = <img width={584} height={320} src="//picsum.photos/id/28/1600/1587/" alt={''} />;
 
 EditOverlay.args = {
 	preset: 'edit',

src/components/Molecules/RoundButton/RoundButton.tsx

@@ -65,4 +65,4 @@ export function RoundButton<
 			{icon ? <Icon name={icon} /> : null}
 		</Tag>
 	);
-};
+}

src/components/Molecules/UserProfile/UserProfile.tsx

@@ -1,6 +1,7 @@
 import React, { FC } from 'react';
 import { Image } from '../../Atoms/Image';
 import { RoundButton } from '../RoundButton/RoundButton';
+import { ImageService } from '../../Atoms/Image/ImageService';
 
 /*
  * Settings
@@ -85,12 +86,15 @@ const noAvatar =
 export const UserProfile: FC<TUserProfile> = ({ size = 'M', border, href, userName, avatar, buttonLabel }) => {
 	const baseStyle = ['inline-flex', 'rounded-full', 'self-center', 'bg-purple-200', border && 'border-6'];
 
+	const imgProps = {
+		...ImageService.imgAttr(imgMap[size], imgMap[size], avatar || noAvatar),
+	};
 	if (href) {
 		if (size !== 'XL') {
 			return (
 				<div className={[...baseStyle, 'overflow-hidden', sizeMap[size]].join(' ')}>
 					<a href={href} className="transition duration-300 ease-in-out hover:scale-110">
-						<Image src={avatar || noAvatar} alt={userName} width={imgMap[size]} height={imgMap[size]} />
+						<Image alt={userName} {...imgProps} />
 						<span className="sr-only">{buttonLabel}</span>
 					</a>
 				</div>
@@ -99,7 +103,7 @@ export const UserProfile: FC<TUserProfile> = ({ size = 'M', border, href, userNa
 			return (
 				<div className={[...baseStyle, sizeMap[size], 'relative'].join(' ')}>
 					<div className="rounded-full overflow-hidden">
-						<Image src={avatar || noAvatar} alt={userName} width={imgMap[size]} height={imgMap[size]} />
+						<Image alt={userName} {...imgProps} />
 					</div>
 					<div className="absolute -bottom-1 -right-1 md:-bottom-2 md:-right-2 sm:-bottom-4 sm:-right-4">
 						<RoundButton icon="edit" colorScheme="slate" buttonLabel={buttonLabel} />
@@ -111,7 +115,7 @@ export const UserProfile: FC<TUserProfile> = ({ size = 'M', border, href, userNa
 
 	return (
 		<div className={[...baseStyle, 'overflow-hidden', sizeMap[size]].join(' ')}>
-			<Image src={avatar} alt={userName} width={imgMap[size]} height={imgMap[size]} />
+			<Image alt={userName} {...imgProps} />
 		</div>
 	);
 };

src/templates/Snippets/ContentCard/ContentCard.tsx

@@ -7,6 +7,7 @@ import { Image } from '../../../components/Atoms/Image';
 import { Richtext } from '../../../components/Atoms/Richtext';
 import { Label } from '../../../components/Atoms/Label';
 
+import { ImageService } from '../../../components/Atoms/Image/ImageService';
 import { IconText } from '../../../components/Molecules/IconText';
 import { ImageOverlay } from '../../../components/Molecules/ImageOverlay';
 import { InteractionButton } from '../../../components/Molecules/InteractionButton';
@@ -79,6 +80,15 @@ export const ContentCard: FC<TContentCard> = ({ variant, post }) => {
 		</Grid>
 	);
 
+	const imgProps = {
+		...ImageService.imgAttr(
+			ProjectSettings.images.post.width,
+			(ProjectSettings.images.post.width / ProjectSettings.images.post.aspectRatio[0]) *
+				ProjectSettings.images.post.aspectRatio[1],
+			post.image || ''
+		),
+	};
+
 	return (
 		<UserContentCard
 			headline={headerSlotContent}
@@ -101,15 +111,7 @@ export const ContentCard: FC<TContentCard> = ({ variant, post }) => {
 					}}
 					borderRadius="M"
 				>
-					<Image
-						width={ProjectSettings.images.post.width}
-						height={
-							(ProjectSettings.images.post.width / ProjectSettings.images.post.aspectRatio[0]) *
-							ProjectSettings.images.post.aspectRatio[1]
-						}
-						src={post.image}
-						alt={''}
-					/>
+					<Image {...imgProps} alt={''} />
 				</ImageOverlay>
 			)}
 

src/templates/Snippets/ProfileHeader/ProfileHeader.tsx

@@ -6,13 +6,22 @@ import { UserProfile } from '../../../components/Molecules/UserProfile';
 import { ImageOverlay } from '../../../components/Molecules/ImageOverlay';
 
 import { User } from '../../../types/User';
+import { ImageService } from '../../../components/Atoms/Image/ImageService';
 import ProjectSettings from '../../../utils/ProjectSettings.json';
 
 type TProfileHeader = {
 	user: User;
 };
 
 export const ProfileHeader: FC<TProfileHeader> = ({ user }) => {
+	const imgProps = {
+		...ImageService.imgAttr(
+			ProjectSettings.images.header.width,
+			(ProjectSettings.images.header.width / ProjectSettings.images.header.aspectRatio[0]) *
+				ProjectSettings.images.header.aspectRatio[1],
+			user.posterImage
+		),
+	};
 	return (
 		<div className="relative mb-6">
 			<ImageOverlay
@@ -23,15 +32,7 @@ export const ProfileHeader: FC<TProfileHeader> = ({ user }) => {
 				}}
 				borderRadius="L"
 			>
-				<Image
-					src={user.posterImage}
-					alt={user.userName}
-					width={ProjectSettings.images.header.width}
-					height={
-						(ProjectSettings.images.header.width / ProjectSettings.images.header.aspectRatio[0]) *
-						ProjectSettings.images.header.aspectRatio[1]
-					}
-				/>
+				<Image {...imgProps} alt={''} />
 			</ImageOverlay>
 			<div className="absolute right-8 bottom-0 translate-y-1/2 z-10">
 				<UserProfile