SteamGameTimeTrack-frontend/src/components/PlayerCard.tsx

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={4} sx={{width: '256px'}}>
            <Card onClick={onClick}>
                <CardContent>
                    <Stack direction="row" spacing={1} sx={{minWidth: "100%", width: "fit-content"}} alignContent={"center"}>
                        <AspectRatio ratio={1} sx={{width: '64px'}}>
                            <img src={player?.avatarUrl} />
                        </AspectRatio>
                        <Typography level={"title-lg"} alignContent={"center"} overflow={"hidden"} noWrap>{player?.name}</Typography>
                    </Stack>
                </CardContent>
            </Card>
        </AspectRatio>
    );
}