Merge pull request #24 from kunaldhongade/main

update: home page

Author: kunaldhongade

src/components/HomeMainbar/Questions.tsx

@@ -1,6 +1,5 @@
 import moment from "moment";
-// import { MdOutlineFavorite } from "react-icons/md";
-// import { RiQuestionAnswerFill } from "react-icons/ri";
+import { BiSolidUpvote } from "react-icons/bi";
 import { Link } from "react-router-dom";
 
 interface Question {
@@ -17,14 +16,11 @@ interface Question {
 const Questions = ({ question }: { question: Question }) => {
   return (
     <Link to={`/Questions/${question._id}`}>
-      <div className="flex flex-col gap-4 p-4 bg-gray-50 border border-gray-300 rounded-md shadow-md hover:shadow-lg transition-shadow duration-300 mb-2">
-        {/* Votes and Answers Row */}
-
-        {/* Question Details Section */}
+      <div className="flex flex-col gap-4 p-6 bg-white border border-gray-200 rounded-2xl shadow-sm hover:shadow-md transition-shadow duration-300 mb-4 transform hover:-translate-y-1">
         <div className="flex-grow">
           <Link
             to={`/Questions/${question._id}`}
-            className="text-lg font-medium text-blue-700 hover:underline"
+            className="text-xl font-semibold text-gray-800 hover:text-blue-600 transition-colors duration-300"
           >
             {question.questionTitle?.length >
             (window.innerWidth <= 400 ? 70 : 90)
@@ -35,33 +31,39 @@ const Questions = ({ question }: { question: Question }) => {
               : question.questionTitle}
           </Link>
         </div>
-        <div className="flex flex-wrap items-center gap-4 text-gray-600 text-xs sm:text-sm">
-          {/* <span className="px-2 py-1 bg-gray-100 border border-gray-300 rounded-full inline-flex items-center">
-            <span className="font-semibold">
-              {question.upVote.length - question.downVote.length}
-            </span>{" "}
-            <MdOutlineFavorite />
-          </span> */}
-          {/* <span className="px-2 py-1 bg-gray-100 border border-gray-300 rounded-full inline-flex items-center">
-            <span className="font-semibold px-1">{question.noOfAnswers}</span>
-            <RiQuestionAnswerFill />
-          </span> */}
-          <div className="text-xs text-gray-500 mt-2">
-            asked {moment(question.askedOn).fromNow()} by
-            <span className="ml-1 font-medium text-gray-800">
-              {question.userPosted.length > 10
-                ? question.userPosted.substring(0, 10) + "..."
-                : question.userPosted}
-            </span>
+
+        <div className="flex items-center gap-2 text-sm text-gray-600">
+          <div className="flex flex-wrap gap-2">
+            {question.questionTags.map((tag) => (
+              <span
+                key={tag}
+                className="px-3 py-1 text-xs font-medium text-gray-600  border border-gray-300 rounded-full hover:bg-blue-50 transition-colors duration-300"
+              >
+                {tag}
+              </span>
+            ))}
           </div>
-          {question.questionTags.map((tag) => (
-            <span
-              key={tag}
-              className="px-2 py-1 text-xs text-gray-800 bg-gray-200 border border-gray-300 rounded-full"
-            >
-              {tag}
+
+          <span className="px-2 py-1 text-xs font-medium text-gray-600 border border-gray-300 rounded-full items-center flex content-between">
+            {question.noOfAnswers} <BiSolidUpvote />
+          </span>
+
+          <span className="px-2 py-1 text-xs font-medium text-gray-600 border border-gray-300 rounded-full">
+            {question.noOfAnswers} 💬
+          </span>
+        </div>
+
+        <div className="flex justify-between items-center text-gray-600 text-sm">
+          <div className="flex items-center gap-2 text-sm text-gray-500">
+            <span className="text-gray-500">
+              asked {moment(question.askedOn).fromNow()}
             </span>
-          ))}
+          </div>
+          <span className="font-medium text-slate-400 hover:text-blue-200 transition-colors duration-300">
+            {question.userPosted.length > 10
+              ? question.userPosted.substring(0, 10) + "..."
+              : question.userPosted}
+          </span>
         </div>
       </div>
     </Link>

src/pages/Questions/DisplayAnswer.tsx

@@ -31,6 +31,7 @@ const DisplayAnswer: React.FC<DisplayAnswerProps> = ({
 }) => {
   const { address } = useAccount();
   const [voteStatus, setVoteStatus] = useState<{ [key: string]: boolean }>({});
+  const [isSeeMoreQuestion, setIsSeeMoreQuestion] = useState<boolean>(false);
   const [loadingStates, setLoadingStates] = useState<{
     [key: string]: boolean;
   }>({});
@@ -140,17 +141,30 @@ const DisplayAnswer: React.FC<DisplayAnswerProps> = ({
             </div>
 
             <MarkdownPreview
-              source={answer.content}
+              source={
+                isSeeMoreQuestion
+                  ? answer.content
+                  : answer.content.substring(0, 500) +
+                    (answer.content.length > 500 ? "..." : "")
+              }
               wrapperElement={{
                 "data-color-mode": "light",
               }}
               style={{
                 padding: "1rem",
                 color: "#333",
-                backgroundColor: "whitesmoke",
+                backgroundColor: "#FAF9F6",
                 borderRadius: "1rem",
               }}
             />
+            {answer.content.length > 200 && (
+              <button
+                onClick={() => setIsSeeMoreQuestion(!isSeeMoreQuestion)}
+                className="mt-2 text-gray-400 hover:text-blue-300 float-end text-sm"
+              >
+                {isSeeMoreQuestion ? "... Show Less" : "... Show More"}
+              </button>
+            )}
 
             <div className="flex items-center gap-4 mt-4">
               <button

src/pages/Questions/QuestionsDetails.tsx

@@ -252,7 +252,7 @@ const QuestionsDetails = () => {
                 style={{
                   padding: "1rem",
                   color: "#333",
-                  backgroundColor: "whitesmoke",
+                  backgroundColor: "#f8f8f8",
                   borderRadius: "1rem",
                 }}
               />