71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import { IonButton, IonCard, IonCardSubtitle, IonCardTitle, IonCol, IonRow } from '@ionic/react';
|
|
|
|
import { useRef } from 'react';
|
|
import { Bag } from 'react-iconly';
|
|
import { addToCart } from '../store/CartStore';
|
|
import '../pages/Home.scss';
|
|
|
|
const ViewCoffeeCard = (props) => {
|
|
const { coffee, cartRef } = props;
|
|
const coffeeCartRef = useRef();
|
|
|
|
const addCoffeeToCart = (e, coffeeID) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
coffeeCartRef.current.style.display = '';
|
|
coffeeCartRef.current.classList.add('animate__fadeOutUp');
|
|
|
|
setTimeout(() => {
|
|
cartRef.current.classList.add('animate__tada');
|
|
addToCart(coffeeID);
|
|
|
|
setTimeout(() => {
|
|
cartRef.current.classList.remove('animate__tada');
|
|
coffeeCartRef.current.style.display = 'none';
|
|
}, 500);
|
|
}, 500);
|
|
};
|
|
|
|
return (
|
|
<IonRow key={coffee.id} className="animate__animated animate__fadeIn">
|
|
<IonCol size="6">
|
|
<IonCard className="coffee-card">
|
|
<img src={coffee.image} alt="coffee type" />
|
|
<IonCardTitle className="custom-margin-left">{coffee.name}</IonCardTitle>
|
|
<IonCardSubtitle className="custom-margin-left">{coffee.summary}</IonCardSubtitle>
|
|
</IonCard>
|
|
</IonCol>
|
|
|
|
<IonCol size="6" className="ion-margin-top ion-padding-top ion-padding-end">
|
|
<IonCardSubtitle>Description</IonCardSubtitle>
|
|
<p>{coffee.description}</p>
|
|
|
|
<IonRow className="ion-justify-content-between">
|
|
<IonCol size="8">
|
|
<IonButton routerLink={`/coffee/${coffee.id}`} color="main" expand="block">
|
|
View →
|
|
</IonButton>
|
|
</IonCol>
|
|
|
|
<IonCol size="4">
|
|
<IonButton color="main" expand="block" onClick={(e) => addCoffeeToCart(e, coffee.id)}>
|
|
<Bag set="bold" />
|
|
</IonButton>
|
|
|
|
<div
|
|
ref={coffeeCartRef}
|
|
style={{ position: 'absolute', display: 'none', fontSize: '3rem' }}
|
|
className="animate__animated"
|
|
>
|
|
<Bag set="bold" />
|
|
</div>
|
|
</IonCol>
|
|
</IonRow>
|
|
</IonCol>
|
|
</IonRow>
|
|
);
|
|
};
|
|
|
|
export default ViewCoffeeCard;
|