diff --git a/src/primitive-components/card/card-media.tsx b/src/primitive-components/card/card-media.tsx index 5b6cc84..0cf49ce 100644 --- a/src/primitive-components/card/card-media.tsx +++ b/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( ( - { 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, - className: classes, - ref: ref, - }); + + switch (type) { + case 'img': + return {alt}; + default: + return React.createElement(type, { + ...props, + className: classes, + ref: ref, + }); + } }, ); diff --git a/src/primitive-components/card/card.types.ts b/src/primitive-components/card/card.types.ts index 45d52bb..668eeea 100644 --- a/src/primitive-components/card/card.types.ts +++ b/src/primitive-components/card/card.types.ts @@ -10,9 +10,12 @@ export interface CardActionAreaProps export interface CardProps extends ContainerProps {} export interface CardMediaProps extends HTMLAttributes { - 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 &