Spaces:
Running
Running
import type React from "react"; | |
import { DEFAULT_EXAMPLES, type Example } from "../constants/examples"; | |
interface ExamplePromptsProps { | |
examples?: Example[]; | |
onExampleClick: (messageText: string) => void; | |
} | |
const ExamplePrompts: React.FC<ExamplePromptsProps> = ({ | |
examples, | |
onExampleClick, | |
}) => ( | |
<div className="flex flex-col items-center justify-center h-full space-y-6"> | |
<div className="text-center mb-6"> | |
<h2 className="text-2xl font-semibold text-gray-300 mb-1"> | |
Try an example | |
</h2> | |
<p className="text-sm text-gray-500">Click one to get started</p> | |
</div> | |
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-2xl w-full px-4"> | |
{(examples || DEFAULT_EXAMPLES).map((example, index) => ( | |
<button | |
key={index} | |
onClick={() => onExampleClick(example.messageText)} | |
className="flex items-center gap-3 p-4 bg-gray-700 hover:bg-gray-600 rounded-lg transition-colors text-left group cursor-pointer" | |
> | |
<span className="text-xl flex-shrink-0 group-hover:scale-110 transition-transform"> | |
{example.icon} | |
</span> | |
<span className="text-sm text-gray-200 group-hover:text-white transition-colors"> | |
{example.displayText} | |
</span> | |
</button> | |
))} | |
</div> | |
</div> | |
); | |
export default ExamplePrompts; | |