dev-api-ui 0.1.7

package/ui/components/DocsNav.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+
+interface NavItem {
+  id: string;
+  label: string;
+}
+
+interface NavSection {
+  title: string;
+  items: NavItem[];
+}
+
+interface DocsNavProps {
+  sections: NavSection[];
+  active: string;
+  onSelect: (id: string) => void;
+}
+
+export default function DocsNav({ sections, active, onSelect }: DocsNavProps) {
+  return (
+    <aside
+      style={{
+        position: 'sticky',
+        top: 57,
+        alignSelf: 'start',
+        height: 'calc(100vh - 57px)',
+        overflowY: 'auto',
+        borderRight: '0.5px solid var(--hairline)',
+        padding: '26px 22px 40px',
+      }}
+    >
+      {sections.map((s) => (
+        <div key={s.title} style={{ marginBottom: 22 }}>
+          <div
+            style={{
+              fontSize: 11,
+              fontWeight: 600,
+              textTransform: 'uppercase',
+              letterSpacing: '.07em',
+              color: 'var(--tertiary)',
+              marginBottom: 9,
+            }}
+          >
+            {s.title}
+          </div>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+            {s.items.map((it) => {
+              const isActive = active === it.id;
+              return (
+                <a
+                  key={it.id}
+                  href={`#${it.id}`}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    onSelect(it.id);
+                    const el = document.getElementById(it.id);
+                    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+                  }}
+                  aria-current={isActive ? 'page' : undefined}
+                  style={{
+                    fontSize: 14,
+                    padding: '5px 10px',
+                    borderRadius: 4,
+                    textDecoration: 'none',
+                    color: isActive ? 'var(--ink)' : 'var(--secondary)',
+                    background: isActive ? '#F2F2EF' : 'transparent',
+                    borderLeft: `2px solid ${isActive ? 'var(--accent)' : 'transparent'}`,
+                  }}
+                >
+                  {it.label}
+                </a>
+              );
+            })}
+          </div>
+        </div>
+      ))}
+    </aside>
+  );
+}

package/ui/components/Footer.tsx

@@ -0,0 +1,136 @@
+import Link from 'next/link';
+
+export interface FooterLink {
+  label: string;
+  href: string;
+}
+
+export interface FooterProps {
+  wordmark?: string;
+  tagline?: string;
+  byline?: string;
+  /**
+   * Links rendered in the footer "Legal" column. Defaults to the universal
+   * /terms + /privacy routes every product ships. Pass an explicit list to
+   * override (e.g. add /privacy/subprocessors or an SLA page).
+   */
+  legalLinks?: FooterLink[];
+}
+
+export default function Footer({
+  wordmark = 'Console',
+  tagline = 'the data API',
+  byline = '',
+  legalLinks = [
+    { label: 'Terms', href: '/terms' },
+    { label: 'Privacy', href: '/privacy' },
+  ],
+}: FooterProps = {}) {
+  return (
+    <footer
+      style={{
+        borderTop: '0.5px solid var(--hairline)',
+        padding: '40px 0 56px',
+        marginTop: 62,
+        background: 'var(--surface)',
+      }}
+    >
+      <div
+        style={{
+          maxWidth: 1100,
+          margin: '0 auto',
+          padding: '0 32px',
+        }}
+      >
+        {/* Upper block: wordmark + link columns */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: 30,
+            flexWrap: 'wrap',
+          }}
+        >
+          {/* Wordmark */}
+          <div
+            style={{
+              display: 'flex',
+              alignItems: 'center',
+              gap: 9,
+              fontFamily: 'var(--head)',
+              fontWeight: 600,
+              fontSize: 15,
+              letterSpacing: '-0.01em',
+            }}
+          >
+            <span
+              style={{
+                width: 8,
+                height: 8,
+                background: 'var(--accent)',
+                transform: 'rotate(45deg)',
+                display: 'inline-block',
+              }}
+            />
+            {wordmark}
+          </div>
+
+          {/* Link columns */}
+          <div style={{ display: 'flex', gap: 46, flexWrap: 'wrap' }}>
+            <div style={{ display: 'grid', gap: 8, fontSize: 13, color: 'var(--secondary)' }}>
+              <span style={{ color: 'var(--tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Product</span>
+              <Link href="/fx" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>Data</Link>
+              <Link href="/docs" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>Docs</Link>
+              <Link href="/pricing" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>Pricing</Link>
+              <Link href="/status" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>Status</Link>
+            </div>
+            <div style={{ display: 'grid', gap: 8, fontSize: 13, color: 'var(--secondary)' }}>
+              <span style={{ color: 'var(--tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Company</span>
+              <a href="#" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>About</a>
+              <a href="#" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>Customers</a>
+              <a href="#" style={{ color: 'var(--secondary)', textDecoration: 'none' }}>Enterprise</a>
+            </div>
+            <div style={{ display: 'grid', gap: 8, fontSize: 13, color: 'var(--secondary)' }}>
+              <span style={{ color: 'var(--tertiary)', fontSize: 11, textTransform: 'uppercase', letterSpacing: '.08em', fontWeight: 600 }}>Legal</span>
+              {legalLinks.map((l) => (
+                <Link key={l.href} href={l.href} style={{ color: 'var(--secondary)', textDecoration: 'none' }}>{l.label}</Link>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        {/* 0.5px divider */}
+        <div
+          style={{
+            borderTop: '0.5px solid var(--hairline)',
+            marginTop: 30,
+            paddingTop: 18,
+            fontSize: 12,
+            color: 'var(--tertiary)',
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: 16,
+            flexWrap: 'wrap',
+          }}
+        >
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
+            <span
+              style={{
+                width: 8,
+                height: 8,
+                background: 'var(--accent)',
+                transform: 'rotate(45deg)',
+                display: 'inline-block',
+              }}
+            />
+            {wordmark} · {tagline}{byline ? ` · ${byline}` : ''}
+          </span>
+          <span style={{ display: 'inline-flex', alignItems: 'center', gap: 12 }}>
+            <a href="https://www.tradingview.com" target="_blank" rel="noreferrer" style={{ color: 'var(--tertiary)', textDecoration: 'none' }}>Charts by TradingView</a>
+            <span>© 2026</span>
+          </span>
+        </div>
+      </div>
+    </footer>
+  );
+}