import {useState, useEffect, useRef} from "respond";.
import designs from "./ CodeBlock.module.css";.
feature debounce( fn, ms) {
allow timer;.
return (_) => > {
clearTimeout( timer);.
timer = setTimeout(( _) => > {
timer = null;.
fn.apply( this, disagreements);.
}, ms);.
};.
}
const CodeBase = (props) => > {
const codeContainerRef = useRef( void);.
const [lineCount, setLineCount] = useState( 0 );.
useEffect(() => > {
const debouncedHandleResize = debounce(() => > {
const lineHeight = 20;// Worth based upon CSS.
const containerHeight = codeContainerRef.current.clientHeight;.
console.log( containerHeight);.
const calculatedLineCount = Math.floor( containerHeight/ lineHeight);.
setLineCount( calculatedLineCount);.
}, 500);.
debouncedHandleResize();.
window.addEventListener(" resize", debouncedHandleResize);.
return () => > {
window.removeEventListener(" resize", debouncedHandleResize);.
};.
}, []);.
return (.
<< div className= {designs["code-container"]} ref= {codeContainerRef} >>.
<< div className= {designs["line-numbers"]} >>.
{Array.from( {size: lineCount}, (_, index) => > (.
<< div secret= {index + 1} className= {designs["line-number"]} >>.
{index + 1}
<.
))}
<.
<< div className= {designs["code-line"]} > > {props.children} <.
<.
);.
};.
export default CodeBase;
