responsive version OMG + DEEPSITE NAMING

index.html

@@ -4,10 +4,12 @@
     <meta charset="utf-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Space Generator</title>
+    <title>DeepSite | Build with AI ✨</title>
     <meta
       name="description"
-      content="Code and Deploy your Hugging Face Static App in 1-Click 🚀"
+      content="DeepSite is a web development tool that
+    helps you build websites with AI, no code required. Let's deploy your
+    website with DeepSite and enjoy the magic of AI."
     />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

src/components/App.tsx

@@ -3,7 +3,7 @@ import { useRef, useState } from "react";
 import Editor from "@monaco-editor/react";
 import classNames from "classnames";
 import { editor } from "monaco-editor";
-import { useMount, useUnmount, useEvent } from "react-use";
+import { useMount, useUnmount, useEvent, createBreakpoint } from "react-use";
 import { toast } from "react-toastify";
 
 import Header from "./header/header";
@@ -14,7 +14,14 @@ import AskAI from "./ask-ai/ask-ai";
 import { Auth } from "../utils/types";
 import Preview from "./preview/preview";
 
+const useBreakpoint = createBreakpoint({
+  md: 768,
+  lg: 1024,
+});
+
 function App() {
+  const breakpoint = useBreakpoint();
+
   const preview = useRef<HTMLDivElement>(null);
   const editor = useRef<HTMLDivElement>(null);
   const resizer = useRef<HTMLDivElement>(null);
@@ -66,11 +73,14 @@ function App() {
   useMount(() => {
     fetchMe();
     if (!editor.current || !preview.current) return;
-    // Set initial sizes
-    const initialEditorWidth = window.innerWidth / 2;
-    const initialPreviewWidth = window.innerWidth - initialEditorWidth - 4;
-    editor.current.style.width = `${initialEditorWidth}px`;
-    preview.current.style.width = `${initialPreviewWidth}px`;
+
+    if (breakpoint === "lg") {
+      // Set initial sizes
+      const initialEditorWidth = window.innerWidth / 2;
+      const initialPreviewWidth = window.innerWidth - initialEditorWidth - 4;
+      editor.current.style.width = `${initialEditorWidth}px`;
+      preview.current.style.width = `${initialPreviewWidth}px`;
+    }
 
     if (!resizer.current) return;
     resizer.current.addEventListener("mousedown", handleMouseDown);
@@ -91,10 +101,10 @@ function App() {
       <Header>
         <DeployButton html={html} error={error} auth={auth} />
       </Header>
-      <main className="lg:flex w-full hidden">
+      <main className="max-lg:flex-col flex w-full">
         <div
           ref={editor}
-          className="w-full h-full relative"
+          className="w-full h-[30dvh] lg:h-full relative"
           onClick={(e) => {
             if (isAiWorking) {
               e.preventDefault();
@@ -107,9 +117,12 @@ function App() {
           <Editor
             language="html"
             theme="vs-dark"
-            className={classNames("h-[calc(100dvh-96px)]", {
-              "pointer-events-none": isAiWorking,
-            })}
+            className={classNames(
+              "h-[calc(30dvh-41px)] lg:h-[calc(100dvh-96px)]",
+              {
+                "pointer-events-none": isAiWorking,
+              }
+            )}
             value={html}
             onValidate={(markers) => {
               if (markers?.length > 0) {
@@ -137,7 +150,7 @@ function App() {
         </div>
         <div
           ref={resizer}
-          className="bg-gray-700 hover:bg-blue-500 w-2 cursor-col-resize h-[calc(100dvh-54px)]"
+          className="bg-gray-700 hover:bg-blue-500 w-2 cursor-col-resize h-[calc(100dvh-54px)] max-lg:hidden"
         />
         <Preview
           html={html}
@@ -146,12 +159,6 @@ function App() {
           ref={preview}
         />
       </main>
-      <main className="lg:hidden p-5">
-        <p className="p-5 bg-red-500/10 text-red-500 rounded-md text-base text-pretty">
-          This app is not yet optimized for mobile. Please use a desktop browser
-          for the best experience.
-        </p>
-      </main>
     </div>
   );
 }

src/components/ask-ai/ask-ai.tsx

@@ -42,9 +42,11 @@ function AskAI({
       if (request && request.body) {
         if (!request.ok) {
           const res = await request.json();
-          toast.error(res.message);
           if (res.openLogin) {
             setOpen(true);
+          } else {
+            // don't show toast if it's a login error
+            toast.error(res.message);
           }
           setisAiWorking(false);
           return;
@@ -89,16 +91,16 @@ function AskAI({
 
   return (
     <div
-      className={`bg-gray-950 rounded-xl py-2.5 pl-4 pr-2.5 sticky bottom-4 left-4 w-[calc(100%-2rem)] z-10 group ${
+      className={`bg-gray-950 rounded-xl py-2 lg:py-2.5 pl-3.5 lg:pl-4 pr-2 lg:pr-2.5 absolute lg:sticky bottom-3 left-3 lg:bottom-4 lg:left-4 w-[calc(100%-1.5rem)] lg:w-[calc(100%-2rem)] z-10 group ${
         isAiWorking ? "animate-pulse" : ""
       }`}
     >
       <div className="w-full relative flex items-center justify-between">
-        <RiSparkling2Fill className="text-xl text-gray-500 group-focus-within:text-pink-500" />
+        <RiSparkling2Fill className="text-lg lg:text-xl text-gray-500 group-focus-within:text-pink-500" />
         <input
           type="text"
           disabled={isAiWorking}
-          className="w-full bg-transparent outline-none pl-3 text-white placeholder:text-gray-500 font-code"
+          className="w-full bg-transparent max-lg:text-sm outline-none pl-3 text-white placeholder:text-gray-500 font-code"
           placeholder={
             hasAsked ? "What do you want to ask AI next?" : "Ask AI anything..."
           }

src/components/deploy-button/deploy-button.tsx

@@ -58,7 +58,7 @@ function DeployButton({
   };
 
   return (
-    <div className="relative max-lg:hidden flex items-center justify-end">
+    <div className="relative flex items-center justify-end">
       {auth && (
         <p className="mr-3 text-sm text-gray-300">
           Connected as{" "}
@@ -73,7 +73,7 @@ function DeployButton({
       )}
       <button
         className={classNames(
-          "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-sm font-semibold leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
+          "relative cursor-pointer flex-none flex items-center justify-center rounded-md text-xs lg:text-sm font-semibold leading-5 lg:leading-6 py-1.5 px-5 hover:bg-pink-400 text-white shadow-sm dark:shadow-highlight/20",
           {
             "bg-pink-400": open,
             "bg-pink-500": !open,

src/components/header/header.tsx

@@ -3,11 +3,15 @@ import { ReactNode } from "react";
 
 function Header({ children }: { children?: ReactNode }) {
   return (
-    <header className="border-b border-gray-900 px-6 py-2 flex justify-center md:justify-between items-center">
+    <header className="border-b border-gray-900 px-3 lg:px-6 py-2 flex justify-between items-center">
       <div className="flex items-center justify-start gap-3">
-        <h1 className="text-white text-xl font-bold flex items-center justify-start">
-          <img src={SpaceIcon} alt="Space Icon" className="size-8 mr-2" />
-          Space Generator
+        <h1 className="text-white text-lg lg:text-xl font-bold flex items-center justify-start">
+          <img
+            src={SpaceIcon}
+            alt="Space Icon"
+            className="size-6 lg:size-8 mr-2"
+          />
+          DeepSite
         </h1>
         <p className="text-gray-700 max-md:hidden">|</p>
         <p className="text-gray-500 text-sm max-md:hidden">

src/components/preview/preview.tsx

@@ -29,7 +29,7 @@ function Preview({
   return (
     <div
       ref={ref}
-      className="w-full border-l border-gray-900 bg-white h-[calc(100dvh-54px)] relative"
+      className="w-full border-l border-gray-900 bg-white h-[calc(70dvh-53px)] lg:h-[calc(100dvh-54px)] relative"
     >
       <iframe
         ref={iframeRef}
@@ -40,7 +40,7 @@ function Preview({
         srcDoc={html}
       />
       <button
-        className="bg-gray-900 shadow-md text-white text-sm font-medium absolute bottom-5 right-5 py-2 px-4 rounded-lg flex items-center gap-2 border border-gray-800 hover:brightness-150 transition-all duration-100 cursor-pointer"
+        className="bg-gray-950 shadow-md text-white text-xs lg:text-sm font-medium absolute bottom-3 lg:bottom-5 right-3 lg:right-5 py-2 px-3 lg:px-4 rounded-lg flex items-center gap-2 border border-gray-900 hover:brightness-150 transition-all duration-100 cursor-pointer"
         onClick={handleRefreshIframe}
       >
         <TbReload />

src/components/tabs/tabs.tsx

@@ -2,7 +2,7 @@ import Deepseek from "./../../assets/deepseek-color.svg";
 
 function Tabs({ children }: { children?: React.ReactNode }) {
   return (
-    <div className="border-b border-gray-800 pl-7 pr-3 flex items-center justify-between">
+    <div className="border-b border-gray-800 pl-4 lg:pl-7 pr-3 flex items-center justify-between">
       <div
         className="
       space-x-6"

src/utils/consts.ts

@@ -11,6 +11,7 @@ export const defaultHTML = `<!DOCTYPE html>
         align-items: center;
         height: 100dvh;
         font-family: "Arial", sans-serif;
+        text-align: center;
       }
     </style>
   </head>