kschappell/codetutor
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wire up pages

Browse Source
This commit is contained in:
Kai Chappell
2025-04-29 21:06:13 +01:00
parent b62cf74e2a
commit 874e8b8958
11 changed files with 791 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

229
frontend/src/app/questions/[slug]/page.tsx Normal file
View File

@@ -0,0 +1,229 @@
import { getQuestion } from "@/lib/api";
import { Badge } from "@/components/ui/badge";
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { CodeBlock } from "@/components/ui/code-block";
import { getDifficultyColor, capitalize } from "@/lib/utils";
import Link from "next/link";
import { notFound } from "next/navigation";
export default async function QuestionDetailPage({
params,
}: {
params: Promise<{ slug: string }>;
}) {
const { slug } = await params;
let question;
try {
question = await getQuestion(slug);
} catch {
notFound();
}
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>
<Badge className={getDifficultyColor(question.difficulty)}>
{capitalize(question.difficulty)}
</Badge>
</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="outline">{cat.name}</Badge>
</Link>
))}
{question.patterns.map((pat) => (
<Link key={pat.id} href={`/patterns/${pat.slug}`}>
<Badge>{pat.name}</Badge>
</Link>
))}
</div>
{question.leetcode_url && (
<a
href={question.leetcode_url}
target="_blank"
rel="noopener noreferrer"
className="text-[var(--primary)] hover:underline text-sm"
>
View on LeetCode
</a>
)}
</div>
<Card>
<CardHeader>
<CardTitle>Problem</CardTitle>
</CardHeader>
<CardContent className="prose dark:prose-invert max-w-none">
<div className="whitespace-pre-wrap">{question.description}</div>
</CardContent>
</Card>
{question.constraints && (
<Card>
<CardHeader>
<CardTitle>Constraints</CardTitle>
</CardHeader>
<CardContent>
<pre className="text-sm whitespace-pre-wrap">
{question.constraints}
</pre>
</CardContent>
</Card>
)}
{question.examples && question.examples.length > 0 && (
<Card>
<CardHeader>
<CardTitle>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 && (
<>
<Card>
<CardHeader>
<CardTitle>Approach</CardTitle>
</CardHeader>
<CardContent className="whitespace-pre-wrap">
{question.explanation.approach}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Intuition</CardTitle>
</CardHeader>
<CardContent className="whitespace-pre-wrap">
{question.explanation.intuition}
</CardContent>
</Card>
<Card>
<CardHeader>
<CardTitle>Complexity Analysis</CardTitle>
</CardHeader>
<CardContent className="space-y-2">
<div>
<span className="font-medium">Time: </span>
{question.explanation.time_complexity}
</div>
<div>
<span className="font-medium">Space: </span>
{question.explanation.space_complexity}
</div>
{question.explanation.complexity_explanation && (
<div className="text-sm text-[var(--muted-foreground)] mt-2 whitespace-pre-wrap">
{question.explanation.complexity_explanation}
</div>
)}
</CardContent>
</Card>
{question.explanation.common_pitfalls &&
question.explanation.common_pitfalls.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Common Pitfalls</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
{question.explanation.common_pitfalls.map((pitfall, i) => (
<div key={i} className="p-4 rounded bg-[var(--secondary)]">
<h4 className="font-medium mb-2">{pitfall.title}</h4>
<p className="text-sm whitespace-pre-wrap">
{pitfall.description}
</p>
{pitfall.wrong_approach && (
<div className="mt-2 text-sm">
<span className="text-red-500">Wrong: </span>
<code>{pitfall.wrong_approach}</code>
</div>
)}
{pitfall.correct_approach && (
<div className="mt-1 text-sm">
<span className="text-green-500">Correct: </span>
<code>{pitfall.correct_approach}</code>
</div>
)}
</div>
))}
</CardContent>
</Card>
)}
{question.explanation.key_takeaways &&
question.explanation.key_takeaways.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Key Takeaways</CardTitle>
</CardHeader>
<CardContent>
<ul className="list-disc list-inside space-y-1">
{question.explanation.key_takeaways.map((takeaway, i) => (
<li key={i}>{takeaway}</li>
))}
</ul>
</CardContent>
</Card>
)}
</>
)}
{question.solutions.length > 0 && (
<Card>
<CardHeader>
<CardTitle>Solutions</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
{question.solutions.map((solution) => (
<div key={solution.id}>
<div className="flex items-center gap-2 mb-2">
<h4 className="font-medium">{solution.approach_name}</h4>
{solution.is_optimal && (
<Badge className="bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400">
Optimal
</Badge>
)}
</div>
{solution.explanation && (
<p className="text-sm text-[var(--muted-foreground)] mb-3">
{solution.explanation}
</p>
)}
<CodeBlock code={solution.code} language={solution.language} />
</div>
))}
</CardContent>
</Card>
)}
</div>
);
}