From a942d22151a5d328d01b136e5b39e46127443be5 Mon Sep 17 00:00:00 2001
From: doryan <sagiev2015@yandex.ru>
Date: Sat, 3 Feb 2024 12:56:49 +0400
Subject: [PATCH] CHANGED: added conditional render for CardMedia component
---
src/primitive-components/card/card-media.tsx | 28 +++++++++++++++-----
src/primitive-components/card/card.types.ts | 5 +++-
2 files changed, 26 insertions(+), 7 deletions(-)
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<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,
- className: classes,
- ref: ref,
- });
+
+ switch (type) {
+ case 'img':
+ return <Image alt={alt} quality={quality} src={src} />;
+ 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<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 &