fix

Author: sparrow-js

components/App.tsx

@@ -30,6 +30,7 @@ import {getPartCodeUid} from './compiler';
 import { useDebounceFn } from 'ahooks';
 import { useRouter } from 'next/navigation';
 import copy from "copy-to-clipboard";
+import CodePreview from './components/CodePreview';
 
 
 const CodeTab = dynamic(
@@ -338,10 +339,13 @@ ${error.stack}
           {(appState === AppState.CODING ||
             appState === AppState.CODE_READY) && (
             <>
+              {appState === AppState.CODING && (
+                <CodePreview code={generatedCode}/>
+              )}
               {/* Show code preview only when coding */}
               {appState === AppState.CODING && (
                 <div className="flex flex-col">
-                  <div className="flex mt-4 w-full">
+                  <div className="flex w-full">
                     <Button
                       onClick={stop}
                       className="w-full dark:text-white dark:bg-gray-700"

components/components/CodePreview.tsx

@@ -17,7 +17,7 @@ function CodePreview({ code }: Props) {
     <div
       ref={scrollRef}
       className="w-full px-2 bg-black text-green-400 whitespace-nowrap flex 
-      overflow-x-auto font-mono text-[10px] my-4"
+      overflow-x-auto font-mono text-[10px] my-2"
     >
       {code}
     </div>

components/components/chatInput/index.tsx

@@ -4,6 +4,20 @@ import { SettingContext } from '../../contexts/SettingContext';
 import { useRouter } from 'next/navigation';
 import { LiaPencilRulerSolid } from "react-icons/lia";
 import classNames from "classnames";
+import { GoArrowUpRight } from "react-icons/go";
+
+const shortcutIdeas = [
+  {
+    id: 'Contactform',
+    label: 'Contact form',
+    value: 'A contact form with first name, last name, email, and message fields. Put the form in a card with a submit button.'
+  },
+  {
+    id: 'Ecommercedashboard',
+    label: 'Ecommerce dashboard',
+    value: 'An ecommerce dashboard with a sidebar navigation and a table of recent orders.'
+  }
+]
 
 interface props {
   openWhiteboard: () => void
@@ -43,12 +57,12 @@ export default function ChatInput({openWhiteboard}: props) {
         <div className='w-full flex items-center justify-center p-6 gap-6'>
             <div
               onClick={open}
-              className='before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block px-2'>
+              className='cursor-pointer before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-pink-500 relative inline-block px-2'>
               <span className='relative text-white'>screenshot</span>
             </div>
             <div
               onClick={openWhiteboard}
-              className='before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-green-500 relative inline-block px-2'>
+              className='cursor-pointer before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-green-500 relative inline-block px-2'>
               <span className='relative text-white'>whiteboard</span>
             </div>
             <div 
@@ -59,7 +73,7 @@ export default function ChatInput({openWhiteboard}: props) {
                   setShowAnim(false);
                 }, 800)
               }}
-              className='before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-cyan-500 relative inline-block px-8'
+              className='cursor-pointer before:block before:absolute before:-inset-1 before:-skew-y-3 before:bg-cyan-500 relative inline-block px-8'
             >
               <span className='relative text-white'>ideas</span>
             </div>
@@ -127,6 +141,24 @@ export default function ChatInput({openWhiteboard}: props) {
               </div>
             </div>
         </div>
+        <div className='flex w-full mt-4 item-center justify-center gap-2'>
+            {
+              shortcutIdeas.map((shortcut) => {
+                return (
+                <button 
+                  className='rounded-full border border-zinc-200 px-2 py-0.5 inline-flex gap-1 items-center whitespace-nowrap select-none hover:border-zinc-800 transition-colors'
+                  onClick={() => {
+                    setInitCreateText(shortcut.value);
+                  }}
+                >
+                  {shortcut.label}
+                  <GoArrowUpRight/>
+                </button>)
+              })
+            }
+           
+
+        </div>
       </div>
     </div>
   );

engine/index.tsx

@@ -50,7 +50,7 @@ export default function PreviewBox({ code, appState, sendMessageChange, history,
         const img = await takeScreenshot();
         setTimeout(() => {
             updateHistoryScreenshot(img);
-        }, 2000)
+        }, 1000)
     }
 
     useEffect(() => {

pages/dashboard/index.tsx

@@ -80,7 +80,7 @@ export default function Dashboard() {
             </div>
             <main>
                 <div className="w-full bg-white dark:bg-gray-800 border-t dark:border-t-gray-600 flex-col flex items-center justify-between p-3">
-                    <div className="relative mt-72 w-[520px] rounded-md shadow-sm">
+                    <div className="relative mt-96 w-[520px] rounded-md shadow-sm">
                         <ChatInput
                             openWhiteboard={() => {
                                 setOpenWhiteboard(true);