M4

import React, { useState, useEffect } from 'react'; const Header = () => { const [stars, setStars] = useState(3); useEffect(() => { fetch('https://api.github.com/repos/rafiattrach/m4') .then(response => { if (!response.ok) { return; } return response.json(); }) .then(data => { if (data && data.stargazers_count !== undefined) { setStars(data.stargazers_count); } }) .catch(error => { console.error('Error fetching GitHub stars:', error); }); }, []); const scrollToSection = (sectionId) => { const element = document.getElementById(sectionId); if (element) { element.scrollIntoView({ behavior: 'smooth', block: 'start' }); } }; const scrollToTop = () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }; return ( <header> <nav className="container"> <div className="logo"> <button onClick={scrollToTop} style={{ background: 'none', border: 'none', color: '#0052ff', fontSize: '28px', fontWeight: '600', letterSpacing: '-0.5px', fontFamily: "'Courier New', monospace", cursor: 'pointer', textDecoration: 'none', padding: 0 }} > <img src={process.env.PUBLIC_URL + '/m4_logo_transparent.png'} alt="M4" style={{ height: '100px', width: 'auto', marginTop: '15px' }} /> </button> </div> <ul className="nav-links"> <li><button onClick={() => scrollToSection('paper')}>Paper</button></li> <li><button onClick={() => scrollToSection('demos')}>Demos</button></li> <li><button onClick={() => scrollToSection('installation')}>Installation</button></li> </ul> <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}> <a href="https://pypi.org/project/m4-mcp/" target="_blank" rel="noopener noreferrer" style={{ padding: '10px', textDecoration: 'none', color: 'inherit', display: 'flex', alignItems: 'center', gap: '5px', fontWeight: 'bold' }} > <span className="star-count"> <img src="/m4/pypi_logo.svg" alt="PyPI" style={{ height: '20px', verticalAlign: 'middle', marginRight: '8px' }} /> PyPI </span> </a> <a href="https://github.com/rafiattrach/m4" target="_blank" rel="noopener noreferrer" className="btn-github"> <span className="star-count">{stars.toLocaleString()} ⭐</span> Star on GitHub </a> </div> </nav> </header> ); }; export default Header;