From 3844cc229607a371f1146c1b83bab773ed2ddbac Mon Sep 17 00:00:00 2001
From: Gabriel Kaszewski <gabrielkaszewski@gmail.com>
Date: Wed, 8 Apr 2026 02:29:10 +0200
Subject: [PATCH] feat(app): add ChordChart component with monospaced rendering

---
 app/app/components/chord-chart.tsx | 48 ++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 app/app/components/chord-chart.tsx

diff --git a/app/app/components/chord-chart.tsx b/app/app/components/chord-chart.tsx
new file mode 100644
index 0000000..7d50539
--- /dev/null
+++ b/app/app/components/chord-chart.tsx
@@ -0,0 +1,48 @@
+import type { Section } from "~/lib/types";
+
+interface Props {
+  sections: Section[];
+}
+
+function buildChordRow(chords: { offset: number; chord: string }[]): string {
+  let row = "";
+  for (const { offset, chord } of chords) {
+    while (row.length < offset) row += " ";
+    row += chord;
+  }
+  return row;
+}
+
+function SectionBlock({ section }: { section: Section }) {
+  return (
+    <div className="mb-6">
+      {section.label && (
+        <p className="text-xs text-muted-foreground mb-1">[{section.label}]</p>
+      )}
+      {section.lines.map((line, i) => (
+        <div key={i} className="leading-tight">
+          {line.chords.length > 0 && (
+            <pre className="text-primary text-sm font-mono whitespace-pre">
+              {buildChordRow(line.chords)}
+            </pre>
+          )}
+          {line.text && (
+            <pre className="text-foreground text-sm font-mono whitespace-pre">
+              {line.text}
+            </pre>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export function ChordChart({ sections }: Props) {
+  return (
+    <div className="px-4 py-3">
+      {sections.map((section, i) => (
+        <SectionBlock key={i} section={section} />
+      ))}
+    </div>
+  );
+}