Add device selector

server.js

@@ -281,7 +281,7 @@ app.post("/api/ask-ai", async (req, res) => {
       messages: [
         {
           role: "system",
-          content: `ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head). Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE`,
+          content: `ONLY USE HTML, CSS AND JAVASCRIPT. If you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT. MAKE IT RESPONSIVE USING TAILWINDCSS. Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head). Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE`,
         },
         ...(previousPrompt
           ? [

src/components/preview/preview.tsx

@@ -1,8 +1,10 @@
 import classNames from "classnames";
-import { useRef } from "react";
+import { useRef, useState } from "react";
+import { FaLaptopCode } from "react-icons/fa6";
+import { FaMobileAlt } from "react-icons/fa";
+
 import { TbReload } from "react-icons/tb";
 import { toast } from "react-toastify";
-import { FaLaptopCode } from "react-icons/fa6";
 import { defaultHTML } from "../../../utils/consts";
 
 function Preview({
@@ -18,6 +20,7 @@ function Preview({
   setView: React.Dispatch<React.SetStateAction<"editor" | "preview">>;
   ref: React.RefObject<HTMLDivElement | null>;
 }) {
+  const [device, setDevice] = useState<"desktop" | "mobile">("desktop");
   const iframeRef = useRef<HTMLIFrameElement | null>(null);
 
   const handleRefreshIframe = () => {
@@ -34,7 +37,12 @@ function Preview({
   return (
     <div
       ref={ref}
-      className="w-full border-l border-gray-900 bg-white h-[calc(100dvh-49px)] lg:h-[calc(100dvh-53px)] relative"
+      className={classNames(
+        "w-full border-l border-gray-900 bg-gray-950 h-[calc(100dvh-49px)] lg:h-[calc(100dvh-53px)] relative transition-all duration-200",
+        {
+          "flex items-center justify-center": device === "mobile",
+        }
+      )}
       onClick={(e) => {
         if (isAiWorking) {
           e.preventDefault();
@@ -46,9 +54,15 @@ function Preview({
       <iframe
         ref={iframeRef}
         title="output"
-        className={classNames("w-full h-full select-none", {
-          "pointer-events-none": isResizing || isAiWorking,
-        })}
+        className={classNames(
+          "w-full select-none transition-all duration-200",
+          {
+            "pointer-events-none": isResizing || isAiWorking,
+            "max-w-md mx-auto h-[80dvh] rounded-[86px] border-[8px] border-black":
+              device === "mobile",
+            "h-full": device === "desktop",
+          }
+        )}
         srcDoc={html}
       />
       <div className="flex items-center justify-start gap-3 absolute bottom-3 lg:bottom-5 max-lg:left-3 lg:right-5">
@@ -68,6 +82,42 @@ function Preview({
             🖼️ <span>DeepSite Gallery</span>
           </a>
         )}
+        {html !== defaultHTML && !isAiWorking && (
+          <div className="flex items-center rounded-lg p-1 bg-gray-200 relative overflow-hidden z-0 max-lg:hidden">
+            <div
+              className={classNames(
+                "absolute left-1 top-1 rounded-md bg-black w-10 h-8 -z-[1] transition-all duration-200",
+                {
+                  "translate-x-full": device === "mobile",
+                }
+              )}
+            />
+            <button
+              className={classNames(
+                "rounded-md text-gray-500 w-10 h-8 flex items-center justify-center cursor-pointer",
+                {
+                  "!text-white": device === "desktop",
+                  "hover:bg-gray-300/60": device !== "desktop",
+                }
+              )}
+              onClick={() => setDevice("desktop")}
+            >
+              <FaLaptopCode className="text-sm" />
+            </button>
+            <button
+              className={classNames(
+                "rounded-md text-gray-500 w-10 h-8 flex items-center justify-center cursor-pointer",
+                {
+                  "!text-white": device === "mobile",
+                  "hover:bg-gray-300/60": device !== "mobile",
+                }
+              )}
+              onClick={() => setDevice("mobile")}
+            >
+              <FaMobileAlt className="text-sm" />
+            </button>
+          </div>
+        )}
         {!isAiWorking && (
           <button
             className="bg-white lg:bg-gray-950 shadow-md text-gray-950 lg:text-white text-xs lg:text-sm font-medium py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-100 lg:border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"

utils/consts.ts

@@ -13,6 +13,7 @@ export const defaultHTML = `<!DOCTYPE html>
         height: 100dvh;
         font-family: "Arial", sans-serif;
         text-align: center;
+        background-color: #fff;
       }
       .arrow {
         position: absolute;