improved quiz page

src/components/QuoteDisplay.tsx

@@ -0,0 +1,36 @@
+import { useState, useEffect } from 'react';
+import { austenQuotes } from '../data/quotes';
+
+const QuoteDisplay = () => {
+  const [currentQuote, setCurrentQuote] = useState(austenQuotes[0]);
+
+  useEffect(() => {
+    const randomQuote = () => {
+      const randomIndex = Math.floor(Math.random() * austenQuotes.length);
+      setCurrentQuote(austenQuotes[randomIndex]);
+    };
+
+    randomQuote();
+    const interval = setInterval(randomQuote, 10000); // Change quote every 10 seconds
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="bg-sage-50 p-6 rounded-lg my-8">
+      <blockquote className="text-sage-800 italic text-lg mb-4">
+        "{currentQuote.quote}"
+      </blockquote>
+      <div className="text-sage-600 text-sm">
+        <p className="font-semibold">
+          — {currentQuote.character ? `${currentQuote.character}, ` : ''}{currentQuote.source}
+        </p>
+        <p className="mt-2 text-sage-500">
+          {currentQuote.context}
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default QuoteDisplay;