feat(frontend): integrate editor into question page
This commit is contained in:
@@ -1,20 +1,6 @@
|
|||||||
import { getQuestion } from "@/lib/api";
|
import { getQuestion } from "@/lib/api";
|
||||||
import { Badge } from "@/components/ui/badge";
|
import { QuestionDetail } from "@/components/questions/question-detail";
|
||||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
import { ProblemWorkspace } from "@/components/editor";
|
||||||
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 { notFound } from "next/navigation";
|
import { notFound } from "next/navigation";
|
||||||
|
|
||||||
export default async function QuestionDetailPage({
|
export default async function QuestionDetailPage({
|
||||||
@@ -31,262 +17,11 @@ export default async function QuestionDetailPage({
|
|||||||
notFound();
|
notFound();
|
||||||
}
|
}
|
||||||
|
|
||||||
const optimalSolutions = question.solutions.filter((s) => s.is_optimal);
|
// Show interactive workspace if the question has test cases
|
||||||
const otherSolutions = question.solutions.filter((s) => !s.is_optimal);
|
if (question.function_signature && question.visible_test_cases) {
|
||||||
|
return <ProblemWorkspace question={question} />;
|
||||||
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}
|
|
||||||
>
|
// Fall back to read-only view for questions without test cases
|
||||||
{solution.explanation && (
|
return <QuestionDetail question={question} />;
|
||||||
<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>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user