51 lines
1.1 KiB
TypeScript
51 lines
1.1 KiB
TypeScript
import { useState } from "react";
|
|
import { Image, Box, ImageProps } from "theme-ui";
|
|
|
|
import { useDataURL } from "../../contexts/AssetsContext";
|
|
|
|
import { tokenSources as defaultTokenSources } from "../../tokens";
|
|
import { Token } from "../../types/Token";
|
|
|
|
import TokenOutlineSVG from "./TokenOutline";
|
|
|
|
type TokenImageProps = {
|
|
token: Token;
|
|
} & ImageProps;
|
|
|
|
function TokenImage({ token, ...props }: TokenImageProps) {
|
|
const tokenURL = useDataURL(
|
|
token,
|
|
defaultTokenSources,
|
|
undefined,
|
|
token.type === "file"
|
|
);
|
|
|
|
const [showOutline, setShowOutline] = useState(true);
|
|
|
|
return (
|
|
<>
|
|
{showOutline && (
|
|
<Box
|
|
title={props.alt}
|
|
aria-label={props.alt}
|
|
sx={{ width: "100%", height: "100%", minHeight: 0 }}
|
|
>
|
|
<TokenOutlineSVG
|
|
outline={token.outline}
|
|
width={token.width}
|
|
height={token.height}
|
|
/>
|
|
</Box>
|
|
)}
|
|
<Image
|
|
onLoad={() => setShowOutline(false)}
|
|
src={tokenURL}
|
|
style={showOutline ? { display: "none" } : props.style}
|
|
{...props}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default TokenImage;
|