Added nicer frames for web and mobile

I kept the total height of the frame the same so viewable area is now less. Also there's a small stutter in the mobile preview due to iframe content loading late, I'll try to find a workaround if necessary.

frontend/src/components/Preview.tsx

@@ -1,5 +1,6 @@
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import classNames from "classnames";
+import { FaSearch } from "react-icons/fa";
 // import useThrottle from "../hooks/useThrottle";
 
 interface Props {
@@ -12,6 +13,7 @@ function Preview({ code, device }: Props) {
   // Temporary disable throttling for the preview not updating when the code changes
   // useThrottle(code, 200);
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
+  const [backgroundColor, setBackgroundColor] = useState<string | null>(null);
 
   useEffect(() => {
     const iframe = iframeRef.current;
@@ -19,24 +21,64 @@ function Preview({ code, device }: Props) {
       iframe.contentDocument.open();
       iframe.contentDocument.write(throttledCode);
       iframe.contentDocument.close();
+
+      setTimeout(() => {
+        const body = iframe.contentDocument!.body;
+        if (body) {
+          const bgColor = window.getComputedStyle(body).backgroundColor;
+          setBackgroundColor(bgColor);
+        }
+      }, 5);
     }
   }, [throttledCode]);
 
   return (
     <div className="flex justify-center mx-2">
-      <iframe
+      <div
-        id={`preview-${device}`}
-        ref={iframeRef}
-        title="Preview"
         className={classNames(
           "border-[4px] border-black rounded-[20px] shadow-lg",
           "transform scale-[0.9] origin-top",
+
           {
             "w-full h-[832px]": device === "desktop",
             "w-[400px] h-[832px]": device === "mobile",
           }
         )}
-      ></iframe>
+        style={{ backgroundColor: `${backgroundColor}` }}
+      >
+        {device === "mobile" ? (
+          <div className="bg-black h-[16px] w-[70px] rounded-full mx-auto my-2.5"></div>
+        ) : (
+          <div className="bg-gray-200 rounded-t-[20px] h-[64px] p-4 flex justify-between items-center">
+            <div className="flex items-center">
+              <div className="flex items-center">
+                <button className="w-4 h-4 bg-gray-400 rounded-full mr-3 ml-3"></button>
+                <button className="w-4 h-4 bg-gray-400 rounded-full mr-3"></button>
+                <button className="w-4 h-4 bg-gray-400 rounded-full"></button>
+              </div>
+            </div>
+            <div className="mx-auto">
+              <FaSearch className="absolute ml-3 mt-3" />
+              <input
+                type="text"
+                disabled
+                style={{ width: "500px" }}
+                placeholder="https://my-app.cool"
+                className="py-2 px-10 bg-gray-100 text-black rounded-full focus:outline-none focus:shadow-outline"
+              />
+            </div>
+          </div>
+        )}
+        <iframe
+          id={`preview-${device}`}
+          ref={iframeRef}
+          title="Preview"
+          className={classNames("rounded-[20px] ", {
+            "w-full h-[760px]": device === "desktop",
+            "w-[392px] h-[788px]": device === "mobile",
+          })}
+        ></iframe>
+      </div>
     </div>
   );
 }