From cb57aa9381ea8172b8f38493d4d992dd1bd32b50 Mon Sep 17 00:00:00 2001
From: Anthony Volk <anth.volk@gmail.com>
Date: Wed, 5 Nov 2025 19:11:15 +0000
Subject: [PATCH] feat: Add generic iframe component, US SNAP map

---
 app/src/Router.tsx                     | 18 ++++++++++++++++++
 app/src/components/IframeContent.tsx   | 18 ++++++++++++++++++
 app/src/pages/SNAPMap.page.tsx         |  5 +++++
 app/src/routing/guards/USOnlyGuard.tsx | 15 +++++++++++++++
 4 files changed, 56 insertions(+)
 create mode 100644 app/src/components/IframeContent.tsx
 create mode 100644 app/src/pages/SNAPMap.page.tsx
 create mode 100644 app/src/routing/guards/USOnlyGuard.tsx

diff --git a/app/src/Router.tsx b/app/src/Router.tsx
index 11da7181..a7d2f96b 100644
--- a/app/src/Router.tsx
+++ b/app/src/Router.tsx
@@ -15,12 +15,14 @@ import PrivacyPage from './pages/Privacy.page';
 import ReportOutputPage from './pages/ReportOutput.page';
 import ReportsPage from './pages/Reports.page';
 import SimulationsPage from './pages/Simulations.page';
+import SNAPMapPage from './pages/SNAPMap.page';
 import SupportersPage from './pages/Supporters.page';
 import TeamPage from './pages/Team.page';
 import TermsPage from './pages/Terms.page';
 import { CountryGuard } from './routing/guards/CountryGuard';
 import { MetadataGuard } from './routing/guards/MetadataGuard';
 import { MetadataLazyLoader } from './routing/guards/MetadataLazyLoader';
+import { USOnlyGuard } from './routing/guards/USOnlyGuard';
 import { RedirectToCountry } from './routing/RedirectToCountry';
 import { RedirectToLegacy } from './routing/RedirectToLegacy';
 
@@ -31,6 +33,7 @@ const router = createBrowserRouter(
       // Dynamically detect and redirect to user's country
       element: <RedirectToCountry />,
     },
+    // US-specific routes
     {
       path: '/:countryId',
       element: <CountryGuard />,
@@ -150,6 +153,21 @@ const router = createBrowserRouter(
             },
           ],
         },
+        // US-only routes
+        {
+          element: <USOnlyGuard />,
+          children: [
+            {
+              element: <StaticLayout />,
+              children: [
+                {
+                  path: 'snap-map',
+                  element: <SNAPMapPage />,
+                },
+              ],
+            },
+          ],
+        },
         // Legacy routes - redirect to legacy.policyengine.org
         {
           children: [
diff --git a/app/src/components/IframeContent.tsx b/app/src/components/IframeContent.tsx
new file mode 100644
index 00000000..99eed3ad
--- /dev/null
+++ b/app/src/components/IframeContent.tsx
@@ -0,0 +1,18 @@
+interface IframeContentProps {
+  url: string;
+}
+
+export default function IframeContent({ url }: IframeContentProps) {
+  return (
+    <iframe
+      src={url}
+      style={{
+        width: '100%',
+        height: 'calc(100vh - var(--header-height, 58px))',
+        border: 'none',
+        display: 'block',
+      }}
+      title="Embedded content"
+    />
+  );
+}
diff --git a/app/src/pages/SNAPMap.page.tsx b/app/src/pages/SNAPMap.page.tsx
new file mode 100644
index 00000000..30e70148
--- /dev/null
+++ b/app/src/pages/SNAPMap.page.tsx
@@ -0,0 +1,5 @@
+import IframeContent from '@/components/IframeContent';
+
+export default function SNAPMapPage() {
+  return <IframeContent url="https://policyengine.github.io/snap-district-map/" />;
+}
diff --git a/app/src/routing/guards/USOnlyGuard.tsx b/app/src/routing/guards/USOnlyGuard.tsx
new file mode 100644
index 00000000..58372dff
--- /dev/null
+++ b/app/src/routing/guards/USOnlyGuard.tsx
@@ -0,0 +1,15 @@
+import { Navigate, Outlet, useParams } from 'react-router-dom';
+
+/**
+ * Guard component that only allows access for US country routes.
+ * Redirects to root for any other country.
+ */
+export function USOnlyGuard() {
+  const { countryId } = useParams<{ countryId: string }>();
+
+  if (countryId !== 'us') {
+    return <Navigate to="/" replace />;
+  }
+
+  return <Outlet />;
+}