importReactfrom"https://esm.sh/react@17.0.2";importReactDOMfrom"https://esm.sh/react-dom@17.0.2";import{BrowserRouterasRouter,Link,Route,Switch,}from"https://esm.sh/react-router-dom@5.2.0";importstyled,{
createGlobalStyle,}from"https://esm.sh/styled-components@5.3.0";import{ css }from"https://esm.sh/@emotion/css@11.1.3";constGlobalStyle= createGlobalStyle`body{margin:0;}`;functionApp(){return(<Router><GlobalStyle/><div><Nav><List><li><Link to="/">Home</Link></li><li><Link to="/about">About</Link></li><li><Link to="/users">Users</Link></li></List></Nav>{/* A <Switch> looks through its children <Route>s and
renders the first one that matches the current URL. */}<Switch><Route path="/about"><About/></Route><Route path="/users"><Users/></Route><Route path="/"><Home/></Route></Switch></div></Router>);}constList= styled.ul`display: flex;padding-inline-start:0;li{list-style-type: none;margin-right:8px;}`;constNav= styled.nav`width:100%;padding:15px;border-bottom-width:1px;border-bottom-style: solid;border-bottom-color:#eee;`;constMain= styled.main`padding:15px;`;functionHome(){return(<Main><Heading>Home</Heading><p className={textStyle}>This text is styled by{" "}<a href="https://www.npmjs.com/package/@emotion/css/v/11.1.3">
@emotion/css@11.1.3</a></p><p className={textStyle}>The heading is styled by{" "}<a href="https://www.npmjs.com/package/styled-components/v/5.3.0">
styled-components@5.3.0</a></p></Main>);}functionAbout(){return(<Main><Heading>About</Heading><p className={textStyle}>This text is styled by{" "}<a href="https://www.npmjs.com/package/@emotion/css/v/11.1.3">
@emotion/css@11.1.3</a></p><p className={textStyle}>The heading is styled by{" "}<a href="https://www.npmjs.com/package/styled-components/v/5.3.0">
styled-components@5.3.0</a></p></Main>);}functionUsers(){return(<Main><Heading>Users</Heading><p className={textStyle}>This text is styled by{" "}<a href="https://www.npmjs.com/package/@emotion/css/v/11.1.3">
@emotion/css@11.1.3</a></p><p className={textStyle}>The heading is styled by{" "}<a href="https://www.npmjs.com/package/styled-components/v/5.3.0">
styled-components@5.3.0</a></p></Main>);}constHeading= styled.h2`font-size:24px;font-weight:900;color:#500;`;const textStyle = css`font-size:12px;color:#050;`;functionmain(){ReactDOM.render(<App/>,document.querySelector("#main"));}addEventListener("DOMContentLoaded",()=>{main();});