Chart

src/components/PlayerCard.tsx

@@ -0,0 +1,19 @@
+import {AspectRatio, Card, CardContent, Stack, Typography} from "@mui/joy";
+import type IPlayer from "../api/types/IPlayer.ts";
+
+export default function PlayerCard({player, onClick} : {player: IPlayer | null, onClick?: React.MouseEventHandler<HTMLDivElement> | undefined}) {
+    return (
+        <AspectRatio ratio={3} sx={{width: '192px'}}>
+            <Card onClick={onClick}>
+                <CardContent sx={{width: "100%"}}>
+                    <Stack direction="row" spacing={1} justifyContent={"flex-start"} sx={{width: "100%"}} alignContent={"center"}>
+                        <AspectRatio ratio={1} sx={{width: '64px'}}>
+                            <img src={player?.avatarUrl} />
+                        </AspectRatio>
+                        <Typography level={"h4"} alignContent={"center"}>{player?.name}</Typography>
+                    </Stack>
+                </CardContent>
+            </Card>
+        </AspectRatio>
+    );
+}