front: pull project data from JSON

1 files changed, 93 insertions, 0 deletions

diff --git a/front/src/components/project.tsx b/front/src/components/project.tsx
new file mode 100644
index 0000000..cb9496d
--- /dev/null
+++ b/front/src/components/project.tsx
@@ -0,0 +1,93 @@
+import Carousel from "./carousel";
+import './project.css';
+
+enum ProjectType {
+  GAME = "game",
+  PROJECT = "project",
+}
+
+export enum ProjectTech {
+  CSHARP = "csharp",
+  RUST = "rust",
+  C = "c",
+  CPP = "cpp",
+  JAVASCRIPT = "javascript",
+  TYPESCRIPT = "typescript",
+  HTML = "html",
+  CSS = "css",
+
+  PREACT = "preact",
+  UNITY = "unity",
+  GODOT = "godot",
+  MONOGAME = "monogame",
+}
+
+export enum ProjectTarget {
+  WEB = "html5",
+  WINDOWS = "windows",
+  LINUX = "linux",
+  MACOS = "macos",
+  ANDROID = "android",
+  HYPRLAND = "hyprland",
+}
+
+export interface ProjectDescriptor {
+  name: string;
+  name_normalized: string;
+  type: ProjectType;
+  link: string;
+  tech: ProjectTech[];
+  targets: ProjectTarget[];
+  images: string[];
+  description: string;
+}
+
+function getProjectImageLink(project: ProjectDescriptor, image: string) {
+  return `assets/${project.type}s/${project.name_normalized}/${image}`;
+}
+
+function getProjectTechIconLink(tech: ProjectTech) {
+  return `assets/images/${tech}.png`;
+}
+
+function getProjectTargetIconLink(target: ProjectTarget) {
+  return `assets/images/${target}.png`;
+}
+
+export function Project(props: ProjectDescriptor) {
+  return (
+    <div class="project">
+      <div class="project-title"><a href={props.link}>{props.name}</a></div>
+      <div class="project-info">
+        <div class="icon-row">
+          <div class="icon-text">Made using</div>
+          <div class="icon-container">
+            {props.tech.map((tech) => (
+              <img class="grow icon" src={getProjectTechIconLink(tech)} />
+            ))}
+          </div>
+        </div>
+        <div class="icon-row">
+          <div class="icon-text">Available on</div>
+          <div class="icon-container">
+            {props.targets.map((target) => (
+              <img class="grow icon" src={getProjectTargetIconLink(target)} />
+            ))}
+          </div>
+        </div>
+        <hr />
+        <div class="project-description">
+          {
+            // use description as html
+            <div dangerouslySetInnerHTML={{ __html: props.description }} />
+          }
+        </div>
+      </div>
+      <Carousel>
+        {props.images.map((image) => (
+          <img class="project-image" src={getProjectImageLink(props, image)} />
+        ))}
+      </Carousel>
+    </div>
+  );
+}