list of items added

src/pages/Store.tsx

 import { Button, Card, Col, Modal, Row, Typography } from 'antd';
 import { DollarOutlined, QuestionCircleOutlined } from '@ant-design/icons';
+import { useMemo, useState } from 'react';
 
 import usePageTitle from '../hooks/usePageTitle';
+import { Food, food } from '../data/food';
+import { Pokeball, pokeballs } from '../data/pokeballs';
 import { useLoggedInUser } from '../hooks/useLoggedInUser';
 import { Loading } from '../utils/Loading';
 
@@ -14,11 +17,36 @@ const Store = () => {
 	}
 
 	return (
+		<>
 			<div style={{ textAlign: 'right' }}>
 				<Typography>
 					Current funds: {userData?.actualScore} <DollarOutlined />
 				</Typography>
 			</div>
+
+			<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">Buy</Button>
+						</Card>
+					</Col>
+				))}
+			</Row>
+		</>
 	);
 };