feat: source button

apps/lab/app/experiments/[experiment]/SourceButton.module.scss

@@ -0,0 +1,29 @@
+.sourceButton {
+  position: fixed;
+  bottom: 2rem;
+  right: 2rem;
+  cursor: pointer;
+  background-color: white;
+  box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.65);
+
+  width: 3rem;
+  height: 3rem;
+  border-radius: 50%;
+
+  display: grid;
+  place-items: center;
+
+  transform: scale(1);
+  transition: transform 0.2s ease-in-out;
+
+  &:hover {
+    transform: scale(1.125);
+  }
+
+  a {
+    // font-family: $sans-serif;
+    color: black;
+    font-weight: light;
+    text-decoration: none;
+  }
+}

apps/lab/app/experiments/[experiment]/SourceButton.tsx

@@ -0,0 +1,15 @@
+import styles from "./SourceButton.module.scss";
+
+export function SourceButton(props: { experiment: string }) {
+  return (
+    <div className={styles.sourceButton}>
+      <a
+        rel="noreferrer"
+        target="_blank"
+        href={`https://github.com/JMBeresford/lab-2023/tree/main/experiments/${props.experiment}`}
+      >
+        {"</>"}
+      </a>
+    </div>
+  );
+}

apps/lab/app/experiments/[experiment]/page.tsx

@@ -1,6 +1,7 @@
 import { getMetadata } from "@/helpers/metadata";
 import { ExperimentData } from "experiment-data";
 import dynamic from "next/dynamic";
+import { SourceButton } from "./SourceButton";
 
 const ExperimentFrame = dynamic(() => import("./ExperimentFrame"), { ssr: false });
 
@@ -11,7 +12,16 @@ type Props = {
 };
 
 export default function Page({ params }: Props) {
-  return <ExperimentFrame experiment={params.experiment} />;
+  const datum = Object.values(ExperimentData).find((e) => e.pathName === params.experiment);
+
+  if (!datum) return null;
+
+  return (
+    <>
+      <SourceButton experiment={datum?.name} />
+      <ExperimentFrame experiment={params.experiment} />
+    </>
+  );
 }
 
 export async function generateStaticParams() {