{segment.slice(1, -1)};
}
return segment;
});
};
const renderInlineMarkup = (value, keyPrefix = 'subtitle') => {
if (typeof value !== 'string') {
return value;
}
return value.split(/(\*\*[\s\S]+?\*\*)/g).map((segment, index) => {
if (segment.startsWith('**') && segment.endsWith('**')) {
const inner = segment.slice(2, -2);
return
{renderInlineCode(inner, `${keyPrefix}-strong-${index}`)}
;
}
return renderInlineCode(segment, `${keyPrefix}-${index}`);
});
};
const renderContent = (value, keyPrefix) => {
if (Array.isArray(value)) {
return value.map((item, index) => renderContent(item, `${keyPrefix}-${index}`));
}
return renderInlineMarkup(value, keyPrefix);
};
const variants = {
default: {
fontSize: '1rem',
fontStyle: 'italic',
color: 'var(--lp-color-accent)',
marginBottom: 0
},
changelog: {
fontSize: '0.8rem',
fontStyle: 'normal',
fontWeight: 700,
color: 'var(--lp-color-text-primary)',
marginBottom: 0
}
};
const base = variants[variant] || variants.default;
return
{renderContent(text, 'text')}
{renderContent(children, 'children')}
;
};
export const LazyLoad = ({children, height = "200px", offset = "200px", fadeDuration = 400, className = "", style = {}, ...rest}) => {
const ref = useRef(null);
const [visible, setVisible] = useState(false);
const [ready, setReady] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setVisible(true);
observer.disconnect();
}
}, {
rootMargin: offset
});
observer.observe(el);
return () => observer.disconnect();
}, []);
useEffect(() => {
if (!visible) return;
const frameId = requestAnimationFrame(() => {
setReady(true);
});
return () => cancelAnimationFrame(frameId);
}, [visible]);
const placeholder = ;
if (!visible) return placeholder;
return