2import { useState } from "react";
3import { BenchmarkData } from "../../types";
4import { BenchmarkCharts } from "../benchmark/charts/BenchmarkCharts";
5import { BenchmarkTable } from "../benchmark/table/BenchmarkTable";
6import "./ContentStyles.css";
8export interface BaseItem {
9 name: string;
10 description: string;
11 long_description?: string;
12 version: string;
13 tags: string[];
14 source_file?: string;
15}
17interface BaseContentProps {
18 item: BaseItem;
19 benchmarkData: BenchmarkData | null;
20 chartData: Array<{
21 algorithm: string;
22 compression_ratio: number;
23 encode_speed: number;
24 decode_speed: number;
25 }>;
26 tagNavigationPrefix: string;
27 filterKey: "dataset" | "algorithm";
28 downloadSection?: React.ReactNode;
29 additionalContent?: React.ReactNode;
30}
32export const BaseContent = ({
33 item,
34 benchmarkData,
35 chartData,
36 tagNavigationPrefix,
37 filterKey,
38 downloadSection,
39 additionalContent,
40}: BaseContentProps) => {
41 const navigate = useNavigate();
42 const [isExpanded, setIsExpanded] = useState(false);
44 return (
45 <div>
46 <div className="content-container">
47 <p className="content-header">
48 <strong>{item.name}</strong> | {item.description}
49 </p>
50 {item.long_description && (
51 <>
52 <button
53 className="description-toggle"
54 onClick={() => setIsExpanded(!isExpanded)}
55 >
56 {isExpanded ? "View less" : "Read more"}
57 </button>
58 {isExpanded && (
59 <div className="long-description">{item.long_description}</div>
60 )}
61 </>
62 )}
63 </div>
64 <div className="metadata-section">
65 <div>
66 <span className="metadata-label">Version: </span>
67 <span className="metadata-value">{item.version}</span>
68 </div>
69 <div>
70 <span className="metadata-label">Tags: </span>
71 {item.tags.map((tag) => (
72 <span
73 key={tag}
74 className="tag"
75 onClick={() => navigate(`${tagNavigationPrefix}?tag=${tag}`)}
76 >
77 {tag}
78 </span>
79 ))}
80 </div>
81 {downloadSection}
82 {item.source_file && (
83 <div>
84 <span className="metadata-label">Source: </span>
85 <a
86 href={item.source_file}
87 target="_blank"
88 rel="noopener noreferrer"
89 className="source-link"
90 >
91 View
92 </a>
93 </div>
94 )}
95 </div>
96 {additionalContent}
97 {benchmarkData && (
98 <>
99 <div className="benchmark-section">
100 <h2 className="benchmark-title">Benchmark Results</h2>
101 <BenchmarkCharts chartData={chartData} />
102 </div>
103 <div className="benchmark-section">
104 <BenchmarkTable
105 results={benchmarkData.results.filter(
106 (result) => result[filterKey] === item.name,
107 )}
108 />
109 </div>
110 </>
111 )}
112 </div>
113 );
114};