wow

src/components/AboutRow.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+	year: string;
+	connector: "wave" | "line";
+}
+
+const { year, connector } = Astro.props;
+const connectorClass =
+	connector === "wave"
+		? "h-[0.17em] w-[0.52em] [filter:var(--mono-filter)]"
+		: "h-[0.1em] w-[0.55em] [filter:var(--mono-filter)]";
+---
+
+<div
+    class="grid min-w-0 grid-cols-[2.25em_0.55em_minmax(0,1fr)] items-center gap-[0.5em]"
+>
+    <time class="whitespace-nowrap" datetime={year}>{year}</time>
+    <img
+        class={connectorClass}
+        src={`/about/separator-${connector}.svg`}
+        alt=""
+        aria-hidden="true"
+    />
+    <div
+        class="flex min-w-0 flex-wrap items-center gap-x-[0.34em] gap-y-[0.2em] lg:flex-nowrap"
+    >
+        <slot />
+    </div>
+</div>