41 lines
1.2 KiB
TypeScript
41 lines
1.2 KiB
TypeScript
import Image from "next/image";
|
|
|
|
import { Card, MetaLabel, Typography } from "@/components/ui";
|
|
import { IconName } from "@/components/ui/Icon/Icon";
|
|
import { CompatibilityAction } from "@/entities/dashboard/types";
|
|
|
|
import styles from "./CompatibilityCard.module.scss";
|
|
|
|
type CompatibilityCardProps = CompatibilityAction;
|
|
|
|
export default function CompatibilityCard({
|
|
imageUrl,
|
|
title,
|
|
type,
|
|
minutes
|
|
}: CompatibilityCardProps) {
|
|
return (
|
|
<Card className={styles.card}>
|
|
<Image
|
|
className={styles.compatibilityImage}
|
|
src={imageUrl}
|
|
alt="Compatibility image"
|
|
width={120}
|
|
height={110}
|
|
/>
|
|
<div className={styles.content}>
|
|
<Typography size="lg" weight="medium" align="left">
|
|
{title}
|
|
</Typography>
|
|
<MetaLabel iconLabelProps={{
|
|
iconProps: {
|
|
name: IconName.Article,
|
|
},
|
|
children: <Typography color="secondary">{type}</Typography>
|
|
}}>
|
|
{minutes} min
|
|
</MetaLabel>
|
|
</div>
|
|
</Card>
|
|
)
|
|
} |