UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-06-26 18:17:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: layout change

Browse Source 
a quick layout change
This commit is contained in:
Dustin Loring 2025-01-18 16:55:17 -05:00 committed by GitHub
commit ed78fa2a74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 23 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/components/chat/BaseChat.tsx
View File

@ -38,7 +38,7 @@ interface BaseChatProps {
const EXAMPLE_PROMPTS = [ const EXAMPLE_PROMPTS = [
{ text: 'Build a todo app in React using Tailwind' }, { text: 'Build a todo app in React using Tailwind' },
{ text: 'Build a simple blog using Astro' }, { text: 'Build a simple blog using Astro' },
{ text: 'Create a cookie consent form using Material UI' }, { text: 'Make a login form using React' },
{ text: 'Make a space invaders game' }, { text: 'Make a space invaders game' },
{ text: 'How do I center a div?' }, { text: 'How do I center a div?' },
]; ];
@ -226,8 +226,8 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
</div> </div>
</div> </div>
{!chatStarted && ( {!chatStarted && (
<div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex flex-col items-center"> <div id="examples" className="relative w-full max-w-4xl mx-auto mt-8 flex flex-col items-center px-4">
<div className="flex gap-4"> <div className="flex gap-4 mb-8">
<GitCloneButton <GitCloneButton
importChat={async (description, messages) => { importChat={async (description, messages) => {
sendMessage?.(new Event('click') as any, description); sendMessage?.(new Event('click') as any, description);
@ -245,23 +245,27 @@ export const BaseChat = React.forwardRef<HTMLDivElement, BaseChatProps>(
}} }}
/> />
</div> </div>
<div className="flex flex-col space-y-2 mt-4 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]"> <div className="text-center mb-4 text-bolt-elements-textSecondary">
{EXAMPLE_PROMPTS.map((examplePrompt, index) => { or start a blank app with your favorite stack
return ( </div>
<button <div className="flex flex-col space-y-2 w-full">
key={index} <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-2 mb-6">
onClick={(event) => { {EXAMPLE_PROMPTS.map((examplePrompt, index) => {
sendMessage?.(event, examplePrompt.text); return (
}} <button
className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme" key={index}
> onClick={(event) => {
{examplePrompt.text} sendMessage?.(event, examplePrompt.text);
<div className="i-ph:arrow-bend-down-left" /> }}
</button> className="group flex items-center justify-center px-3 py-2 rounded-full bg-[#1A1A1A] hover:bg-[#252525] text-sm text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary transition-all duration-200"
); >
})} <span>{examplePrompt.text}</span>
</button>
);
})}
</div>
<StarterTemplates />
</div> </div>
<StarterTemplates />
</div> </div>
)} )}
</div> </div>