1import React from "react";
2import { Link } from "react-router-dom";
3import yaml from "yaml";
4import contentYaml from "../content/home-content.yml?raw";
5import { HomeContent, HomeSection } from "../types/home-content";
6import "../components/Button.css";
8const content = yaml.parse(contentYaml) as HomeContent;
10const SectionCard: React.FC<{ section: HomeSection }> = ({ section }) => {
11 if (section.external) {
12 return (
13 <div
14 style={{
15 padding: "1.5rem",
16 border: "1px solid #eaeaea",
17 borderRadius: "8px",
18 backgroundColor: "#f9f9f9",
19 }}
20 >
21 <h2 style={{ marginBottom: "1rem" }}>{section.title}</h2>
22 <p style={{ marginBottom: "1rem" }}>{section.description}</p>
23 <a
24 href={section.link}
25 target="_blank"
26 rel="noopener noreferrer"
27 className="soft-button"
28 >
29 {section.linkText}
30 </a>
31 </div>
32 );
33 }
35 return (
36 <div
37 style={{
38 padding: "1.5rem",
39 border: "1px solid #eaeaea",
40 borderRadius: "8px",
41 backgroundColor: "#f9f9f9",
42 }}
43 >
44 <h2 style={{ marginBottom: "1rem" }}>{section.title}</h2>
45 <p style={{ marginBottom: "1rem" }}>{section.description}</p>
46 <Link to={section.link} className="soft-button">
47 {section.linkText}
48 </Link>
49 </div>
50 );
51};
53export default function Home() {
54 return (
55 <div style={{ maxWidth: "1200px", margin: "0 auto", padding: "2rem" }}>
56 <h1 style={{ marginBottom: "2rem" }}>{content.title}</h1>
58 <p
59 style={{ fontSize: "1.1rem", lineHeight: "1.6", marginBottom: "2rem" }}
60 >
61 {content.description}
62 </p>
64 <div
65 style={{
66 display: "grid",
67 gap: "2rem",
68 gridTemplateColumns: "repeat(auto-fit, minmax(300px, 1fr))",
69 }}
70 >
71 {Object.entries(content.sections).map(([key, section]) => (
72 <SectionCard key={key} section={section} />
73 ))}
74 </div>
76 <hr
77 style={{
78 margin: "3rem 0",
79 border: "none",
80 borderTop: "1px solid #eaeaea",
81 }}
82 />
84 <footer
85 style={{ textAlign: "center", color: "#666", fontSize: "0.9rem" }}
86 >
87 <p>
88 Last updated: {__BUILD_DATE__}
89 <br />
90 Released under{" "}
91 <a
92 href="https://github.com/magland/benchcompress/blob/main/LICENSE"
93 target="_blank"
94 rel="noopener noreferrer"
95 style={{ color: "#666", textDecoration: "underline" }}
96 >
97 Apache License 2.0
98 </a>
99 </p>
100 </footer>
101 </div>
102 );
103}