Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update: home page #24

Merged
merged 1 commit into from
Feb 13, 2025
Merged

update: home page #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 34 additions & 32 deletions src/components/HomeMainbar/Questions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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)
Expand All @@ -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>
Expand Down
18 changes: 16 additions & 2 deletions src/pages/Questions/DisplayAnswer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}>({});
Expand Down Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Questions/QuestionsDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -252,7 +252,7 @@ const QuestionsDetails = () => {
style={{
padding: "1rem",
color: "#333",
backgroundColor: "whitesmoke",
backgroundColor: "#f8f8f8",
borderRadius: "1rem",
}}
/>
Expand Down