+ Press n or j to go to the next uncovered block, b, p or k for the previous block. +
+ +| 1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +15 +16 +17 +18 +19 +20 +21 +22 +23 +24 +25 +26 +27 +28 +29 +30 +31 +32 +33 +34 +35 +36 +37 +38 +39 +40 +41 +42 +43 +44 +45 +46 +47 +48 +49 +50 +51 +52 +53 +54 +55 +56 +57 +58 +59 +60 +61 +62 +63 +64 +65 +66 +67 +68 | 1x + + + + + + + + + + +1x + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + | import { Card } from "@/components/ui/card";
+import { QuestionSummary } from "@/services/api/programmingForumSchemas";
+
+import { ArrowRight, MessageSquare, Star, StarsIcon } from "lucide-react";
+import React from "react";
+import { Link } from "react-router-dom";
+import placeholderProfile from "@/assets/placeholder_profile.png";
+
+function capitalizeString(difficulty: string): React.ReactNode {
+ return difficulty.charAt(0).toUpperCase() + difficulty.slice(1);
+}
+export const HighlightedQuestionCard: React.FC<Partial<QuestionSummary>> = ({
+ id,
+ title,
+ content,
+ upvoteCount,
+ difficulty,
+ answerCount,
+ author,
+}) => {
+ return (
+ <Card className="border-none bg-blue-100 px-6 py-8 shadow-sm">
+ <div className="flex flex-col gap-6">
+ <h3 className="line-clamp-2 text-xl font-semibold text-gray-800">
+ {title}
+ </h3>
+ <p className="line-clamp-3 text-sm font-light text-gray-800">
+ {content}
+ </p>
+ <div className="flex flex-col gap-3 text-xs text-gray-700">
+ <div className="flex items-center gap-1">
+ <Star className="h-4 w-4" />
+ <span>{upvoteCount} votes</span>
+ </div>
+ <div className="flex items-center gap-1">
+ <MessageSquare className="h-4 w-4" />
+ <span>{answerCount} answers</span>
+ </div>
+ {difficulty && (
+ <div className="flex items-center gap-1">
+ <StarsIcon className="h-4 w-4" />
+ <span>{capitalizeString(difficulty)}</span>
+ </div>
+ )}
+ </div>
+ <div className="flex items-center justify-between">
+ {author && (
+ <Link to={`/users/${author.id}`} className="h-10 w-10">
+ <img
+ src={author?.profilePicture || placeholderProfile}
+ alt={author.name}
+ className="h-full w-full rounded-full object-cover"
+ />
+ </Link>
+ )}
+ <Link
+ to={`/question/${id}`}
+ className="flex items-center text-sm font-medium text-gray-800 hover:underline p-2"
+ >
+ Go to question
+ <ArrowRight className="ml-1 h-4 w-4" />
+ </Link>
+ </div>
+ </div>
+ </Card>
+ );
+};
+ |