1import { Algorithm } from "../types";
2import { Link } from "react-router-dom";
3import { TagFilter } from "../components/TagFilter";
4import { useTagFilter } from "../hooks/useTagFilter";
6interface AlgorithmsProps {
7 algorithms: Algorithm[];
8}
10function Algorithms({ algorithms }: AlgorithmsProps) {
11 const {
12 selectedTags,
13 availableTags,
14 filteredItems: filteredAlgorithms,
15 toggleTag,
16 } = useTagFilter(algorithms);
18 return (
19 <div>
20 <div style={{ marginBottom: "2rem" }}>
21 <h1
22 style={{
23 fontSize: "2rem",
24 fontWeight: "bold",
25 color: "#333",
26 marginBottom: "1rem",
27 }}
28 >
29 Compression Algorithms
30 </h1>
31 <TagFilter
32 availableTags={availableTags}
33 selectedTags={selectedTags}
34 onTagToggle={toggleTag}
35 label="Filter algorithms"
36 />
37 </div>
38 <div style={{ overflowX: "auto" }}>
39 <table style={{ width: "100%", borderCollapse: "collapse" }}>
40 <thead>
41 <tr style={{ backgroundColor: "#f5f5f5" }}>
42 <th
43 style={{
44 padding: "8px 12px",
45 textAlign: "left",
46 borderBottom: "1px solid #ddd",
47 fontSize: "0.9rem",
48 whiteSpace: "nowrap",
49 }}
50 >
51 Name
52 </th>
53 <th
54 style={{
55 padding: "8px 12px",
56 textAlign: "left",
57 borderBottom: "1px solid #ddd",
58 fontSize: "0.9rem",
59 whiteSpace: "nowrap",
60 }}
61 >
62 Version
63 </th>
64 <th
65 style={{
66 padding: "8px 12px",
67 textAlign: "left",
68 borderBottom: "1px solid #ddd",
69 fontSize: "0.9rem",
70 whiteSpace: "nowrap",
71 }}
72 >
73 Description
74 </th>
75 <th
76 style={{
77 padding: "8px 12px",
78 textAlign: "left",
79 borderBottom: "1px solid #ddd",
80 fontSize: "0.9rem",
81 whiteSpace: "nowrap",
82 }}
83 >
84 Tags
85 </th>
86 <th
87 style={{
88 padding: "8px 12px",
89 textAlign: "left",
90 borderBottom: "1px solid #ddd",
91 fontSize: "0.9rem",
92 whiteSpace: "nowrap",
93 }}
94 >
95 Source
96 </th>
97 </tr>
98 </thead>
99 <tbody>
100 {filteredAlgorithms.map((algorithm, index) => (
101 <tr
102 key={`${algorithm.name}-${algorithm.version}`}
103 style={{
104 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
105 }}
106 >
107 <td
108 style={{
109 padding: "6px 12px",
110 borderBottom: "1px solid #ddd",
111 fontSize: "0.9rem",
112 }}
113 >
114 <Link
115 to={`/algorithm/${encodeURIComponent(algorithm.name)}`}
116 style={{
117 color: "#0066cc",
118 textDecoration: "none",
119 fontWeight: "500",
120 }}
121 >
122 {algorithm.name}
123 </Link>
124 </td>
125 <td
126 style={{
127 padding: "6px 12px",
128 borderBottom: "1px solid #ddd",
129 fontSize: "0.9rem",
130 }}
131 >
132 {algorithm.version}
133 </td>
134 <td
135 style={{
136 padding: "6px 12px",
137 borderBottom: "1px solid #ddd",
138 fontSize: "0.9rem",
139 }}
140 >
141 {algorithm.description}
142 </td>
143 <td
144 style={{
145 padding: "6px 12px",
146 borderBottom: "1px solid #ddd",
147 fontSize: "0.9rem",
148 }}
149 >
150 {algorithm.tags.map((tag) => (
151 <span
152 key={tag}
153 style={{
154 display: "inline-block",
155 backgroundColor: "#e1e1e1",
156 padding: "2px 6px",
157 borderRadius: "3px",
158 margin: "1px",
159 fontSize: "0.8rem",
160 }}
161 >
162 {tag}
163 </span>
164 ))}
165 </td>
166 <td
167 style={{
168 padding: "6px 12px",
169 borderBottom: "1px solid #ddd",
170 fontSize: "0.9rem",
171 }}
172 >
173 {algorithm.source_file && (
174 <a
175 href={algorithm.source_file}
176 target="_blank"
177 rel="noopener noreferrer"
178 style={{
179 color: "#0066cc",
180 textDecoration: "none",
181 }}
182 >
183 View Source
184 </a>
185 )}
186 </td>
187 </tr>
188 ))}
189 </tbody>
190 </table>
191 </div>
192 </div>
193 );
194}
196export default Algorithms;