47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
const QUESTIONS = [
|
|
"What port does analytics-service use?",
|
|
"How does JWT authentication work?",
|
|
"What Kafka topics are configured?",
|
|
"Describe the CI/CD pipeline",
|
|
"What databases are used?",
|
|
"How is Nginx configured?",
|
|
];
|
|
|
|
interface Props {
|
|
onSelect: (question: string) => void;
|
|
disabled: boolean;
|
|
}
|
|
|
|
export function ExampleQuestions({ onSelect, disabled }: Props) {
|
|
return (
|
|
<section className="mb-6">
|
|
<p className="text-gray-500 font-mono text-xs uppercase tracking-widest mb-3">
|
|
// example questions
|
|
</p>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
|
|
{QUESTIONS.map((q) => (
|
|
<button
|
|
key={q}
|
|
onClick={() => onSelect(q)}
|
|
disabled={disabled}
|
|
className="
|
|
group text-left px-4 py-3 rounded-lg border border-green-900/40
|
|
bg-gray-900/60 hover:bg-green-950/40 hover:border-green-700/60
|
|
text-gray-300 hover:text-green-300
|
|
font-mono text-sm leading-snug
|
|
transition-all duration-200
|
|
disabled:opacity-40 disabled:cursor-not-allowed
|
|
hover:shadow-[0_0_12px_rgba(74,222,128,0.08)]
|
|
"
|
|
>
|
|
<span className="text-green-600 group-hover:text-green-400 mr-1.5 transition-colors">
|
|
$
|
|
</span>
|
|
{q}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|