Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import * as React from "react" import { Head } from "./Head" import { SiteHeader } from "./SiteHeader" import { SiteFooter } from "./SiteFooter" import urljoin from "url-join" export interface CountryProfileIndicator { name: string slug: string year: number variantName?: string } export interface Stat { value: number year: number } export interface CountryProfileKeyStats { population: Stat } export interface CountryProfilePageProps { country: { name: string slug: string code: string } indicators: CountryProfileIndicator[] baseUrl: string } export const CountryProfilePage = (props: CountryProfilePageProps) => { const { country, indicators, baseUrl } = props // const displayName = defaultTo(variable.display.name, variable.name) const script = `window.runCountryProfilePage()` return ( <html> <Head canonicalUrl={`${baseUrl}/country/${country.slug}`} pageTitle={`${country.name}`} pageDesc={`Population, GDP, life expectancy, birth rate and other key metrics for ${country.name}.`} baseUrl={baseUrl} /> <body className="CountryProfilePage"> <SiteHeader baseUrl={baseUrl} /> <main> <header> <img className="flag" src={`/images/flags/${country.code}.svg`} /> <h1>{country.name}</h1> </header> {/* <ul className="keyStats"> <li> <span>Population, persons:</span> {keyStats.population.value} ({keyStats.population.year}) </li> </ul> */} <p> Below are all indicators in our database for which this country has a value. </p> <div> <input type="search" className="chartsSearchInput" placeholder={`Filter ${indicators.length} indicators for ${country.name}`} /> </div> <section> <ul className="indicators"> {indicators.map((indicator) => ( <li key={indicator.slug}> <div className="indicatorName"> <a href={urljoin( baseUrl, indicator.slug )} > {indicator.name} {indicator.variantName ? " (" + indicator.variantName + ")" : ""} </a> </div> <div className="indicatorValue"> ({indicator.year}) </div> </li> ))} </ul> </section> </main> <SiteFooter baseUrl={baseUrl} /> <script dangerouslySetInnerHTML={{ __html: script }} /> </body> </html> ) } |