2import { Algorithm as AlgorithmType } from "../types";
4interface AlgorithmProps {
5 algorithms: AlgorithmType[];
6}
8function Algorithm({ algorithms }: AlgorithmProps) {
9 const { algorithmName } = useParams<{ algorithmName: string }>();
10 const algorithm = algorithms.find((a) => a.name === algorithmName);
12 if (!algorithm) {
13 return <div>Algorithm not found</div>;
14 }
16 return (
17 <div>
18 <h1
19 style={{
20 fontSize: "2rem",
21 fontWeight: "bold",
22 color: "#333",
23 marginBottom: "1rem",
24 }}
25 >
26 {algorithm.name}
27 </h1>
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 style={{ marginBottom: "1.5rem" }}>
35 <h2
36 style={{
37 fontSize: "1.2rem",
38 fontWeight: "bold",
39 marginBottom: "0.5rem",
40 }}
41 >
42 Version
43 </h2>
44 <p style={{ fontSize: "0.9rem" }}>{algorithm.version}</p>
45 </div>
46 <div style={{ marginBottom: "1.5rem" }}>
47 <h2
48 style={{
49 fontSize: "1.2rem",
50 fontWeight: "bold",
51 marginBottom: "0.5rem",
52 }}
53 >
54 Tags
55 </h2>
56 <div>
57 {algorithm.tags.map((tag) => (
58 <span
59 key={tag}
60 style={{
61 display: "inline-block",
62 backgroundColor: "#e1e1e1",
63 padding: "2px 6px",
64 borderRadius: "3px",
65 margin: "2px",
66 fontSize: "0.8rem",
67 }}
68 >
69 {tag}
70 </span>
71 ))}
72 </div>
73 </div>
74 {algorithm.source_file && (
75 <div style={{ marginBottom: "1.5rem" }}>
76 <h2
77 style={{
78 fontSize: "1.2rem",
79 fontWeight: "bold",
80 marginBottom: "0.5rem",
81 }}
82 >
83 Source
84 </h2>
85 <a
86 href={algorithm.source_file}
87 target="_blank"
88 rel="noopener noreferrer"
89 style={{
90 color: "#0066cc",
91 textDecoration: "none",
92 padding: "4px 8px",
93 backgroundColor: "#f0f0f0",
94 borderRadius: "4px",
95 fontSize: "0.9rem",
96 }}
97 >
98 View Source
99 </a>
100 </div>
101 )}
102 </div>
103 </div>
104 );
105}
107export default Algorithm;