Small-cleanup-of-base-chat-component

app/components/chat/ExamplePrompts.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+const EXAMPLE_PROMPTS = [
+  { text: 'Build a todo app in React using Tailwind' },
+  { text: 'Build a simple blog using Astro' },
+  { text: 'Create a cookie consent form using Material UI' },
+  { text: 'Make a space invaders game' },
+  { text: 'How do I center a div?' },
+];
+
+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]">
+        {EXAMPLE_PROMPTS.map((examplePrompt, index: number) => {
+          return (
+            <button
+              key={index}
+              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"
+            >
+              {examplePrompt.text}
+              <div className="i-ph:arrow-bend-down-left" />
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}