devops

devops-view/src/components/examples/ExampleQuestions.tsx

@@ -0,0 +1,46 @@
+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>
+  );
+}