From 6209a2e4a139ff07e9a3cea9aebd20c038268509 Mon Sep 17 00:00:00 2001
From: Hossain <arafat.kd99@gmail.com>
Date: Mon, 28 Aug 2023 18:46:35 +0100
Subject: [PATCH] Add author in userState & implemnet to display the author

---
 src/components/DisplayQuote.js | 5 ++++-
 src/styles/display-quote.css   | 4 ++++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/DisplayQuote.js b/src/components/DisplayQuote.js
index 9697e0e..3ec1a8f 100644
--- a/src/components/DisplayQuote.js
+++ b/src/components/DisplayQuote.js
@@ -3,6 +3,7 @@ import '../styles/display-quote.css';
 
 const QuoteComponent = () => {
   const [quote, setQuote] = useState(null);
+  const [author, setAuthor] = useState(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(false);
 
@@ -20,6 +21,7 @@ const QuoteComponent = () => {
         const response = await fetch(apiURL, options);
         const data = await response.json();
         setQuote(data[0].quote);
+        setAuthor(data[0].author);
         // console.log(data[0]);
       } catch (error) {
         setError(true);
@@ -39,9 +41,10 @@ const QuoteComponent = () => {
         </div>
       )}
       {quote && (
-        <div id="display-joke">
+        <div id="display-quote">
           <h4>Quote:</h4>
           <p>{quote}</p>
+          <p id="author">{author}</p>
         </div>
       )}
     </div>
diff --git a/src/styles/display-quote.css b/src/styles/display-quote.css
index f3e5972..f759aab 100644
--- a/src/styles/display-quote.css
+++ b/src/styles/display-quote.css
@@ -15,3 +15,7 @@
   font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
   margin-top: 1.5%;
 }
+
+#display-quote #author {
+  color: #463535;
+}