diff --git a/packages/api/prompts/app-builder.txt b/packages/api/prompts/app-builder.txt index ad1a3389..152fd505 100644 --- a/packages/api/prompts/app-builder.txt +++ b/packages/api/prompts/app-builder.txt @@ -38,6 +38,8 @@ - The goal is to get a FUNCTIONAL MVP. All of the parts for this MVP should be included. - Your job is to be precise and effective, so avoid extraneous steps even if they offer convenience. - Do not talk or worry about testing. The user wants to _use_ the app: the core goal is for it to _work_. +- For react: modularize components into their own files, even small ones. We don't want one large App.tsx with everything inline, but different components in their respective src/components/{Component}.tsx files +- For styles: apply modern, minimalistic styles. Things shoud look modern, clean and slick. ## Example response diff --git a/packages/api/prompts/app-editor.txt b/packages/api/prompts/app-editor.txt index ae029da5..ded006b9 100644 --- a/packages/api/prompts/app-editor.txt +++ b/packages/api/prompts/app-editor.txt @@ -36,6 +36,8 @@ - The goal is to get a FUNCTIONAL MVP. All of the parts for this MVP should be included. - Your job is to be precise and effective, so avoid extraneous steps even if they offer convenience. - Do not talk or worry about testing. The user wants to _use_ the app: the core goal is for it to _work_. +- For react: modularize components into their own files, even small ones. We don't want one large App.tsx with everything inline, but different components in their respective src/components/{Component}.tsx files +- For styles: apply modern, minimalistic styles. Things shoud look modern, clean and slick. ## Example response diff --git a/packages/web/src/components/apps/create-modal.tsx b/packages/web/src/components/apps/create-modal.tsx index 430fb1f6..f013627b 100644 --- a/packages/web/src/components/apps/create-modal.tsx +++ b/packages/web/src/components/apps/create-modal.tsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useState, KeyboardEvent } from 'react'; import { cn } from '@/lib/utils'; import { Input } from '@srcbook/components/src/components/ui/input'; import { Button } from '@srcbook/components/src/components/ui/button'; @@ -55,6 +55,12 @@ export default function CreateAppModal({ onClose, onCreate }: PropsType) { } } + const handleKeyDown = (e: KeyboardEvent) => { + if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') { + onSubmit(e); + } + }; + return ( setPrompt(e.currentTarget.value)} + onKeyDown={handleKeyDown} className="h-20" placeholder="A Spotify-like app, showcasing a user's favorite playlists and most listened to songs." >