3import { useNavigate } from "react-router-dom";
104f442improve layoutJeremy Magland 4import { BenchmarkCharts } from "../benchmark/charts/BenchmarkCharts";
5import { BenchmarkTable } from "../benchmark/table/BenchmarkTable";
7type ChartData = Array<{
8 algorithm: string;
9 compression_ratio: number;
10 encode_speed: number;
11 decode_speed: number;
12}>;
14interface AlgorithmContentProps {
15 algorithm: Algorithm;
16 benchmarkData: BenchmarkData | null;
17 chartData: ChartData;
18}
20export const AlgorithmContent = ({
21 algorithm,
22 benchmarkData,
23 chartData,
24}: AlgorithmContentProps) => {
28 <div>
29 <div style={{ marginBottom: "1.5rem" }}>
30 <p style={{ fontSize: "0.9rem", lineHeight: "1.5" }}>
31 {algorithm.description}
32 </p>
33 </div>
34 <div
35 style={{
36 marginBottom: "1.5rem",
37 display: "flex",
38 gap: "2rem",
39 flexWrap: "wrap",
40 }}
41 >
42 <div>
43 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
44 Version:{" "}
45 </span>
46 <span style={{ fontSize: "0.9rem" }}>{algorithm.version}</span>
47 </div>
48 <div>
49 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>Tags: </span>
50 {algorithm.tags.map((tag) => (
51 <span
56 {tag}
57 </span>
58 ))}
59 </div>
60 {algorithm.source_file && (
61 <div>
62 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
63 Source:{" "}
64 </span>
65 <a
66 href={algorithm.source_file}
67 target="_blank"
68 rel="noopener noreferrer"
69 style={{
70 color: "#0066cc",
71 textDecoration: "none",
72 padding: "2px 6px",
73 backgroundColor: "#f0f0f0",
74 borderRadius: "4px",
75 fontSize: "0.9rem",
76 }}
77 >
78 View
79 </a>
80 </div>
81 )}
82 </div>
83 {benchmarkData && (
84 <>
85 <div style={{ marginBottom: "1.5rem" }}>
86 <h2
87 style={{
88 fontSize: "1.2rem",
89 fontWeight: "bold",
90 marginBottom: "0.5rem",
91 }}
92 >
93 Benchmark Results
94 </h2>
95 <BenchmarkCharts chartData={chartData} />
96 </div>
97 <div style={{ marginBottom: "1.5rem" }}>
98 <BenchmarkTable
99 results={benchmarkData.results.filter(
100 (result) => result.algorithm === algorithm.name,
101 )}
102 />
103 </div>
104 </>
105 )}
106 </div>
107 );
108};