49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import { useState } from "react";
|
|
|
|
interface GameImageProps {
|
|
game: string;
|
|
}
|
|
|
|
export function GameImage({ game }: GameImageProps) {
|
|
const [error, setError] = useState(false);
|
|
|
|
if (error) {
|
|
return (
|
|
<div style={{ width: "100px", marginLeft: "1rem" }}>
|
|
<div
|
|
style={{
|
|
width: "100%",
|
|
height: "150px",
|
|
background: "#ddd",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
color: "#666",
|
|
borderRadius: "8px",
|
|
marginTop: "0.5rem",
|
|
}}
|
|
>
|
|
No Image Available
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{ width: "100px", marginLeft: "1rem" }}>
|
|
<img
|
|
src={`/api/game_thumbnail/${encodeURIComponent(game)}`}
|
|
alt={`${game} cover`}
|
|
onError={() => setError(true)}
|
|
style={{
|
|
width: "100%",
|
|
height: "auto",
|
|
borderRadius: "8px",
|
|
marginTop: "0.5rem",
|
|
objectFit: "cover",
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|