Add GithubLink component

Refactor styles and components

Author: Constantiner

package-lock.json

@@ -50,6 +50,7 @@
 		"lint-staged": "^13.2.3",
 		"prettier": "^3.0.0",
 		"react-scripts": "^5.0.1",
+		"sass": "^1.64.2",
 		"stylelint": "^15.10.2",
 		"stylelint-config-prettier": "^9.0.5",
 		"stylelint-config-recommended": "^13.0.0",

package.json

@@ -0,0 +1,5 @@
+.sierpinski-triangle {
+	position: relative;
+	width: 100%;
+	height: 100%;
+}

src/app.scss

@@ -1,7 +1,13 @@
 import type { FunctionComponent } from "react";
-import "./app.css";
-import { SierpinskiTriangle } from "./sierpinskiTriangle";
+import "./app.scss";
+import { GithubLink } from "./components/githubLink";
+import { SierpinskiTriangle } from "./components/sierpinskiTriangle";
 
 export const App: FunctionComponent<Record<string, never>> = () => {
-	return <SierpinskiTriangle className="canvas" />;
+	return (
+		<div className="sierpinski-triangle">
+			<SierpinskiTriangle />
+			<GithubLink />
+		</div>
+	);
 };

src/app.tsx

@@ -0,0 +1,37 @@
+.github-link {
+	position: absolute;
+	top: 0;
+	right: 0;
+	width: 100px;
+	height: 100px;
+
+	&--triangle {
+		position: absolute;
+		top: 0;
+		right: 0;
+		border-top: 100px solid black;
+		border-left: 100px solid transparent;
+	}
+
+	&--icon-container {
+		position: absolute;
+		top: 5px;
+		right: 5px;
+		width: 50px;
+		height: 50px;
+		overflow: hidden;
+		box-sizing: border-box;
+	}
+
+	&--icon {
+		width: 100%;
+		height: 100%;
+		transform: rotate(45deg);
+		transition: transform 0.2s ease-in-out;
+		color: white;
+
+		&:hover {
+			transform: rotate(405deg);
+		}
+	}
+}

src/components/github-mark.svg

@@ -0,0 +1,21 @@
+import type { FunctionComponent } from "react";
+import { ReactComponent as GithubMark } from "./github-mark.svg";
+import "./githubLink.scss";
+
+export const GithubLink: FunctionComponent<Record<string, never>> = () => {
+	return (
+		<>
+			<div className="github-link--triangle"></div>
+			<a
+				href="https://github.com/Constantiner/sierpinski-triangle-react"
+				target="_blank"
+				rel="noopener noreferrer"
+				className="github-link"
+			>
+				<div className="github-link--icon-container">
+					<GithubMark className="github-link--icon" />
+				</div>
+			</a>
+		</>
+	);
+};

src/components/githubLink.scss

@@ -1,9 +1,8 @@
-.canvas {
+.sierpinski-triangle-canvas {
 	width: 100%;
 	height: 100%;
 	background-color: white;
 	position: absolute;
 	top: 0;
 	left: 0;
-	z-index: 1;
 }

src/components/githubLink.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef, type CanvasHTMLAttributes, type FunctionComponent } from "react";
-import { useAnimation } from "./hooks/useAnimation";
-import { useCanvas } from "./hooks/useCanvas";
-import { drawTriangle, type Coordinates, type FillStyle, type TriangleCoordinates } from "./util/canvasUtil";
+import { useAnimation } from "../hooks/useAnimation";
+import { useCanvas } from "../hooks/useCanvas";
+import { drawTriangle, type Coordinates, type FillStyle, type TriangleCoordinates } from "../util/canvasUtil";
+import "./sierpinskiTriangle.scss";
 
 /**
  * Recursively draws Sierpiński triangles within a bounding triangle.
@@ -143,5 +144,5 @@ export const SierpinskiTriangle: FunctionComponent<CanvasHTMLAttributes<HTMLCanv
 	}, [contextReference, height, startAnimation, width]);
 
 	// Return the canvas element.
-	return <canvas ref={canvasReference} {...properties} />;
+	return <canvas className="sierpinski-triangle-canvas" ref={canvasReference} {...properties} />;
 };

src/app.css src/components/sierpinskiTriangle.scsssrc/app.css renamed to src/components/sierpinskiTriangle.scss

@@ -1,3 +1,13 @@
+:root,
+html,
+body,
+#root {
+	width: 100%;
+	max-width: 100%;
+	height: 100%;
+	max-height: 100%;
+}
+
 body {
 	margin: 0;
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",