first commit

src/features/htmlBuilder/generated/GeneratePreviewImage.jsx

@@ -0,0 +1,53 @@
+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;