@mcp-shark/mcp-shark/ui/src/HelpGuide/HelpGuideHeader.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 { IconHelp, IconX } from '@tabler/icons-react';

export default function HelpGuideHeader({ onClose }) {
  return (
    <div
      style={{
        padding: '20px 24px',
        borderBottom: `1px solid ${colors.borderLight}`,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
      }}
    >
      <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
        <div style={{ color: colors.accentBlue }}>
          <IconHelp size={24} stroke={1.5} />
        </div>
        <h2
          style={{
            margin: 0,
            color: colors.textPrimary,
            fontSize: '20px',
            fontWeight: '600',
            fontFamily: fonts.body,
          }}
        >
          Welcome to MCP Shark
        </h2>
      </div>
      <button
        onClick={onClose}
        style={{
          background: 'transparent',
          border: 'none',
          color: colors.textTertiary,
          cursor: 'pointer',
          padding: '4px',
          display: 'flex',
          alignItems: 'center',
          borderRadius: '8px',
        }}
        onMouseEnter={(e) => {
          e.currentTarget.style.background = colors.bgHover;
          e.currentTarget.style.color = colors.textPrimary;
        }}
        onMouseLeave={(e) => {
          e.currentTarget.style.background = 'transparent';
          e.currentTarget.style.color = colors.textTertiary;
        }}
      >
        <IconX size={20} stroke={1.5} />
      </button>
    </div>
  );
}