42 lines
933 B
TypeScript
42 lines
933 B
TypeScript
import React from 'react';
|
|
|
|
import cls from './Card.module.scss'
|
|
|
|
export type CardComponentProps = {
|
|
title?: string;
|
|
imageURL: string;
|
|
id: string;
|
|
toggled: boolean;
|
|
isMatched: boolean;
|
|
disabled: boolean;
|
|
onClick?: (id: string) => void;
|
|
code?: string;
|
|
}
|
|
|
|
const Card: React.FC<CardComponentProps> = (props) => {
|
|
const classes = [cls.Card, props.toggled ? cls.reverse : ''];
|
|
|
|
function cardClickHandler(id: string) {
|
|
if (props.disabled) return;
|
|
|
|
props.onClick?.(id);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={cls.CardWrapper}
|
|
style={{opacity: props.isMatched ? 0 : 1}}
|
|
onClick={() => cardClickHandler(props.id)}
|
|
>
|
|
<div className={classes.join(' ')} tabIndex={-1}>
|
|
<div className={cls.frontside}>{props.title}</div>
|
|
<div className={cls.backside}>
|
|
<img src={props.imageURL} alt={props.title}/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Card;
|