MichaelBradley/website
MichaelBradley/website
1
0
Fork 0
Code Issues Pull requests Activity Actions

Make fetch colours less repetitive

Browse source 
Pretty sure this actually increases LoC but hey, I need something point at to show I know react
This commit is contained in:
Michael Bradley 2025-01-05 22:12:57 +13:00
parent c7b120326d
commit e98602c0c2
Signed by: MichaelBradley
SSH key fingerprint: SHA256:cj/YZ5VT+QOKncqSkx+ibKTIn0Obg7OIzwzl9BL8EO8
1 changed files with 30 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

50
src/Body.tsx
View file

@ -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) => (
<span style={{ color: `var(--color${colorNum})` }}>███</span>
);
type ColouredLineProps = {
light: boolean;
};
const ColouredLine = ({ light }: ColouredLineProps) => {
const startIndex = light ? 8 : 0;
return (
<p className="blocks">
{Array.from({ length: 8 }).map(
(
_value,
index, // Apparently this is the best way to map a range in JavaScript
) => (
<ColouredBlock colorNum={startIndex + index} key={index} />
),
)}
</p>
);
};
// TODO: Automate screenshot of info for thumbnail?
const Fetch = () => {
return (
@ -55,26 +83,8 @@ const Fetch = () => {
<p>
<br />
</p>
<p className="blocks">
<span style={{ color: "var(--color0)" }}>███</span>
<span style={{ color: "var(--color1)" }}>███</span>
<span style={{ color: "var(--color2)" }}>███</span>
<span style={{ color: "var(--color3)" }}>███</span>
<span style={{ color: "var(--color4)" }}>███</span>
<span style={{ color: "var(--color5)" }}>███</span>
<span style={{ color: "var(--color6)" }}>███</span>
<span style={{ color: "var(--color7)" }}>███</span>
</p>
<p className="blocks">
<span style={{ color: "var(--color8)" }}>███</span>
<span style={{ color: "var(--color9)" }}>███</span>
<span style={{ color: "var(--color10)" }}>███</span>
<span style={{ color: "var(--color11)" }}>███</span>
<span style={{ color: "var(--color12)" }}>███</span>
<span style={{ color: "var(--color13)" }}>███</span>
<span style={{ color: "var(--color14)" }}>███</span>
<span style={{ color: "var(--color15)" }}>███</span>
</p>
<ColouredLine light={false} />
<ColouredLine light={true} />
</div>
</div>
</div>