first publish

src/components/ui/Marginalia.tsx

@@ -0,0 +1,66 @@
+import { cn } from "@/lib/utils";
+
+export interface MarginaliaItem {
+  /** Optional mono label, e.g. „Praxis“ → „Praxis: B2B-Außendienst“. */
+  label?: string;
+  value: string;
+  href?: string;
+  /** `target="_blank"` + ↗ */
+  external?: boolean;
+}
+
+export interface MarginaliaProps {
+  items: readonly MarginaliaItem[];
+  /** Optional caps heading above the list, e.g. „Was du bekommst“. */
+  title?: string;
+  /** `lg:sticky lg:top-[30vh]` */
+  sticky?: boolean;
+  className?: string;
+}
+
+/** Shared mono meta style (DM Mono 12 px, ls .06em, tabular). */
+export const MONO = "font-mono text-xs tracking-[0.06em] tabular-nums";
+
+/**
+ * Verifiable facts in the outer column: DM Mono 12 px, muted, one gold tick
+ * per line. Links get the growing accent underline; external ones ↗.
+ */
+export function Marginalia({ items, title, sticky = false, className }: MarginaliaProps) {
+  return (
+    <aside className={cn(MONO, "text-fg-muted", sticky && "lg:sticky lg:top-[30vh]", className)}>
+      {title && <p className="mb-4 uppercase tracking-[0.12em] text-accent">{title}</p>}
+      <ul className="flex flex-col gap-3">
+        {items.map((item, i) => {
+          const text = item.label ? `${item.label}: ${item.value}` : item.value;
+          return (
+            <li key={`${item.value}-${i}`} className="flex items-start gap-3">
+              <span aria-hidden="true" className="mt-[0.55em] h-px w-6 shrink-0 bg-accent" />
+              {item.href ? (
+                <a
+                  href={item.href}
+                  target={item.external ? "_blank" : undefined}
+                  rel={item.external ? "noopener noreferrer" : undefined}
+                  /* Tap target via ::before – padding + negative margin on the flex child
+                     collapsed the <li> box and broke the 12 px tick rhythm of the list. */
+                  className="relative inline-block text-fg before:absolute before:inset-x-0 before:-inset-y-3 before:content-[''] bg-[linear-gradient(currentColor,currentColor)] bg-[length:0%_1px] bg-left-bottom bg-no-repeat pb-px transition-[background-size] duration-[400ms] ease-[var(--ease-out-quart)] hover:bg-[length:100%_1px] focus-visible:bg-[length:100%_1px]"
+                >
+                  {text}
+                  {item.external && (
+                    <>
+                      {" "}
+                      <span aria-hidden="true">↗</span>
+                    </>
+                  )}
+                </a>
+              ) : (
+                <span>{text}</span>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </aside>
+  );
+}
+
+export default Marginalia;