UniqAI/bolt.diy
1
0
Fork 0
mirror of https://github.com/stackblitz-labs/bolt.diy synced 2025-01-22 19:06:12 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Merge pull request #1 from dustinwloring1988/example-buttons

Browse Source 
added example buttons
This commit is contained in:
Dustin Loring 2024-12-01 11:24:16 -05:00 committed by GitHub
commit 8ae3397982
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
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 }) {
return (
<div id="examples" className="relative w-full max-w-xl mx-auto mt-8 flex justify-center">
<div className="flex flex-col space-y-2 [mask-image:linear-gradient(to_bottom,black_0%,transparent_180%)] hover:[mask-image:none]">
<div
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) => {
return (
<button
@ -19,10 +27,9 @@ export function ExamplePrompts(sendMessage?: { (event: React.UIEvent, messageInp
onClick={(event) => {
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}
<div className="i-ph:arrow-bend-down-left" />
</button>
);
})}