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>
)
}
|