src/shared/ui/CodeBlock.tsx - main - ikratkiy/Hyperliquid

src/shared/ui/CodeBlock.tsx
116 строк3 KB
ikratkiy
feat(scenario): orchestrate the guarded mainnet BTC to USDC flow
14 июл 2026, 19:14
14 июл 2026, 19:14b9a15aa
import type { ReactNode } from "react";
import styled from "styled-components";

import { codeBlockBodyMaxHeightPx } from "./codeBlockStyle";

const Wrap = styled.div`
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-radius: 18px;
  background: var(--bg-code);
`;

const Header = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  color: var(--ink-soft);
  background: var(--bg-code-head);
  border-bottom: 1px solid var(--line-soft);
  font-family: var(--font-mono);
  font-size: 0.78rem;
`;

const Pre = styled.pre`
  margin: 0;
  max-height: ${codeBlockBodyMaxHeightPx}px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  line-height: 1.58;
`;

const Keyword = styled.span`
  color: var(--accent-strong);
`;

const StringToken = styled.span`
  color: var(--success);
`;

const Comment = styled.span`
  color: var(--ink-muted);
`;

const NumberToken = styled.span`
  color: var(--warning);
`;

const FunctionToken = styled.span`
  color: var(--accent);
`;

function highlightLine(line: string, lineIndex: number) {
  const tokenPattern =
    /(\/\/.*$)|("(?:[^"\\]|\\.)*")|('(?:[^'\\]|\\.)*')|(`(?:[^`\\]|\\.)*`)|(\b(?:const|let|await|return|if|for|of|in|true|false|null|undefined|async|function)\b)|(\b\d+(?:_\d+)*(?:n)?\b)|(\b[A-Za-z_]\w*(?=\())/g;
  const nodes: ReactNode[] = [];
  let cursor = 0;
  let match: RegExpExecArray | null;

  while ((match = tokenPattern.exec(line))) {
    if (match.index > cursor) {
      nodes.push(line.slice(cursor, match.index));
    }

    const value = match[0];
    const key = `${lineIndex}-${match.index}-${value}`;

    if (match[1]) {
      nodes.push(<Comment key={key}>{value}</Comment>);
    } else if (match[2] || match[3] || match[4]) {
      nodes.push(<StringToken key={key}>{value}</StringToken>);
    } else if (match[5]) {
      nodes.push(<Keyword key={key}>{value}</Keyword>);
    } else if (match[6]) {
      nodes.push(<NumberToken key={key}>{value}</NumberToken>);
    } else {
      nodes.push(<FunctionToken key={key}>{value}</FunctionToken>);
    }

    cursor = match.index + value.length;
  }

  if (cursor < line.length) {
    nodes.push(line.slice(cursor));
  }

  return nodes;
}

export function CodeBlock({ code, label = "json" }: { code: string; label?: string }) {
  const lines = code.split("\n");

  return (
    <Wrap>
      <Header>
        <span>{label}</span>
        <span>JSON</span>
      </Header>
      <Pre>
        <code>
          {lines.map((line, index) => (
            <span key={index}>
              {highlightLine(line, index)}
              {index < lines.length - 1 ? "\n" : null}
            </span>
          ))}
        </code>
      </Pre>
    </Wrap>
  );
}