refactor: created ItemCard component for Store page

src/pages/Store/ItemCard.tsx

+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;

src/pages/Store/Store.tsx

-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>
 		</>