feat: horizontal rule

Author: pahund

src/App.tsx

@@ -1,6 +1,7 @@
 import { useState } from "react";
 import zappermentRocksLogo from "./assets/zapperment-rocks-logo.png";
 import "./App.css";
+import { HorizontalRule } from "./HorizontalRule";
 
 function App() {
   const [showMore, setShowMore] = useState(false);
@@ -15,6 +16,7 @@ function App() {
         />
         <h1>zapperment.rocks</h1>
       </header>
+      <HorizontalRule />
 
       <div className="hero">
         <div className="hero-inner">

src/HorizontalRule.css

@@ -0,0 +1,19 @@
+.horizontal-rule {
+  display: none;
+}
+
+@media (min-width: 900px) {
+  .horizontal-rule {
+    display: flex;
+    height: 0.6rem;
+
+    width: 100vw;
+    position: relative;
+    left: calc((100% - 100vw) / 2);
+    box-sizing: border-box;
+  }
+}
+
+.horizontal-rule > * {
+  flex: 1;
+}

src/HorizontalRule.tsx

@@ -0,0 +1,22 @@
+import "./HorizontalRule.css";
+
+const colours = [
+  "#FE3636",
+  "#F66C02",
+  "#DBC302",
+  "#85961F",
+  "#14BFAF",
+  "#1A2F96",
+  "#624BAD",
+  "#FD39D4",
+];
+
+export function HorizontalRule() {
+  return (
+    <div className="horizontal-rule">
+      {colours.map((colour) => (
+        <div key={colour} style={{ backgroundColor: colour }} />
+      ))}
+    </div>
+  );
+}