File size: 2,212 Bytes
c675f75 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
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-3xl font-semibold text-white mb-1">Try an example</h2>
<p className="text-md text-[#9bb5ff]">Click one to get started</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-w-4xl w-full px-4">
{(examples || DEFAULT_EXAMPLES).map((example, index) => (
<button
key={index}
onClick={() => onExampleClick(example.messageText)}
className="group relative overflow-hidden rounded-2xl border border-white/12 bg-white/8 text-left shadow-[0_22px_55px_rgba(3,27,78,0.35)] transition-all hover:-translate-y-0.5 hover:shadow-[0_28px_65px_rgba(15,98,254,0.35)]"
>
<span className="pointer-events-none absolute inset-0 bg-gradient-to-r from-[#0f62fe]/25 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
<div className="relative flex items-center gap-4 px-5 py-4">
<span className="flex size-12 flex-shrink-0 items-center justify-center rounded-full border border-[#78a9ff]/30 bg-[#0f62fe]/15 text-xl text-[#a6c8ff] transition-all group-hover:scale-105 group-hover:bg-[#0f62fe]/25 group-hover:text-white">
{example.icon}
</span>
<div className="flex flex-1 items-center">
<span className="text-md font-medium text-white">
{example.displayText}
</span>
</div>
<span className="flex size-10 items-center justify-center rounded-full border border-white/10 bg-white/10 text-[#9bb5ff] transition-all group-hover:border-[#78a9ff]/40 group-hover:bg-[#0f62fe]/35 group-hover:text-white">
→
</span>
</div>
</button>
))}
</div>
</div>
);
export default ExamplePrompts;
|