From 33e9e281d0dcc85e8cfe71ff50fc778e5f051822 Mon Sep 17 00:00:00 2001
From: Kai Chappell <git@kschappell.com>
Date: Fri, 20 Jun 2025 13:53:44 +0100
Subject: [PATCH] feat(frontend): markdown and detail components

---
 .../components/questions/question-detail.tsx  | 282 ++++++++++++++++++
 frontend/src/components/ui/code-block.tsx     |  69 ++++-
 frontend/src/components/ui/markdown.tsx       |  62 ++++
 3 files changed, 404 insertions(+), 9 deletions(-)
 create mode 100644 frontend/src/components/questions/question-detail.tsx
 create mode 100644 frontend/src/components/ui/markdown.tsx

diff --git a/frontend/src/components/questions/question-detail.tsx b/frontend/src/components/questions/question-detail.tsx
new file mode 100644
index 0000000..d0cdefa
--- /dev/null
+++ b/frontend/src/components/questions/question-detail.tsx
@@ -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>
+  );
+}
diff --git a/frontend/src/components/ui/code-block.tsx b/frontend/src/components/ui/code-block.tsx
index c2b200c..2b6c849 100644
--- a/frontend/src/components/ui/code-block.tsx
+++ b/frontend/src/components/ui/code-block.tsx
@@ -1,37 +1,88 @@
 "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 {
   code: 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 handleCopy = async () => {
+  const handleCopy = useCallback(async () => {
     await navigator.clipboard.writeText(code);
     setCopied(true);
     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 (
     <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
+          type="button"
           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"}
         </button>
+        <span role="status" aria-live="polite" className="sr-only">
+          {copied ? "Code copied to clipboard" : ""}
+        </span>
       </div>
-      <div className="text-xs text-[var(--muted-foreground)] mb-1">
+      <div className="text-xs text-[var(--muted-foreground)] mb-1 capitalize">
         {language}
       </div>
-      <pre className="bg-[var(--secondary)] p-4 rounded-lg overflow-x-auto text-sm">
-        <code>{code}</code>
-      </pre>
+      <div aria-label={codeLabel} tabIndex={0} className="rounded-lg overflow-hidden">
+        <SyntaxHighlighter
+          language={prismLanguage}
+          style={oneDark}
+          customStyle={{
+            margin: 0,
+            padding: "1rem",
+            fontSize: "0.875rem",
+            borderRadius: "0.5rem",
+          }}
+          showLineNumbers={false}
+        >
+          {code.trim()}
+        </SyntaxHighlighter>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/ui/markdown.tsx b/frontend/src/components/ui/markdown.tsx
new file mode 100644
index 0000000..db6feb1
--- /dev/null
+++ b/frontend/src/components/ui/markdown.tsx
@@ -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>
+  );
+}