diff --git a/src/Body.tsx b/src/Body.tsx
index 450072e..7243f78 100644
--- a/src/Body.tsx
+++ b/src/Body.tsx
@@ -8,6 +8,34 @@ import LinkedIn from "./assets/linkedin.svg?react";
import Mastodon from "./assets/mastodon.svg?react";
import DarkModeToggleIcon from "./assets/darkmodetoggle.svg?react";
+type ColouredBlockProps = {
+ colorNum: number;
+};
+
+const ColouredBlock = ({ colorNum }: ColouredBlockProps) => (
+ ███
+);
+
+type ColouredLineProps = {
+ light: boolean;
+};
+
+const ColouredLine = ({ light }: ColouredLineProps) => {
+ const startIndex = light ? 8 : 0;
+ return (
+
+ {Array.from({ length: 8 }).map(
+ (
+ _value,
+ index, // Apparently this is the best way to map a range in JavaScript
+ ) => (
+
+ ),
+ )}
+
+ );
+};
+
// TODO: Automate screenshot of info for thumbnail?
const Fetch = () => {
return (
@@ -55,26 +83,8 @@ const Fetch = () => {
-
- ███
- ███
- ███
- ███
- ███
- ███
- ███
- ███
-
-
- ███
- ███
- ███
- ███
- ███
- ███
- ███
- ███
-
+
+