27 lines
855 B
TypeScript
27 lines
855 B
TypeScript
import { IonCard, IonCardSubtitle, IonCardTitle, IonCol } from '@ionic/react';
|
|
import { ArrowRightSquare } from 'react-iconly';
|
|
|
|
import styles from './CoffeeCard.module.css';
|
|
|
|
const CoffeeCard = (props) => {
|
|
const { coffee } = props;
|
|
|
|
return (
|
|
<IonCol size="6" className="animate__animated animate__fadeIn">
|
|
<IonCard className={styles.coffeeCard} routerLink={`/coffee/${coffee.id}`}>
|
|
<img src={coffee.image} alt="coffee" />
|
|
<IonCardTitle>{coffee.name}</IonCardTitle>
|
|
<IonCardSubtitle>{coffee.summary}</IonCardSubtitle>
|
|
<div className={styles.coffeePrice}>
|
|
<h4>${coffee.price}</h4>
|
|
<div className={styles.coffeeAddButton}>
|
|
<ArrowRightSquare set="bold" className="yellow-icon" />
|
|
</div>
|
|
</div>
|
|
</IonCard>
|
|
</IonCol>
|
|
);
|
|
};
|
|
|
|
export default CoffeeCard;
|