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

added example buttons

Browse Source
This commit is contained in:
Dustin Loring 2024-12-01 11:19:11 -05:00
parent f20173fded
commit a71b45d594
1 changed files with 11 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/components/chat/ExamplePrompts.tsx
View File

@ -10,8 +10,16 @@ const EXAMPLE_PROMPTS = [
export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInput?: string): void | undefined }) { export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInput?: string): void | undefined }) {
return ( return (
<div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center"> <div
<div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]"> id="examples"
className="relative flex flex-col gap-9 w-full max-w-3xl mx-auto flex justify-center mt-6"
>
<div
className="flex flex-wrap justify-center gap-2"
style={{
animation: '.25s ease-out 0s 1 _fade-and-move-in_g2ptj_1 forwards',
}}
>
{EXAMPLE_PROMPTS.map((examplePrompt, index: number) => { {EXAMPLE_PROMPTS.map((examplePrompt, index: number) => {
return ( return (
<button <button
@ -19,10 +27,9 @@ export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInp
onClick={(event) => { onClick={(event) => {
sendMessage?.(event, examplePrompt.text); sendMessage?.(event, examplePrompt.text);
}} }}
className="group flex items-center w-full gap-2 justify-center bg-transparent text-bolt-elements-textTertiary hover:text-bolt-elements-textPrimary transition-theme" className="border border-bolt-elements-borderColor rounded-full bg-gray-50 hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary px-3 py-1 text-xs transition-theme"
> >
{examplePrompt.text} {examplePrompt.text}
<div className="i-ph:arrow-bend-down-left" />
</button> </button>
); );
})} })}