Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475import { Row, Col } from "./layout";import { CHIP, COLORS, TYPOGRAPHY } from "./constants";
interface CodePanelProps { lines: string[]; maxLines: number; height: number; fontSize?: number;}
export function CodePanel({ lines, maxLines, height, fontSize = 24,}: CodePanelProps) { const shown = lines.slice(0, maxLines); const gutter = String(shown.length).length;
return ( <div style={{ display: "flex", width: "100%", height, padding: CHIP.border, borderRadius: CHIP.radius + 4, backgroundColor: COLORS.chip.background, backgroundImage: COLORS.chip.stroke, boxShadow: COLORS.chip.shadow, }}> <Col style={{ flexGrow: 1, minWidth: 0, padding: "18px 24px", gap: fontSize * 0.45, borderRadius: CHIP.radius + 2, backgroundColor: COLORS.chip.background, overflow: "hidden", }}> {shown.map((line, i) => ( <Row key={i} style={{ gap: 24, alignItems: "flex-start", overflow: "hidden" }}> <span style={{ ...TYPOGRAPHY.body, fontSize, color: COLORS.textMuted, width: gutter * fontSize * 0.62, justifyContent: "flex-end", display: "flex", }}> {i + 1} </span> <span style={{ ...TYPOGRAPHY.body, fontSize, color: COLORS.text, whiteSpace: "pre", flex: 1, minWidth: 0, overflow: "hidden", }}> {line.length > 0 ? line : " "} </span> </Row> ))} </Col> </div> );}