implemented purchase of a reserved card

src/components/Player/Player.tsx

@@ -5,6 +5,7 @@ import { CardData, PlayerData } from "../../util/types"
 import { hasMaxReserved } from "./ActionMethods/reserveCardActions";
 import { hasMaxChips } from "./ActionMethods/getChipsActions";
 import { v4 } from "uuid";
+import Card from "../Card/Card";
 
 export default function Player({ player, state, setState }: PlayerProps) {
     const [dynamic, setDynamic] = useState<PlayerData>();
@@ -30,17 +31,7 @@ export default function Player({ player, state, setState }: PlayerProps) {
             <p>Reserved cards:</p>
             {
                 dynamic.reservedCards?.map((data: CardData) => {
-                    return (
-                        <div key={v4()} className="mini-card" id={`${dynamic.name}-player-ui`} style={{backgroundColor: 'white'}}>
-                            <p>{data.gemValue} cards</p>
-                            <p>{data.points + " points" || null}</p>
-                            {
-                                Object.entries(data.resourceCost).map(([key, value]) => {
-                                    return value > 0 && <p key={v4()}>{key}: {value}</p>
-                                })
-                            }
-                        </div>
-                    )
+                    return <Card key={v4()} data={data} state={state} setState={setState} />
                 })
             }
             </>