54 lines
1.4 KiB
JavaScript
54 lines
1.4 KiB
JavaScript
import { useSharedState } from "../../../store/useSharedState";
|
|
|
|
function GeneratePreviewImage({ preview, urls }) {
|
|
const imagePrefix =
|
|
import.meta.env.MODE === "development"
|
|
? import.meta.env.VITE_PUBLIC_URL
|
|
: "";
|
|
const previewMode = useSharedState((state) => state.previewMode);
|
|
const urlRadioPoint = useSharedState((state) => state.urlRadioPoint);
|
|
const photoAlt = useSharedState((state) => state.photoAlt);
|
|
|
|
if (preview)
|
|
return (
|
|
<img
|
|
src={`${imagePrefix}/${urls[previewMode]}`}
|
|
alt={photoAlt || ""}
|
|
className="idm_picture__img"
|
|
loading="lazy"
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<>
|
|
{urlRadioPoint === "rwd" ? (
|
|
<picture>
|
|
<source
|
|
srcSet={`${imagePrefix}/${urls.desktop}`}
|
|
media="(min-width: 979px)"
|
|
/>
|
|
<source
|
|
srcSet={`${imagePrefix}/${urls.tablet}`}
|
|
media="(min-width: 757px)"
|
|
/>
|
|
<img
|
|
src={`${imagePrefix}/${urls.mobile}`}
|
|
alt={photoAlt || ""}
|
|
className="idm_picture__img"
|
|
loading="lazy"
|
|
/>
|
|
</picture>
|
|
) : (
|
|
<img
|
|
src={`${imagePrefix}/${urls.single}`}
|
|
alt={photoAlt || ""}
|
|
className="idm_picture__img"
|
|
loading="lazy"
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default GeneratePreviewImage;
|