feat(frontend): markdown and detail components
This commit is contained in:
282
frontend/src/components/questions/question-detail.tsx
Normal file
282
frontend/src/components/questions/question-detail.tsx
Normal file
@@ -0,0 +1,282 @@
|
|||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||||
|
import { CodeBlock } from "@/components/ui/code-block";
|
||||||
|
import { Markdown } from "@/components/ui/markdown";
|
||||||
|
import { Callout, ApproachBox } from "@/components/ui/callout";
|
||||||
|
import { Collapsible } from "@/components/ui/collapsible";
|
||||||
|
import { getDifficultyVariant, getDifficultyLabel, capitalize } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
FileText,
|
||||||
|
AlertCircle,
|
||||||
|
BookOpen,
|
||||||
|
Code,
|
||||||
|
Clock,
|
||||||
|
HardDrive,
|
||||||
|
} from "lucide-react";
|
||||||
|
import Link from "next/link";
|
||||||
|
import type { QuestionDetail as QuestionDetailType } from "@/types";
|
||||||
|
|
||||||
|
interface QuestionDetailProps {
|
||||||
|
question: QuestionDetailType;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function QuestionDetail({ question }: QuestionDetailProps) {
|
||||||
|
const optimalSolutions = question.solutions.filter((s) => s.is_optimal);
|
||||||
|
const otherSolutions = question.solutions.filter((s) => !s.is_optimal);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto space-y-8">
|
||||||
|
<div>
|
||||||
|
<div className="flex items-start justify-between gap-4 mb-4">
|
||||||
|
<h1 className="text-3xl font-bold">{question.title}</h1>
|
||||||
|
<Link href={`/questions?difficulty=${question.difficulty}`}>
|
||||||
|
<Badge
|
||||||
|
variant={getDifficultyVariant(question.difficulty)}
|
||||||
|
aria-label={getDifficultyLabel(question.difficulty)}
|
||||||
|
className="cursor-pointer hover:opacity-80"
|
||||||
|
>
|
||||||
|
{capitalize(question.difficulty)}
|
||||||
|
</Badge>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-wrap gap-2 mb-4">
|
||||||
|
{question.categories.map((cat) => (
|
||||||
|
<Link key={cat.id} href={`/questions?category=${cat.slug}`}>
|
||||||
|
<Badge variant="category">{cat.name}</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
{question.patterns.map((pat) => (
|
||||||
|
<Link key={pat.id} href={`/patterns/${pat.slug}`}>
|
||||||
|
<Badge variant="pattern">{pat.name}</Badge>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{question.leetcode_url && (
|
||||||
|
<a
|
||||||
|
href={question.leetcode_url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label={`View ${question.title} on LeetCode (opens in new tab)`}
|
||||||
|
className="text-[var(--primary)] hover:underline text-sm"
|
||||||
|
>
|
||||||
|
View on LeetCode
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<FileText className="h-5 w-5" aria-hidden="true" />
|
||||||
|
Problem
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="prose-content">
|
||||||
|
<Markdown>{question.description}</Markdown>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{question.constraints && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<AlertCircle className="h-5 w-5" aria-hidden="true" />
|
||||||
|
Constraints
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent>
|
||||||
|
<Markdown>{question.constraints}</Markdown>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{question.examples && question.examples.length > 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<BookOpen className="h-5 w-5" aria-hidden="true" />
|
||||||
|
Examples
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-4">
|
||||||
|
{question.examples.map((example, i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="p-4 rounded bg-[var(--secondary)] space-y-2"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">Input: </span>
|
||||||
|
<code>{example.input}</code>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="font-medium">Output: </span>
|
||||||
|
<code>{example.output}</code>
|
||||||
|
</div>
|
||||||
|
{example.explanation && (
|
||||||
|
<div className="text-sm text-[var(--muted-foreground)]">
|
||||||
|
{example.explanation}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{question.explanation && (
|
||||||
|
<>
|
||||||
|
<Callout variant="info" title="Approach">
|
||||||
|
<div className="prose-content">
|
||||||
|
<Markdown>{question.explanation.approach}</Markdown>
|
||||||
|
</div>
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
<Callout variant="insight" title="Intuition">
|
||||||
|
<div className="prose-content">
|
||||||
|
<Markdown>{question.explanation.intuition}</Markdown>
|
||||||
|
</div>
|
||||||
|
</Callout>
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Clock className="h-5 w-5" aria-hidden="true" />
|
||||||
|
Complexity Analysis
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-3">
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<Clock
|
||||||
|
className="h-4 w-4 mt-1 text-[var(--muted-foreground)]"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div className="[&>div]:inline [&>div>p]:inline">
|
||||||
|
<span className="font-medium">Time Complexity: </span>
|
||||||
|
<Markdown>{question.explanation.time_complexity}</Markdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-start gap-2">
|
||||||
|
<HardDrive
|
||||||
|
className="h-4 w-4 mt-1 text-[var(--muted-foreground)]"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
<div className="[&>div]:inline [&>div>p]:inline">
|
||||||
|
<span className="font-medium">Space Complexity: </span>
|
||||||
|
<Markdown>{question.explanation.space_complexity}</Markdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
{question.explanation.common_pitfalls &&
|
||||||
|
question.explanation.common_pitfalls.length > 0 && (
|
||||||
|
<Callout variant="warning" title="Common Pitfalls">
|
||||||
|
<div className="space-y-4">
|
||||||
|
{question.explanation.common_pitfalls.map((pitfall, i) => (
|
||||||
|
<div key={i}>
|
||||||
|
<h4 className="font-medium mb-2">{pitfall.title}</h4>
|
||||||
|
<div className="text-sm prose-content mb-3">
|
||||||
|
<Markdown>{pitfall.description}</Markdown>
|
||||||
|
</div>
|
||||||
|
{(pitfall.wrong_approach || pitfall.correct_approach) && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
{pitfall.wrong_approach && (
|
||||||
|
<ApproachBox variant="wrong">
|
||||||
|
<code className="text-sm">
|
||||||
|
{pitfall.wrong_approach}
|
||||||
|
</code>
|
||||||
|
</ApproachBox>
|
||||||
|
)}
|
||||||
|
{pitfall.correct_approach && (
|
||||||
|
<ApproachBox variant="correct">
|
||||||
|
<code className="text-sm">
|
||||||
|
{pitfall.correct_approach}
|
||||||
|
</code>
|
||||||
|
</ApproachBox>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Callout>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{question.explanation.key_takeaways &&
|
||||||
|
question.explanation.key_takeaways.length > 0 && (
|
||||||
|
<Callout variant="success" title="Key Takeaways">
|
||||||
|
<ul className="list-disc list-inside space-y-2">
|
||||||
|
{question.explanation.key_takeaways.map((takeaway, i) => (
|
||||||
|
<li key={i} className="[&>div]:inline [&>div>p]:inline">
|
||||||
|
<Markdown>{takeaway}</Markdown>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</Callout>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{question.solutions.length > 0 && (
|
||||||
|
<Card>
|
||||||
|
<CardHeader>
|
||||||
|
<CardTitle className="flex items-center gap-2">
|
||||||
|
<Code className="h-5 w-5" aria-hidden="true" />
|
||||||
|
Solutions
|
||||||
|
</CardTitle>
|
||||||
|
</CardHeader>
|
||||||
|
<CardContent className="space-y-6">
|
||||||
|
{optimalSolutions.map((solution) => (
|
||||||
|
<div key={solution.id}>
|
||||||
|
<div className="flex items-center gap-2 mb-2">
|
||||||
|
<h4 className="font-medium">{solution.approach_name}</h4>
|
||||||
|
<Badge variant="optimal">Optimal</Badge>
|
||||||
|
</div>
|
||||||
|
{solution.explanation && (
|
||||||
|
<div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">
|
||||||
|
<Markdown>{solution.explanation}</Markdown>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<CodeBlock code={solution.code} language={solution.language} />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{otherSolutions.length > 0 && (
|
||||||
|
<div className="space-y-4">
|
||||||
|
{otherSolutions.map((solution) => (
|
||||||
|
<Collapsible
|
||||||
|
key={solution.id}
|
||||||
|
title={
|
||||||
|
<span className="flex items-center gap-2">
|
||||||
|
{solution.approach_name}
|
||||||
|
<Badge
|
||||||
|
variant="outline"
|
||||||
|
className="text-xs font-normal"
|
||||||
|
>
|
||||||
|
Alternative
|
||||||
|
</Badge>
|
||||||
|
</span>
|
||||||
|
}
|
||||||
|
defaultOpen={false}
|
||||||
|
>
|
||||||
|
{solution.explanation && (
|
||||||
|
<div className="text-sm text-[var(--muted-foreground)] mb-3 prose-content">
|
||||||
|
<Markdown>{solution.explanation}</Markdown>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<CodeBlock
|
||||||
|
code={solution.code}
|
||||||
|
language={solution.language}
|
||||||
|
/>
|
||||||
|
</Collapsible>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1,37 +1,88 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState, useCallback } from "react";
|
||||||
|
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
|
||||||
|
import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
|
||||||
|
|
||||||
interface CodeBlockProps {
|
interface CodeBlockProps {
|
||||||
code: string;
|
code: string;
|
||||||
language?: string;
|
language?: string;
|
||||||
|
label?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function CodeBlock({ code, language = "python" }: CodeBlockProps) {
|
export function CodeBlock({
|
||||||
|
code,
|
||||||
|
language = "python",
|
||||||
|
label,
|
||||||
|
}: CodeBlockProps) {
|
||||||
const [copied, setCopied] = useState(false);
|
const [copied, setCopied] = useState(false);
|
||||||
|
|
||||||
const handleCopy = async () => {
|
const handleCopy = useCallback(async () => {
|
||||||
await navigator.clipboard.writeText(code);
|
await navigator.clipboard.writeText(code);
|
||||||
setCopied(true);
|
setCopied(true);
|
||||||
setTimeout(() => setCopied(false), 2000);
|
setTimeout(() => setCopied(false), 2000);
|
||||||
|
}, [code]);
|
||||||
|
|
||||||
|
const handleKeyDown = useCallback(
|
||||||
|
(e: React.KeyboardEvent) => {
|
||||||
|
if (e.key === "Enter" || e.key === " ") {
|
||||||
|
e.preventDefault();
|
||||||
|
handleCopy();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
[handleCopy]
|
||||||
|
);
|
||||||
|
|
||||||
|
const codeLabel = label || `${language} code example`;
|
||||||
|
|
||||||
|
// Map common language names to Prism language identifiers
|
||||||
|
const languageMap: Record<string, string> = {
|
||||||
|
python: "python",
|
||||||
|
javascript: "javascript",
|
||||||
|
typescript: "typescript",
|
||||||
|
java: "java",
|
||||||
|
cpp: "cpp",
|
||||||
|
c: "c",
|
||||||
|
go: "go",
|
||||||
|
rust: "rust",
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const prismLanguage = languageMap[language.toLowerCase()] || language;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative group">
|
<div className="relative group">
|
||||||
<div className="absolute right-2 top-2 opacity-0 group-hover:opacity-100 transition-opacity">
|
<div className="absolute right-2 top-2 z-10 opacity-0 group-hover:opacity-100 focus-within:opacity-100 transition-opacity">
|
||||||
<button
|
<button
|
||||||
|
type="button"
|
||||||
onClick={handleCopy}
|
onClick={handleCopy}
|
||||||
className="px-2 py-1 text-xs bg-[var(--secondary)] rounded hover:bg-[var(--muted)] transition-colors"
|
onKeyDown={handleKeyDown}
|
||||||
|
aria-label={copied ? "Code copied to clipboard" : "Copy code to clipboard"}
|
||||||
|
className="px-2 py-1 text-xs bg-[var(--muted)] rounded hover:bg-[var(--secondary)] focus:bg-[var(--secondary)] focus:outline-none focus:ring-2 focus:ring-[var(--primary)] transition-colors"
|
||||||
>
|
>
|
||||||
{copied ? "Copied!" : "Copy"}
|
{copied ? "Copied!" : "Copy"}
|
||||||
</button>
|
</button>
|
||||||
|
<span role="status" aria-live="polite" className="sr-only">
|
||||||
|
{copied ? "Code copied to clipboard" : ""}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div className="text-xs text-[var(--muted-foreground)] mb-1">
|
<div className="text-xs text-[var(--muted-foreground)] mb-1 capitalize">
|
||||||
{language}
|
{language}
|
||||||
</div>
|
</div>
|
||||||
<pre className="bg-[var(--secondary)] p-4 rounded-lg overflow-x-auto text-sm">
|
<div aria-label={codeLabel} tabIndex={0} className="rounded-lg overflow-hidden">
|
||||||
<code>{code}</code>
|
<SyntaxHighlighter
|
||||||
</pre>
|
language={prismLanguage}
|
||||||
|
style={oneDark}
|
||||||
|
customStyle={{
|
||||||
|
margin: 0,
|
||||||
|
padding: "1rem",
|
||||||
|
fontSize: "0.875rem",
|
||||||
|
borderRadius: "0.5rem",
|
||||||
|
}}
|
||||||
|
showLineNumbers={false}
|
||||||
|
>
|
||||||
|
{code.trim()}
|
||||||
|
</SyntaxHighlighter>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
62
frontend/src/components/ui/markdown.tsx
Normal file
62
frontend/src/components/ui/markdown.tsx
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import ReactMarkdown from "react-markdown";
|
||||||
|
import rehypeRaw from "rehype-raw";
|
||||||
|
|
||||||
|
interface MarkdownProps {
|
||||||
|
children: string;
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function Markdown({ children, className = "" }: MarkdownProps) {
|
||||||
|
return (
|
||||||
|
<div className={`prose prose-sm dark:prose-invert max-w-none ${className}`}>
|
||||||
|
<ReactMarkdown
|
||||||
|
rehypePlugins={[rehypeRaw]}
|
||||||
|
components={{
|
||||||
|
// Style inline code
|
||||||
|
code: ({ children, ...props }) => {
|
||||||
|
return (
|
||||||
|
<code
|
||||||
|
className="bg-[var(--secondary)] px-1.5 py-0.5 rounded text-sm font-mono"
|
||||||
|
{...props}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</code>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// Style code blocks
|
||||||
|
pre: ({ children }) => {
|
||||||
|
return (
|
||||||
|
<pre className="bg-[var(--secondary)] p-4 rounded-lg overflow-x-auto text-sm">
|
||||||
|
{children}
|
||||||
|
</pre>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// Style unordered lists
|
||||||
|
ul: ({ children }) => {
|
||||||
|
return (
|
||||||
|
<ul className="list-disc list-inside space-y-1">
|
||||||
|
{children}
|
||||||
|
</ul>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// Style ordered lists
|
||||||
|
ol: ({ children }) => {
|
||||||
|
return (
|
||||||
|
<ol className="list-decimal list-inside space-y-1">
|
||||||
|
{children}
|
||||||
|
</ol>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
// Style paragraphs with spacing
|
||||||
|
p: ({ children }) => {
|
||||||
|
return <p className="mb-4 last:mb-0">{children}</p>;
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</ReactMarkdown>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user