tracer-cloud--opensre/docs/snippets/code-preview.mdx

export const CodePreview = ({ filename, language, code, totalLines, githubUrl }) => {
  const [copied, setCopied] = React.useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(code);
    setCopied(true);
    setTimeout(() => setCopied(false), 2000);
  };

  return (
    <div style={{
      backgroundColor: '#1a1a1a',
      border: '1px solid #333',
      borderRadius: '0.125rem',
      overflow: 'hidden',
      marginTop: '1rem',
      marginBottom: '1rem'
    }}>
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '12px 16px',
        backgroundColor: '#1a1a1a',
        borderBottom: '1px solid #333'
      }}>
        <span style={{
          fontFamily: 'Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace',
          fontSize: '13px',
          color: '#c9d1d9',
          fontWeight: '400'
        }}>
          {filename}
        </span>
        <button
          onClick={handleCopy}
          style={{
            background: 'transparent',
            border: 'none',
            cursor: 'pointer',
            padding: '6px',
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center'
          }}
          aria-label="Copy code"
        >
          <svg
            width="18"
            height="18"
            viewBox="0 0 18 18"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            style={{
              color: copied ? '#22c55e' : 'rgba(255, 255, 255, 0.4)',
              stroke: copied ? '#22c55e' : 'currentColor',
              fill: 'none',
              transition: 'color 0.2s ease'
            }}
          >
            {copied ? (
              <path d="M15 5L7 13L3 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
            ) : (
              <>
                <path d="M14.25 5.25H7.25C6.14543 5.25 5.25 6.14543 5.25 7.25V14.25C5.25 15.3546 6.14543 16.25 7.25 16.25H14.25C15.3546 16.25 16.25 15.3546 16.25 14.25V7.25C16.25 6.14543 15.3546 5.25 14.25 5.25Z" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M2.80103 11.998L1.77203 5.07397C1.61003 3.98097 2.36403 2.96397 3.45603 2.80197L10.38 1.77297C11.313 1.63397 12.19 2.16297 12.528 3.00097" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
              </>
            )}
          </svg>
        </button>
      </div>
    <div style={{
      position: 'relative',
      maxHeight: '200px',
      overflow: 'hidden',
      backgroundColor: '#1a1a1a'
    }}>
      <div style={{
        padding: '16px',
        fontFamily: 'Monaco, Menlo, Ubuntu Mono, Consolas, source-code-pro, monospace',
        fontSize: '14px',
        lineHeight: '1.6',
        color: '#c9d1d9',
        backgroundColor: '#1a1a1a'
      }}>
        <pre style={{
          margin: 0,
          padding: 0,
          background: 'transparent',
          border: 'none',
          whiteSpace: 'pre',
          overflow: 'visible'
        }}>
          <code className={`language-${language}`} style={{
            background: 'transparent',
            padding: 0,
            fontSize: '14px'
          }}>
{code}
          </code>
        </pre>
      </div>
      <div style={{
        position: 'absolute',
        bottom: 0,
        left: 0,
        right: 0,
        height: '80px',
        background: 'linear-gradient(to bottom, transparent, #1a1a1a)',
        pointerEvents: 'none'
      }}></div>
    </div>
    <a
      href={githubUrl}
      target="_blank"
      rel="noopener noreferrer"
      style={{
        display: 'flex',
        alignItems: 'center',
        gap: '6px',
        padding: '10px 16px',
        backgroundColor: '#1a1a1a',
        borderTop: '1px solid #333',
        color: '#8b949e',
        fontSize: '13px',
        textDecoration: 'none',
        transition: 'background-color 0.2s ease',
        boxSizing: 'border-box',
        height: '41px'
      }}
      onMouseEnter={(e) => {
        e.currentTarget.style.backgroundColor = '#161b22';
        e.currentTarget.style.textDecoration = 'none';
      }}
      onMouseLeave={(e) => {
        e.currentTarget.style.backgroundColor = '#1a1a1a';
        e.currentTarget.style.textDecoration = 'none';
      }}
    >
      <span style={{ textDecoration: 'none' }}>...</span>
      <span style={{ textDecoration: 'none' }}>See all {totalLines} lines</span>
    </a>
  </div>
  );
};