2import { useState } from "react";
8591dddrender markdown for long descriptionsJeremy Magland 3import ReactMarkdown from "react-markdown";
4import remarkMath from "remark-math";
5import rehypeKatex from "rehype-katex";
7import { BenchmarkCharts } from "../benchmark/charts/BenchmarkCharts";
8import { BenchmarkTable } from "../benchmark/table/BenchmarkTable";
9import "./ContentStyles.css";
11export interface BaseItem {
12 name: string;
13 description: string;
14 long_description?: string;
15 version: string;
16 tags: string[];
17 source_file?: string;
18}
20interface BaseContentProps {
21 item: BaseItem;
22 benchmarkData: BenchmarkData | null;
23 chartData: Array<{
28 decode_speed: number;
29 }>;
30 tagNavigationPrefix: string;
31 filterKey: "dataset" | "algorithm";
32 downloadSection?: React.ReactNode;
33 additionalContent?: React.ReactNode;
37export const BaseContent = ({
38 item,
39 benchmarkData,
40 chartData,
41 tagNavigationPrefix,
42 filterKey,
43 downloadSection,
44 additionalContent,
47 const navigate = useNavigate();
48 const [isExpanded, setIsExpanded] = useState(false);
50 return (
51 <div>
52 <div className="content-container">
53 <p className="content-header">
54 <strong>{item.name}</strong> | {item.description}
55 </p>
56 {item.long_description && (
57 <>
58 <button
59 className="description-toggle"
60 onClick={() => setIsExpanded(!isExpanded)}
61 >
62 {isExpanded ? "View less" : "Read more"}
63 </button>
64 {isExpanded && (
66 <ReactMarkdown
67 remarkPlugins={[remarkMath]}
68 rehypePlugins={[rehypeKatex]}
69 >
70 {item.long_description}
71 </ReactMarkdown>
72 </div>
74 </>
75 )}
76 </div>
77 <div className="metadata-section">
78 <div>
79 <span className="metadata-label">Version: </span>
80 <span className="metadata-value">{item.version}</span>
81 </div>
82 <div>
83 <span className="metadata-label">Tags: </span>
84 {item.tags.map((tag) => (
85 <span
86 key={tag}
87 className="tag"
88 onClick={() => navigate(`${tagNavigationPrefix}?tag=${tag}`)}
89 >
90 {tag}
91 </span>
92 ))}
93 </div>
94 {downloadSection}
95 {item.source_file && (
96 <div>
97 <span className="metadata-label">Source: </span>
98 <a
99 href={item.source_file}
100 target="_blank"
101 rel="noopener noreferrer"
102 className="source-link"
103 >
104 View
105 </a>
106 </div>
107 )}
108 </div>
109 {additionalContent}
110 {benchmarkData && (
111 <>
112 <div className="benchmark-section">
113 <h2 className="benchmark-title">Benchmark Results</h2>
115 chartData={chartData}
116 showSortByCompressionRatio={showSortByCompressionRatio}
117 />
119 <div className="benchmark-section">
120 <BenchmarkTable
121 results={benchmarkData.results.filter(
122 (result) => result[filterKey] === item.name,
123 )}
124 />
125 </div>
126 </>
127 )}
128 </div>
129 );
130};