basic modal functionality added

src/pages/Store.tsx

@@ -12,6 +12,12 @@ const Store = () => {
 	usePageTitle('Store');
 	const { userData } = useLoggedInUser();
 
+	const [selectedItem, setSelectedItem] = useState<Food | Pokeball>();
+	const isModalVisible = useMemo(
+		() => selectedItem !== undefined,
+		[selectedItem]
+	);
+
 	if (!userData) {
 		return <Loading />;
 	}
@@ -41,11 +47,21 @@ const Store = () => {
 							<p>
 								Price: {item.price} <DollarOutlined />
 							</p>
-							<Button type="primary">Buy</Button>
+							<Button type="primary" onClick={() => setSelectedItem(item)}>
+								Buy
+							</Button>
 						</Card>
 					</Col>
 				))}
 			</Row>
+			<Modal
+				title="Confirm purchase"
+				visible={isModalVisible}
+				onOk={() => setSelectedItem(undefined)}
+				onCancel={() => setSelectedItem(undefined)}
+			>
+				Are you sure that you want to buy {selectedItem?.name}?
+			</Modal>
 		</>
 	);
 };