CHANGED: added conditional render for CardMedia component

src/primitive-components/card/card-media.tsx

@@ -1,17 +1,33 @@
+import Image from 'next/image';
 import React, { forwardRef } from 'react';
 import { CardMediaProps, CardMediaType } from './card.types';
 
 export const CardMedia = forwardRef<CardMediaType, CardMediaProps>(
     (
-        { rounded = true, preview = true, type, className = '', ...props },
+        {
+            alt,
+            src,
+            type,
+            quality = 80,
+            rounded = true,
+            preview = true,
+            className = '',
+            ...props
+        },
         ref,
     ) => {
         const classes =
             `m3 m3-card-media${rounded ? ' m3-rounded' : ''}${preview ? ' m3-preview' : ''} ${className}`.trimEnd();
-        return React.createElement(type, {
+
-            ...props,
+        switch (type) {
-            className: classes,
+            case 'img':
-            ref: ref,
+                return <Image alt={alt} quality={quality} src={src} />;
-        });
+            default:
+                return React.createElement(type, {
+                    ...props,
+                    className: classes,
+                    ref: ref,
+                });
+        }
     },
 );

src/primitive-components/card/card.types.ts

@@ -10,9 +10,12 @@ export interface CardActionAreaProps
 export interface CardProps extends ContainerProps {}
 
 export interface CardMediaProps extends HTMLAttributes<CardMediaType> {
-    type: 'img' | 'video' | 'picture' | 'iframe' | 'audio';
+    alt: string;
+    src: string;
+    quality?: number;
     rounded?: boolean;
     preview?: boolean;
+    type: 'img' | 'video' | 'picture' | 'iframe' | 'audio';
 }
 
 export type CardMediaType = HTMLImageElement &