44 lines
1.0 KiB
TypeScript
44 lines
1.0 KiB
TypeScript
import Image from "next/image";
|
|
|
|
import { Card, MetaLabel, Typography } from "@/components/ui";
|
|
import { IconName } from "@/components/ui/Icon/Icon";
|
|
import { Action } from "@/entities/dashboard/types";
|
|
|
|
import styles from "./CompatibilityCard.module.scss";
|
|
|
|
type CompatibilityCardProps = Action;
|
|
|
|
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>
|
|
);
|
|
}
|