@mcp-shark/mcp-shark/ui/src/components/DetailsTab/HeadersSection.jsx

Aggregate multiple Model Context Protocol (MCP) servers into a single unified interface with a powerful monitoring UI. Prov deep visibility into every request and response.

import { colors, fonts } from '../../theme';
import CollapsibleSection from '../CollapsibleSection';

export default function HeadersSection({ headers, titleColor }) {
  if (!headers || Object.keys(headers).length === 0) return null;

  return (
    <CollapsibleSection title="Headers">
      {Object.entries(headers).map(([key, value]) => (
        <div key={key} style={{ marginBottom: '6px', fontSize: '12px', fontFamily: fonts.body }}>
          <span
            style={{
              color: titleColor,
              fontWeight: '500',
              fontFamily: fonts.mono,
            }}
          >
            {key}:
          </span>{' '}
          <span style={{ color: colors.textPrimary }}>{String(value)}</span>
        </div>
      ))}
    </CollapsibleSection>
  );
}