Add CIP action alert banner (#281)

Author: devinmatte

src/components/ActionBanner.tsx

@@ -0,0 +1,18 @@
+const EXPIRY_DATE = new Date('2026-05-01T00:00:00');
+
+export const ActionBanner: React.FC = () => {
+    if (new Date() >= EXPIRY_DATE) {
+        return null;
+    }
+
+    return (
+        <a
+            className="action-banner"
+            href="https://secure.everyaction.com/DKcTW8SPr06sCMwjIo44UA2"
+            target="_blank"
+            rel="noopener noreferrer"
+        >
+            Help Us Make This Year's CIP Better And Bolder!
+        </a>
+    );
+};

src/components/App.tsx

@@ -7,6 +7,7 @@ import { useMbtaApi } from '../hooks/useMbtaApi';
 import { Line } from './Line';
 import { Header } from './Header';
 import { Footer } from './Footer';
+import { ActionBanner } from './ActionBanner';
 import { LineTabPicker } from './LineTabPicker';
 import { LineStats } from './LineStats/LineStats';
 import { setCssVariable } from './util';
@@ -92,6 +93,7 @@ export const App: React.FC = () => {
     return (
         <>
             <Favicon url={favicon} />
+            <ActionBanner />
             <Header controls={renderControls()} />
             {api.isReady ? (
                 <Line key={selectedLine?.name} line={selectedLine} api={api} age={ageSearchParam} />

src/components/CategoryTabPicker.tsx

@@ -5,12 +5,14 @@ import { useCategorySearchParam } from '../hooks/searchParams';
 
 type TrainCategory = { key: VehicleCategory; label: string };
 
+const isDecember = new Date().getMonth() === 11;
+
 const trainTypes: TrainCategory[] = [
     { key: 'old_vehicles', label: 'Old' },
     { key: 'new_vehicles', label: 'New' },
     { key: 'vehicles', label: 'All' },
     { key: 'pride', label: 'Pride' },
-    { key: 'holiday', label: 'Holiday' },
+    ...(isDecember ? [{ key: 'holiday' as VehicleCategory, label: 'Holiday' }] : []),
 ];
 
 interface CategoryTabPickerProps {

src/main.css

@@ -49,6 +49,30 @@ a {
     flex-direction: column;
 }
 
+.action-banner {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    padding: 8px 16px;
+    background: #f5c518;
+    color: #1a1a1a;
+    font-weight: bold;
+    font-size: 0.9em;
+    text-align: center;
+    text-decoration: none;
+    z-index: 2;
+    width: 100%;
+    box-sizing: border-box;
+    cursor: pointer;
+}
+
+.action-banner:hover {
+    background: #e6b800;
+    color: #1a1a1a;
+}
+
+
 .header {
     padding: 1rem 0;
     z-index: 1;