COMPLETE: CardMedia component

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

@@ -1,21 +1,17 @@
-// import { forwardRef } from 'react';
-// import { CardMediaProps, CardMedia } from "./card.types";
+import React, { forwardRef } from 'react';
+import { CardMediaProps, CardMediaType } from './card.types';
 
-// export const CardMedia = forwardRef<CardMedia, CardMediaProps>(
-//     ({rounded = true, preview = true, type, ...props}, ref) => {
-//     const classes = `m3 m3-card-media${rounded ? ' media-rounded' : ''}${preview ? ' media-preview' : ''} ${props.className ?? ''}`.trimEnd();
-//     switch (type){
-//         case "audio":
-//             break;
-//         case "iframe":
-//             break;
-//         case "img":
-//             break;
-//         case "picture":
-//             break;
-//         case "video":
-//             break;
-//         default:
-//             break;
-//     }
-// }
+export const CardMedia = forwardRef<CardMediaType, CardMediaProps>(
+    (
+        { rounded = true, preview = true, type, className = '', ...props },
+        ref,
+    ) => {
+        const classes =
+            `m3 m3-card-media${rounded ? ' m3-rounded' : ''}${preview ? ' m3-preview' : ''} ${className}`.trimEnd();
+        return React.createElement(type, {
+            ...props,
+            className: classes,
+            ref: ref,
+        });
+    },
+);

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

@@ -9,13 +9,13 @@ export interface CardActionAreaProps
 
 export interface CardProps extends ContainerProps {}
 
-export interface CardMediaProps extends HTMLAttributes<CardMedia> {
+export interface CardMediaProps extends HTMLAttributes<CardMediaType> {
     type: 'img' | 'video' | 'picture' | 'iframe' | 'audio';
     rounded?: boolean;
     preview?: boolean;
 }
 
-export type CardMedia = HTMLImageElement &
+export type CardMediaType = HTMLImageElement &
     HTMLVideoElement &
     HTMLPictureElement &
     HTMLMediaElement &