a fun bot for the hc slack
dunkirk.sh
1import { useEffect, useState } from "react";
2import { Link } from "react-router-dom";
3import { prettyPrintTime } from "../../../libs/time";
4import type { Project } from "../../api/routes/projects";
5
6export function Projects() {
7 const [projects, setProjects] = useState<Project[]>([]);
8
9 useEffect(() => {
10 async function getProjects() {
11 try {
12 const res = await fetch("/api/projects");
13 if (!res.ok) {
14 throw new Error(`HTTP error! status: ${res.status}`);
15 }
16 const data = await res.json();
17 setProjects(data.projects);
18 } catch (error) {
19 console.error("Error fetching projects:", error);
20 setProjects([]);
21 }
22 }
23 getProjects();
24 }, []);
25
26 return (
27 <div className="container">
28 <h1 className="title">Projects</h1>
29 {projects.length === 0 ? (
30 <div className="no-takes-message">No projects found</div>
31 ) : (
32 <div className="projects-grid">
33 {projects.map((project) => (
34 <Link
35 to={`/user/${encodeURIComponent(project.userId)}`}
36 key={project.projectName}
37 className="project-card"
38 >
39 <img
40 src={project.projectBannerUrl}
41 alt={`${project.projectName} banner`}
42 className="project-banner"
43 />
44 <h2 className="project-title">
45 {project.projectName}
46 </h2>
47 <div className="project-meta">
48 <span>
49 Total Time:{" "}
50 {prettyPrintTime(
51 project.totalTakesTime * 1000,
52 )}
53 </span>
54 </div>
55 </Link>
56 ))}
57 </div>
58 )}
59 </div>
60 );
61}