add what matches

src/templates/_city.elements.js

@@ -71,3 +71,11 @@ export const GoBack = styled(Link)`
   position: absolute;
   bottom: 20px;
 `
+
+export const CityName = styled.address`
+  display: block;
+  font-size: 16px;
+  color: white;
+  text-decoration: none;
+  text-align: center;
+`

src/templates/city.js

@@ -8,7 +8,8 @@ import {
   Flex,
   Company,
   GoBack,
-  Message
+  Message,
+  CityName
 } from './_city.elements'
 import edgeCases from '../utils/edgeCases'
 import ReactCountryFlag from 'react-country-flag'
@@ -42,10 +43,11 @@ const City = ({ pageContext: { city } }) => {
                   YES{' '}
                   <span role="img" aria-label="car">
                     🚗
-                  </span>{' '}
-                  {city.info.countr ? (
+                  </span>
+                  {city.info.country ? (
                     <ReactCountryFlag code={city.info.country.short_name} />
                   ) : null}
+                  <CityName>Matches {city.info.formatted_address}</CityName>{' '}
                 </Title>
               </a>
               <Message>{edgeCases(city)}</Message>