+ {images.map((img) => (
+
+ ))}
+
+ {process.env.REACT_APP_FAMILY_COUNT} families have sent free
+ letters to their loved ones using Ameelio.{" "}
+
+ Learn More
+
+
+
+ );
+};
+
+export default Facepile;
diff --git a/src/components/app/pages/FacilityGuide.tsx b/src/components/app/pages/FacilityGuide.tsx
new file mode 100644
index 00000000..fcb2ee16
--- /dev/null
+++ b/src/components/app/pages/FacilityGuide.tsx
@@ -0,0 +1,80 @@
+import React, { FunctionComponent, useEffect, useState } from "react";
+import { RouteComponentProps } from "react-router-dom";
+// import "./FacilityGuide.css";
+import { getGuideData } from "../../../utils/utils";
+import Spinner from "react-bootstrap/Spinner";
+import Facepile from "../facepile/Facepile";
+import SummaryCard from "../cards/SummaryCard";
+import AuthorCard from "../cards/AuthorCard";
+
+export interface FacilityItem {
+ state: string;
+ facility: string;
+ description: string;
+ address: string;
+ telephone: string;
+ mailing: string;
+ route: string;
+}
+
+const FacilityGuide = ({
+ location,
+}: RouteComponentProps<{}, any, FacilityItem | any>) => {
+ const [facility, setFacility] = useState(
+ location.state ? location.state.data : null
+ );
+ const [route, _] = useState(location.pathname.split("/")[2]);
+
+ useEffect(() => {
+ async function fetchData() {
+ const data = await getGuideData(route, "facility");
+
+ setFacility(data.length > 0 ? data[0] : null);
+ }
+ if (!facility) {
+ fetchData();
+ }
+ }, [facility, route]);
+
+ // For this use case, dangerouslySetInnerHTML seems safe given that we are the only with edit access to the markup being passed down
+ // The flag is primarily to alert users of the vulnearbility to XSS scripting
+ // Source: https://stackoverflow.com/questions/46832912/is-dangerouslysetinnerhtml-the-only-way-to-render-html-from-an-api-in-react
+ return (
+