Replaced multiple previews with one resizable preview. (#158)

Author: mimshwright

packages/plugin-ui/src/PluginUI.tsx

@@ -33,7 +33,6 @@ type PluginUIProps = {
 const frameworks: Framework[] = ["HTML", "Tailwind", "Flutter", "SwiftUI"];
 
 export const PluginUI = (props: PluginUIProps) => {
-  const [isResponsiveExpanded, setIsResponsiveExpanded] = useState(false);
   const isEmpty = props.code === "";
 
   const warnings = props.warnings ?? [];
@@ -67,11 +66,7 @@ export const PluginUI = (props: PluginUIProps) => {
       <div className="flex flex-col h-full overflow-y-auto">
         <div className="flex flex-col items-center px-4 py-2 gap-2 dark:bg-transparent">
           {isEmpty === false && props.htmlPreview && (
-            <Preview
-              htmlPreview={props.htmlPreview}
-              isResponsiveExpanded={isResponsiveExpanded}
-              setIsResponsiveExpanded={setIsResponsiveExpanded}
-            />
+            <Preview htmlPreview={props.htmlPreview} />
           )}
           {warnings.length > 0 && (
             <div className="flex flex-col bg-yellow-400 text-black  dark:bg-yellow-500 dark:text-black p-3 w-full">

packages/plugin-ui/src/components/Preview.tsx

@@ -1,66 +1,49 @@
 import { HTMLPreview } from "types";
-import ExpandIcon from "./ExpandIcon";
 
 const Preview: React.FC<{
   htmlPreview: HTMLPreview;
-  isResponsiveExpanded: boolean;
-  setIsResponsiveExpanded: (value: boolean) => void;
 }> = (props) => {
-  const previewWidths = [45, 80, 140];
-  const labels = ["sm", "md", "lg"];
+  const targetWidth = 240;
+  const targetHeight = 120;
+  const scaleFactor = Math.min(
+    targetWidth / props.htmlPreview.size.width,
+    targetHeight / props.htmlPreview.size.height,
+  );
 
   return (
     <div className="flex flex-col w-full">
       <div className="py-1.5 flex gap-2 w-full text-lg font-medium text-center dark:text-white rounded-lg justify-between">
         <span>Responsive Preview</span>
-        <button
-          className={`px-2 py-1 text-sm font-semibold border border-green-500 rounded-md shadow-sm hover:bg-green-500 dark:hover:bg-green-600 hover:text-white hover:border-transparent transition-all duration-300 ${"bg-neutral-100 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-200 border-neutral-300 dark:border-neutral-600"}`}
-          onClick={() => {
-            props.setIsResponsiveExpanded(!props.isResponsiveExpanded);
-          }}
-        >
-          <ExpandIcon size={16} />
-        </button>
       </div>
       <div className="flex gap-2 justify-center items-center">
-        {previewWidths.map((targetWidth, index) => {
-          const targetHeight = props.isResponsiveExpanded ? 260 : 120;
-          const scaleFactor = Math.min(
-            targetWidth / props.htmlPreview.size.width,
-            targetHeight / props.htmlPreview.size.height,
-          );
-          return (
+        <div
+          className="relative flex flex-col items-center"
+          style={{
+            width: targetWidth,
+            resize: "both",
+            overflow: "auto",
+            minWidth: "100px",
+            minHeight: "100px",
+          }}
+        >
+          <div
+            className="flex flex-col justify-center items-center border border-neutral-200 dark:border-neutral-700 rounded-md shadow-sm w-full h-full"
+            style={{
+              clipPath: "inset(0px round 6px)",
+            }}
+          >
             <div
-              key={"preview " + index}
-              className="relative flex flex-col items-center"
-              style={{ width: targetWidth }}
-            >
-              <div
-                className="flex flex-col justify-center items-center border border-neutral-200 dark:border-neutral-700 rounded-md shadow-sm"
-                style={{
-                  width: targetWidth,
-                  height: targetHeight,
-                  clipPath: "inset(0px round 6px)",
-                }}
-              >
-                <div
-                  style={{
-                    zoom: scaleFactor,
-                    width: "100%",
-                    height: "100%",
-                    display: "flex",
-                  }}
-                  dangerouslySetInnerHTML={{
-                    __html: props.htmlPreview.content,
-                  }}
-                />
-              </div>
-              <span className="mt-auto text-xs text-gray-500">
-                {labels[index]}
-              </span>
-            </div>
-          );
-        })}
+              style={{
+                zoom: scaleFactor,
+                width: "100%",
+                height: "100%",
+              }}
+              dangerouslySetInnerHTML={{
+                __html: props.htmlPreview.content,
+              }}
+            />
+          </div>
+        </div>
       </div>
     </div>
   );