From e98602c0c21cc2dabea3f09de9838868514a76f0 Mon Sep 17 00:00:00 2001 From: Michael Bradley Date: Sun, 5 Jan 2025 22:12:57 +1300 Subject: [PATCH] Make fetch colours less repetitive Pretty sure this actually increases LoC but hey, I need something point at to show I know react --- src/Body.tsx | 50 ++++++++++++++++++++++++++++++-------------------- 1 file changed, 30 insertions(+), 20 deletions(-) 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 = () => {


-

- ███ - ███ - ███ - ███ - ███ - ███ - ███ - ███ -

-

- ███ - ███ - ███ - ███ - ███ - ███ - ███ - ███ -

+ +