From 5e2fdc49fdcc6f0a6cbb04eb916608b5184d9fb7 Mon Sep 17 00:00:00 2001
From: balaharisankar <balaharisankar2003@gmail.com>
Date: Tue, 6 Aug 2024 16:12:26 +0530
Subject: [PATCH] Most relevant label added

---
 frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx  | 3 +++
 frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss | 9 ++++++++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx
index f7d087e4..c082e34a 100644
--- a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx
+++ b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.jsx
@@ -9,6 +9,7 @@ export function AnswerModel(props) {
     const [answer, setAnswer] = useState("")
     const [author, setAuthor] = useState("")
     const [answers, setAnswers] = useState([])
+    const[maxUpvote,setMaxUpvote]=useState(0)
     const [toast, setToast] = useState({
         toastStatus: false,
         toastType: "",
@@ -19,6 +20,7 @@ export function AnswerModel(props) {
     }
     async function fetchAnswers() {
         const data = await getAnswers(props.data._id, setToast)
+        setMaxUpvote(data.map(function(o) { return o.upvotes; }).sort().reverse()[0])
         setAnswers(filterAnswers(data))
     }
     useEffect(() => {
@@ -127,6 +129,7 @@ export function AnswerModel(props) {
                                                         <h5>{ans.created_by || "Anonymous"}</h5>
                                                         <p>{timeStampFormatter(ans.created_on)}</p>
                                                     </div>
+                                                    {(maxUpvote!=0&&maxUpvote==ans.upvotes)&&<p className="most-relevant-label" style={{ backgroundColor: dark && "#69a9dd",color:dark&&"#fff"}}>Most relevant</p>}
                                                     <p>{ans.answer}</p>
                                                     <div>
                                                         <button
diff --git a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss
index 0f486d26..a1f28c1a 100644
--- a/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss
+++ b/frontend/src/pages/Q&A/AnswerModel/AnswerModel.scss
@@ -123,7 +123,14 @@
     margin: 5px;
     cursor: pointer;
   }
-  
+.most-relevant-label{
+    width: fit-content;
+    background-color: #243e74;
+    font-size: 12px !important;
+    color: white;
+    padding: 3px 8px;
+    border-radius: 8px;
+}  
 
 @media screen and (max-width:768px) {
     .modal-container {