feat: Added CSS grid layout splitting technique page into prose (left)…
- "frontend/src/App.css" - "frontend/src/pages/TechniquePage.tsx" GSD-Task: S02/T01
This commit is contained in:
jlightner
parent
171775452e
commit
b0038f21f7
2 changed files with 539 additions and 3 deletions
|
|
@ -1028,7 +1028,7 @@ body {
|
||||||
/* ── Search results page ──────────────────────────────────────────────────── */
|
/* ── Search results page ──────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.search-results-page {
|
.search-results-page {
|
||||||
max-width: 48rem;
|
max-width: 64rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-fallback-banner {
|
.search-fallback-banner {
|
||||||
|
|
@ -1177,7 +1177,32 @@ body {
|
||||||
/* ── Technique page ───────────────────────────────────────────────────────── */
|
/* ── Technique page ───────────────────────────────────────────────────────── */
|
||||||
|
|
||||||
.technique-page {
|
.technique-page {
|
||||||
max-width: 48rem;
|
max-width: 64rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.technique-columns {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 22rem;
|
||||||
|
gap: 2rem;
|
||||||
|
align-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.technique-columns__main {
|
||||||
|
min-width: 0; /* prevent grid blowout */
|
||||||
|
}
|
||||||
|
|
||||||
|
.technique-columns__sidebar {
|
||||||
|
position: sticky;
|
||||||
|
top: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 768px) {
|
||||||
|
.technique-columns {
|
||||||
|
grid-template-columns: 1fr;
|
||||||
|
}
|
||||||
|
.technique-columns__sidebar {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.technique-404 {
|
.technique-404 {
|
||||||
|
|
@ -1631,7 +1656,7 @@ body {
|
||||||
══════════════════════════════════════════════════════════════════════════════ */
|
══════════════════════════════════════════════════════════════════════════════ */
|
||||||
|
|
||||||
.creator-detail {
|
.creator-detail {
|
||||||
max-width: 48rem;
|
max-width: 64rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.creator-detail__header {
|
.creator-detail__header {
|
||||||
|
|
|
||||||
511
frontend/src/pages/TechniquePage.tsx
Normal file
511
frontend/src/pages/TechniquePage.tsx
Normal file
|
|
@ -0,0 +1,511 @@
|
||||||
|
/**
|
||||||
|
* Technique page detail view with version switching.
|
||||||
|
*
|
||||||
|
* Fetches a single technique by slug. When historical versions exist,
|
||||||
|
* shows a version switcher that lets admins view previous snapshots
|
||||||
|
* with pipeline metadata (prompt hashes, model config).
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { Link, useParams } from "react-router-dom";
|
||||||
|
import {
|
||||||
|
fetchTechnique,
|
||||||
|
fetchTechniqueVersions,
|
||||||
|
fetchTechniqueVersion,
|
||||||
|
type TechniquePageDetail as TechniqueDetail,
|
||||||
|
type TechniquePageVersionSummary,
|
||||||
|
type TechniquePageVersionDetail,
|
||||||
|
} from "../api/public-client";
|
||||||
|
import ReportIssueModal from "../components/ReportIssueModal";
|
||||||
|
|
||||||
|
function formatTime(seconds: number): string {
|
||||||
|
const m = Math.floor(seconds / 60);
|
||||||
|
const s = Math.floor(seconds % 60);
|
||||||
|
return `${m}:${s.toString().padStart(2, "0")}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function formatDate(iso: string): string {
|
||||||
|
return new Date(iso).toLocaleDateString("en-US", {
|
||||||
|
year: "numeric",
|
||||||
|
month: "short",
|
||||||
|
day: "numeric",
|
||||||
|
hour: "2-digit",
|
||||||
|
minute: "2-digit",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Extract the displayable fields from a version snapshot, matching TechniqueDetail shape. */
|
||||||
|
function snapshotToOverlay(snapshot: Record<string, unknown>) {
|
||||||
|
return {
|
||||||
|
title: typeof snapshot.title === "string" ? snapshot.title : undefined,
|
||||||
|
summary: typeof snapshot.summary === "string" ? snapshot.summary : undefined,
|
||||||
|
topic_category:
|
||||||
|
typeof snapshot.topic_category === "string"
|
||||||
|
? snapshot.topic_category
|
||||||
|
: undefined,
|
||||||
|
topic_tags: Array.isArray(snapshot.topic_tags)
|
||||||
|
? (snapshot.topic_tags as string[])
|
||||||
|
: undefined,
|
||||||
|
body_sections:
|
||||||
|
typeof snapshot.body_sections === "object" && snapshot.body_sections !== null
|
||||||
|
? (snapshot.body_sections as Record<string, unknown>)
|
||||||
|
: undefined,
|
||||||
|
signal_chains: Array.isArray(snapshot.signal_chains)
|
||||||
|
? (snapshot.signal_chains as unknown[])
|
||||||
|
: undefined,
|
||||||
|
plugins: Array.isArray(snapshot.plugins)
|
||||||
|
? (snapshot.plugins as string[])
|
||||||
|
: undefined,
|
||||||
|
source_quality:
|
||||||
|
typeof snapshot.source_quality === "string"
|
||||||
|
? snapshot.source_quality
|
||||||
|
: undefined,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function TechniquePage() {
|
||||||
|
const { slug } = useParams<{ slug: string }>();
|
||||||
|
const [technique, setTechnique] = useState<TechniqueDetail | null>(null);
|
||||||
|
const [loading, setLoading] = useState(true);
|
||||||
|
const [notFound, setNotFound] = useState(false);
|
||||||
|
const [error, setError] = useState<string | null>(null);
|
||||||
|
const [showReport, setShowReport] = useState(false);
|
||||||
|
|
||||||
|
// Version switching
|
||||||
|
const [versions, setVersions] = useState<TechniquePageVersionSummary[]>([]);
|
||||||
|
const [selectedVersion, setSelectedVersion] = useState<string>("current");
|
||||||
|
const [versionDetail, setVersionDetail] =
|
||||||
|
useState<TechniquePageVersionDetail | null>(null);
|
||||||
|
const [versionLoading, setVersionLoading] = useState(false);
|
||||||
|
|
||||||
|
// Load technique + version list
|
||||||
|
useEffect(() => {
|
||||||
|
if (!slug) return;
|
||||||
|
|
||||||
|
let cancelled = false;
|
||||||
|
setLoading(true);
|
||||||
|
setNotFound(false);
|
||||||
|
setError(null);
|
||||||
|
setSelectedVersion("current");
|
||||||
|
setVersionDetail(null);
|
||||||
|
setVersions([]);
|
||||||
|
|
||||||
|
void (async () => {
|
||||||
|
try {
|
||||||
|
const data = await fetchTechnique(slug);
|
||||||
|
if (!cancelled) {
|
||||||
|
setTechnique(data);
|
||||||
|
// Load versions if any exist
|
||||||
|
if (data.version_count > 0) {
|
||||||
|
try {
|
||||||
|
const vRes = await fetchTechniqueVersions(slug);
|
||||||
|
if (!cancelled) setVersions(vRes.items);
|
||||||
|
} catch {
|
||||||
|
// Non-critical — version list fails silently
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (err) {
|
||||||
|
if (!cancelled) {
|
||||||
|
if (err instanceof Error && err.message.includes("404")) {
|
||||||
|
setNotFound(true);
|
||||||
|
} else {
|
||||||
|
setError(
|
||||||
|
err instanceof Error ? err.message : "Failed to load technique",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setLoading(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [slug]);
|
||||||
|
|
||||||
|
// Load version detail when selection changes
|
||||||
|
useEffect(() => {
|
||||||
|
if (!slug || selectedVersion === "current") {
|
||||||
|
setVersionDetail(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let cancelled = false;
|
||||||
|
setVersionLoading(true);
|
||||||
|
|
||||||
|
void (async () => {
|
||||||
|
try {
|
||||||
|
const detail = await fetchTechniqueVersion(
|
||||||
|
slug,
|
||||||
|
Number(selectedVersion),
|
||||||
|
);
|
||||||
|
if (!cancelled) setVersionDetail(detail);
|
||||||
|
} catch {
|
||||||
|
if (!cancelled) setVersionDetail(null);
|
||||||
|
} finally {
|
||||||
|
if (!cancelled) setVersionLoading(false);
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [slug, selectedVersion]);
|
||||||
|
|
||||||
|
if (loading) {
|
||||||
|
return <div className="loading">Loading technique…</div>;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (notFound) {
|
||||||
|
return (
|
||||||
|
<div className="technique-404">
|
||||||
|
<h2>Technique Not Found</h2>
|
||||||
|
<p>The technique “{slug}” doesn’t exist.</p>
|
||||||
|
<Link to="/" className="btn">
|
||||||
|
Back to Home
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (error || !technique) {
|
||||||
|
return (
|
||||||
|
<div className="loading error-text">
|
||||||
|
Error: {error ?? "Unknown error"}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Overlay snapshot fields when viewing a historical version
|
||||||
|
const isHistorical = selectedVersion !== "current" && versionDetail != null;
|
||||||
|
const overlay = isHistorical
|
||||||
|
? snapshotToOverlay(versionDetail.content_snapshot)
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const displayTitle = overlay?.title ?? technique.title;
|
||||||
|
const displaySummary = overlay?.summary ?? technique.summary;
|
||||||
|
const displayCategory = overlay?.topic_category ?? technique.topic_category;
|
||||||
|
const displayTags = overlay?.topic_tags ?? technique.topic_tags;
|
||||||
|
const displaySections = overlay?.body_sections ?? technique.body_sections;
|
||||||
|
const displayChains = overlay?.signal_chains ?? technique.signal_chains;
|
||||||
|
const displayPlugins = overlay?.plugins ?? technique.plugins;
|
||||||
|
const displayQuality = overlay?.source_quality ?? technique.source_quality;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<article className="technique-page">
|
||||||
|
{/* Back link */}
|
||||||
|
<Link to="/" className="back-link">
|
||||||
|
← Back
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
{/* Historical version banner */}
|
||||||
|
{isHistorical && (
|
||||||
|
<div className="technique-banner technique-banner--version">
|
||||||
|
📋 Viewing version {versionDetail.version_number} from{" "}
|
||||||
|
{formatDate(versionDetail.created_at)}
|
||||||
|
<button
|
||||||
|
className="btn btn--small btn--primary"
|
||||||
|
style={{ marginLeft: "1rem" }}
|
||||||
|
onClick={() => setSelectedVersion("current")}
|
||||||
|
>
|
||||||
|
Back to current
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Unstructured content warning */}
|
||||||
|
{displayQuality === "unstructured" && (
|
||||||
|
<div className="technique-banner technique-banner--amber">
|
||||||
|
⚠ This technique was sourced from a livestream and may have less
|
||||||
|
structured content.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Header */}
|
||||||
|
<header className="technique-header">
|
||||||
|
<h1 className="technique-header__title">{displayTitle}</h1>
|
||||||
|
<div className="technique-header__meta">
|
||||||
|
<span className="badge badge--category">{displayCategory}</span>
|
||||||
|
{displayTags && displayTags.length > 0 && (
|
||||||
|
<span className="technique-header__tags">
|
||||||
|
{displayTags.map((tag) => (
|
||||||
|
<span key={tag} className="pill">
|
||||||
|
{tag}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{technique.creator_info && (
|
||||||
|
<Link
|
||||||
|
to={`/creators/${technique.creator_info.slug}`}
|
||||||
|
className="technique-header__creator"
|
||||||
|
>
|
||||||
|
by {technique.creator_info.name}
|
||||||
|
</Link>
|
||||||
|
)}
|
||||||
|
{displayQuality && (
|
||||||
|
<span
|
||||||
|
className={`badge badge--quality badge--quality-${displayQuality}`}
|
||||||
|
>
|
||||||
|
{displayQuality}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Meta stats line */}
|
||||||
|
<div className="technique-header__stats">
|
||||||
|
{(() => {
|
||||||
|
const sourceCount = new Set(
|
||||||
|
technique.key_moments
|
||||||
|
.map((km) => km.video_filename)
|
||||||
|
.filter(Boolean),
|
||||||
|
).size;
|
||||||
|
const momentCount = technique.key_moments.length;
|
||||||
|
const updated = new Date(technique.updated_at).toLocaleDateString(
|
||||||
|
"en-US",
|
||||||
|
{ year: "numeric", month: "short", day: "numeric" },
|
||||||
|
);
|
||||||
|
const parts = [
|
||||||
|
`Compiled from ${sourceCount} source${sourceCount !== 1 ? "s" : ""}`,
|
||||||
|
`${momentCount} key moment${momentCount !== 1 ? "s" : ""}`,
|
||||||
|
];
|
||||||
|
if (technique.version_count > 0) {
|
||||||
|
parts.push(
|
||||||
|
`${technique.version_count} version${technique.version_count !== 1 ? "s" : ""}`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
parts.push(`Last updated ${updated}`);
|
||||||
|
return parts.join(" · ");
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Version switcher + report button row */}
|
||||||
|
<div className="technique-header__actions">
|
||||||
|
{versions.length > 0 && (
|
||||||
|
<div className="version-switcher">
|
||||||
|
<label className="version-switcher__label">Version:</label>
|
||||||
|
<select
|
||||||
|
className="version-switcher__select"
|
||||||
|
value={selectedVersion}
|
||||||
|
onChange={(e) => setSelectedVersion(e.target.value)}
|
||||||
|
disabled={versionLoading}
|
||||||
|
>
|
||||||
|
<option value="current">Current (live)</option>
|
||||||
|
{versions.map((v) => (
|
||||||
|
<option key={v.version_number} value={String(v.version_number)}>
|
||||||
|
v{v.version_number} — {formatDate(v.created_at)}
|
||||||
|
</option>
|
||||||
|
))}
|
||||||
|
</select>
|
||||||
|
{versionLoading && (
|
||||||
|
<span className="version-switcher__loading">Loading…</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
className="btn btn--secondary btn--small report-issue-btn"
|
||||||
|
onClick={() => setShowReport(true)}
|
||||||
|
>
|
||||||
|
⚑ Report issue
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{/* Pipeline metadata for historical versions */}
|
||||||
|
{isHistorical && versionDetail.pipeline_metadata && (
|
||||||
|
<div className="version-metadata">
|
||||||
|
<h4 className="version-metadata__title">Pipeline metadata (v{versionDetail.version_number})</h4>
|
||||||
|
<div className="version-metadata__grid">
|
||||||
|
{"model" in versionDetail.pipeline_metadata && (
|
||||||
|
<div className="version-metadata__item">
|
||||||
|
<span className="version-metadata__key">Model</span>
|
||||||
|
<span className="version-metadata__value">
|
||||||
|
{String(versionDetail.pipeline_metadata.model)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{"captured_at" in versionDetail.pipeline_metadata && (
|
||||||
|
<div className="version-metadata__item">
|
||||||
|
<span className="version-metadata__key">Captured</span>
|
||||||
|
<span className="version-metadata__value">
|
||||||
|
{formatDate(String(versionDetail.pipeline_metadata.captured_at))}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{typeof versionDetail.pipeline_metadata.prompt_hashes === "object" &&
|
||||||
|
versionDetail.pipeline_metadata.prompt_hashes !== null && (
|
||||||
|
<div className="version-metadata__item version-metadata__item--wide">
|
||||||
|
<span className="version-metadata__key">Prompt hashes</span>
|
||||||
|
<div className="version-metadata__hashes">
|
||||||
|
{Object.entries(
|
||||||
|
versionDetail.pipeline_metadata.prompt_hashes as Record<
|
||||||
|
string,
|
||||||
|
string
|
||||||
|
>,
|
||||||
|
).map(([file, hash]) => (
|
||||||
|
<div key={file} className="version-metadata__hash">
|
||||||
|
<span className="version-metadata__hash-file">
|
||||||
|
{file.replace(/^.*\//, "")}
|
||||||
|
</span>
|
||||||
|
<code className="version-metadata__hash-value">
|
||||||
|
{hash.slice(0, 12)}…
|
||||||
|
</code>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Report modal */}
|
||||||
|
{showReport && (
|
||||||
|
<ReportIssueModal
|
||||||
|
contentType="technique_page"
|
||||||
|
contentId={technique.id}
|
||||||
|
contentTitle={technique.title}
|
||||||
|
onClose={() => setShowReport(false)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="technique-columns">
|
||||||
|
<div className="technique-columns__main">
|
||||||
|
{/* Summary */}
|
||||||
|
{displaySummary && (
|
||||||
|
<section className="technique-summary">
|
||||||
|
<p>{displaySummary}</p>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Study guide prose — body_sections */}
|
||||||
|
{displaySections &&
|
||||||
|
Object.keys(displaySections).length > 0 && (
|
||||||
|
<section className="technique-prose">
|
||||||
|
{Object.entries(displaySections).map(
|
||||||
|
([sectionTitle, content]: [string, unknown]) => (
|
||||||
|
<div key={sectionTitle} className="technique-prose__section">
|
||||||
|
<h2>{sectionTitle}</h2>
|
||||||
|
{typeof content === "string" ? (
|
||||||
|
<p>{content as string}</p>
|
||||||
|
) : typeof content === "object" && content !== null ? (
|
||||||
|
<pre className="technique-prose__json">
|
||||||
|
{JSON.stringify(content, null, 2)}
|
||||||
|
</pre>
|
||||||
|
) : (
|
||||||
|
<p>{String(content as string)}</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div className="technique-columns__sidebar">
|
||||||
|
{/* Key moments (always from live data — not versioned) */}
|
||||||
|
{technique.key_moments.length > 0 && (
|
||||||
|
<section className="technique-moments">
|
||||||
|
<h2>Key Moments</h2>
|
||||||
|
<ol className="technique-moments__list">
|
||||||
|
{technique.key_moments.map((km) => (
|
||||||
|
<li key={km.id} className="technique-moment">
|
||||||
|
<div className="technique-moment__header">
|
||||||
|
<span className="technique-moment__title">{km.title}</span>
|
||||||
|
{km.video_filename && (
|
||||||
|
<span className="technique-moment__source">
|
||||||
|
{km.video_filename}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="technique-moment__time">
|
||||||
|
{formatTime(km.start_time)} – {formatTime(km.end_time)}
|
||||||
|
</span>
|
||||||
|
<span className="badge badge--content-type">
|
||||||
|
{km.content_type}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<p className="technique-moment__summary">{km.summary}</p>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Signal chains */}
|
||||||
|
{displayChains &&
|
||||||
|
displayChains.length > 0 && (
|
||||||
|
<section className="technique-chains">
|
||||||
|
<h2>Signal Chains</h2>
|
||||||
|
{displayChains.map((chain, i) => {
|
||||||
|
const chainObj = chain as Record<string, unknown>;
|
||||||
|
const chainName =
|
||||||
|
typeof chainObj["name"] === "string"
|
||||||
|
? chainObj["name"]
|
||||||
|
: `Chain ${i + 1}`;
|
||||||
|
const steps = Array.isArray(chainObj["steps"])
|
||||||
|
? (chainObj["steps"] as string[])
|
||||||
|
: [];
|
||||||
|
return (
|
||||||
|
<div key={i} className="technique-chain">
|
||||||
|
<h3>{chainName}</h3>
|
||||||
|
{steps.length > 0 && (
|
||||||
|
<div className="technique-chain__flow">
|
||||||
|
{steps.map((step, j) => (
|
||||||
|
<span key={j}>
|
||||||
|
{j > 0 && (
|
||||||
|
<span className="technique-chain__arrow">
|
||||||
|
{" → "}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<span className="technique-chain__step">
|
||||||
|
{String(step)}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Plugins */}
|
||||||
|
{displayPlugins && displayPlugins.length > 0 && (
|
||||||
|
<section className="technique-plugins">
|
||||||
|
<h2>Plugins Referenced</h2>
|
||||||
|
<div className="pill-list">
|
||||||
|
{displayPlugins.map((plugin) => (
|
||||||
|
<span key={plugin} className="pill pill--plugin">
|
||||||
|
{plugin}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Related techniques (always from live data) */}
|
||||||
|
{technique.related_links.length > 0 && (
|
||||||
|
<section className="technique-related">
|
||||||
|
<h2>Related Techniques</h2>
|
||||||
|
<ul className="technique-related__list">
|
||||||
|
{technique.related_links.map((link) => (
|
||||||
|
<li key={link.target_slug}>
|
||||||
|
<Link to={`/techniques/${link.target_slug}`}>
|
||||||
|
{link.target_title}
|
||||||
|
</Link>
|
||||||
|
<span className="technique-related__rel">
|
||||||
|
({link.relationship})
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</section>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</article>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Add table
Reference in a new issue