Commit c3eaa824 authored by Benjamín Balun's avatar Benjamín Balun
Browse files

refactor: created ItemCard component for Store page

parent ef528e75
import { DollarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Button, Card, Col } from 'antd';
import { Food } from '../../data/food';
import { Pokeball } from '../../data/pokeballs';
type Item = Food | Pokeball;
const ItemCard = ({
item,
key,
callback
}: {
item: Item;
key: number;
callback: (item: Item) => Promise<void>;
}) => (
<Col key={key} style={{ width: '200px' }}>
<Card
title={item.name}
hoverable
cover={
item.image ? (
<img alt={item.name} src={item.image} />
) : (
<QuestionCircleOutlined style={{ fontSize: '150px' }} />
)
}
>
<p>
Price: {item.price} <DollarOutlined />
</p>
<Button type="primary" onClick={() => callback(item)}>
Buy
</Button>
</Card>
</Col>
);
export default ItemCard;
import { Button, Card, Col, Modal, Row } from 'antd';
import { DollarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import { Modal, Row } from 'antd';
import usePageTitle from '../../hooks/usePageTitle';
import { Food, food } from '../../data/food';
......@@ -9,6 +8,7 @@ import { Loading } from '../../utils/Loading';
import { updateUserDataInFirebase } from '../../utils/firebase';
import Funds from './Funds';
import ItemCard from './ItemCard';
const Store = () => {
usePageTitle('Store');
......@@ -72,26 +72,7 @@ const Store = () => {
<Row gutter={[10, 10]}>
{[...food, ...pokeballs].map((item, index) => (
<Col key={index} style={{ width: '200px' }}>
<Card
title={item.name}
hoverable
cover={
item.image ? (
<img alt={item.name} src={item.image} />
) : (
<QuestionCircleOutlined style={{ fontSize: '150px' }} />
)
}
>
<p>
Price: {item.price} <DollarOutlined />
</p>
<Button type="primary" onClick={() => buyItem(item)}>
Buy
</Button>
</Card>
</Col>
<ItemCard item={item} key={index} callback={buyItem} />
))}
</Row>
</>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment