silo/web/src/pages/SchemasPage.tsx

import { useEffect, useState } from 'react';
import { get } from '../api/client';
import type { Schema } from '../api/types';

export function SchemasPage() {
  const [schemas, setSchemas] = useState<Schema[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    get<Schema[]>('/api/schemas')
      .then(setSchemas)
      .catch((e: Error) => setError(e.message))
      .finally(() => setLoading(false));
  }, []);

  if (loading) return <p style={{ color: 'var(--ctp-subtext0)' }}>Loading schemas...</p>;
  if (error) return <p style={{ color: 'var(--ctp-red)' }}>Error: {error}</p>;

  return (
    <div>
      <h2 style={{ marginBottom: '1rem' }}>Schemas ({schemas.length})</h2>
      <div style={{
        backgroundColor: 'var(--ctp-surface0)',
        borderRadius: '0.75rem',
        padding: '1rem',
        overflowX: 'auto',
      }}>
        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
          <thead>
            <tr>
              <th style={thStyle}>Name</th>
              <th style={thStyle}>Format</th>
              <th style={thStyle}>Description</th>
              <th style={thStyle}>Segments</th>
            </tr>
          </thead>
          <tbody>
            {schemas.map((s) => (
              <tr key={s.name}>
                <td style={{ ...tdStyle, fontFamily: "'JetBrains Mono', monospace", color: 'var(--ctp-peach)' }}>
                  {s.name}
                </td>
                <td style={{ ...tdStyle, fontFamily: "'JetBrains Mono', monospace" }}>{s.format}</td>
                <td style={tdStyle}>{s.description}</td>
                <td style={tdStyle}>{s.segments.length}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

const thStyle: React.CSSProperties = {
  padding: '0.75rem 1rem',
  textAlign: 'left',
  borderBottom: '1px solid var(--ctp-surface1)',
  color: 'var(--ctp-subtext1)',
  fontWeight: 600,
  fontSize: '0.85rem',
  textTransform: 'uppercase',
  letterSpacing: '0.05em',
};

const tdStyle: React.CSSProperties = {
  padding: '0.75rem 1rem',
  borderBottom: '1px solid var(--ctp-surface1)',
};