impress/app/javascript/wardrobe-2020/components/OutfitThumbnail.js

import React from "react";
import { Box } from "@chakra-ui/react";

function OutfitThumbnail({ outfitId, updatedAt, ...props }) {
	const versionTimestamp = new Date(updatedAt).getTime();

	// NOTE: It'd be more reliable for testing to use a relative path, but
	//       generating these on dev is SO SLOW, that I'd rather just not.
	const thumbnailUrl150 = `https://outfits.openneo-assets.net/outfits/${outfitId}/v/${versionTimestamp}/150.png`;
	const thumbnailUrl300 = `https://outfits.openneo-assets.net/outfits/${outfitId}/v/${versionTimestamp}/300.png`;

	return (
		<Box
			as="img"
			src={thumbnailUrl150}
			srcSet={`${thumbnailUrl150} 1x, ${thumbnailUrl300} 2x`}
			{...props}
		/>
	);
}

export default OutfitThumbnail;