diff --git a/package.json b/package.json
index 984a857..3c80521 100644
--- a/package.json
+++ b/package.json
@@ -35,6 +35,7 @@
"font-awesome": "^4.7.0",
"immutable": "^3.8.2",
"lodash": "^4.17.5",
+ "mapbox-gl": "^0.49.0",
"node-sass": "^4.7.2",
"nodemon": "^1.15.1",
"normalize.css": "^8.0.0",
diff --git a/public/images/facebook_logo.png b/public/images/facebook_logo.png
new file mode 100644
index 0000000..50112d3
Binary files /dev/null and b/public/images/facebook_logo.png differ
diff --git a/public/images/twitter_logo.png b/public/images/twitter_logo.png
new file mode 100755
index 0000000..25ba09f
Binary files /dev/null and b/public/images/twitter_logo.png differ
diff --git a/public/images/youtube_logo.png b/public/images/youtube_logo.png
new file mode 100755
index 0000000..fd67262
Binary files /dev/null and b/public/images/youtube_logo.png differ
diff --git a/src/index.scss b/src/index.scss
index f72cffc..74e7fcf 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -16,6 +16,7 @@
@import './defaults/button';
@import './shared/ActionButton/_styles';
@import './shared/Header/_styles';
+@import './shared/components/DistrictInfo/_styles';
// Pages
@import './views/HomePage/_styles';
diff --git a/src/shared/components/DistrictInfo/DistrictInfo.js b/src/shared/components/DistrictInfo/DistrictInfo.js
new file mode 100644
index 0000000..2755cf3
--- /dev/null
+++ b/src/shared/components/DistrictInfo/DistrictInfo.js
@@ -0,0 +1,105 @@
+import React, {PureComponent} from 'react';
+
+export default class DistrictInfo extends PureComponent {
+
+
+ renderFacilityStats(facilityStats) {
+ return (
+
+
Whistles by Facility Type
+
Hospitals: {facilityStats.hospital}
+
Extended Care Facilities: {facilityStats.extended_care}
+
Long-term Care Facilities: {facilityStats.long_term_care}
+
+
Whistles by Reporter Type
+
RN: {typeStats.rn}
+
LPN: {typeStats.lpn}
+
CNA: {typeStats.cna}
+
Other: {typeStats.other}
+
No recorded whistles.
;
+
+ if (typeof stats === "string") {
+ stats = JSON.parse(stats);
+ }
+ if (!stats.facility_type || !stats.type) return null;
+
+ return (
+
+
{stats.type.total} Whistle{stats.type.total > 1 && "s"}
+ { stats.facility_type && this.renderFacilityStats(stats.facility_type) }
+ { stats.type && this.renderTypeStats(stats.type) }
+
+ }
+
+ renderYouTube(social) {
+ const link = `https://www.youtube.com/user/${social.id}`;
+ return 
+ }
+
+ renderTwitter(social) {
+ const link = `https://twitter.com/${social.id}`;
+ return 
+ }
+
+ renderSocialBlock(social) {
+ if (!social) return;
+
+ if (typeof social === "string") {
+ social = JSON.parse(social);
+ }
+ return (
+
+ { social.map(s => {
+ if (s.type === 'Facebook') return this.renderFacebook(s);
+ else if (s.type === 'YouTube') return this.renderYouTube(s);
+ else if (s.type === 'Twitter') return this.renderTwitter(s);
+ else return null;
+ })}
+
+ )
+ }
+
+ renderStateDistrictHeader(state, district) {
+ if (district === '00') return {state} - At Large
+ else return {state} - {district}
+ }
+
+ render() {
+ const {info} = this.props;
+ const properties = info.properties;
+ console.log(properties)
+
+ return (
+
+
+ { this.renderStateDistrictHeader(properties.stateAbbr, properties.NAME) }
+ { properties.url &&
+
Representative: {properties.rep}
+ }
+ { !properties.url &&
+
Representative: {properties.rep}
+ }
+
+ { this.renderStatsBlock(properties.stats) }
+ { this.renderSocialBlock(properties.social) }
+