Adding a pokie/schleppie banner

common/components/notices/PokeySchleppieAwardBanner.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faTrophy } from '@fortawesome/free-solid-svg-icons';
+import type { BusRoute } from '../../types/lines';
+
+const WINNERS: { [key in number]: { pokey: BusRoute; schleppie: BusRoute } } = {
+  2024: {
+    pokey: '1',
+    schleppie: '1',
+  },
+};
+
+interface PokeySchleppieAwardBannerProps {
+  busRoute: BusRoute | undefined;
+}
+
+export const PokeySchleppieAwardBanner: React.FunctionComponent<PokeySchleppieAwardBannerProps> = ({
+  busRoute,
+}) => {
+  const years = Object.keys(WINNERS);
+
+  if (!busRoute) {
+    return null;
+  }
+
+  return years.map((year) => {
+    const pokey = WINNERS[year].pokey === busRoute;
+    const schleppie = WINNERS[year].schleppie === busRoute;
+
+    if (!pokey && !schleppie) {
+      return null;
+    }
+
+    return (
+      <div
+        key={year}
+        className="flex items-center overflow-hidden rounded bg-gradient-to-r from-[#f5B400] to-[#fcefcb] px-6 py-2.5"
+      >
+        <div className="flex w-full gap-x-4 gap-y-2">
+          <FontAwesomeIcon
+            icon={faTrophy}
+            size={'2x'}
+            className="text-white shadow-gray-500 text-shadow"
+          />
+          <div className="flex w-full items-center justify-between">
+            <p className="text-md w-full leading-6 text-white shadow-gray-500 text-shadow">
+              "Winner" of the {year}{' '}
+              {pokey && schleppie
+                ? 'Pokey and Schleppie'
+                : pokey
+                  ? 'Pokey'
+                  : schleppie
+                    ? 'Schleppie'
+                    : null}{' '}
+              Award{pokey && schleppie ? 's' : ''}!
+            </p>
+            <a
+              href="https://drive.google.com/file/d/1QFTVg0N3-uQeVoMqlOE6QLPqcoCtifzp/view"
+              target="_blank"
+              className="flex-none rounded-full bg-gray-900 px-3.5 py-1 text-sm font-semibold text-white shadow-sm hover:bg-gray-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
+              rel="noreferrer"
+            >
+              Read more <span aria-hidden="true">&rarr;</span>
+            </a>
+          </div>
+        </div>
+      </div>
+    );
+  });
+};

modules/tripexplorer/TripExplorer.tsx

@@ -12,6 +12,7 @@ import { getParentStationForStopId } from '../../common/utils/stations';
 import { BusDataNotice } from '../../common/components/notices/BusDataNotice';
 import { GobbleDataNotice } from '../../common/components/notices/GobbleDataNotice';
 import { BetaDataNotice } from '../../common/components/notices/BetaDataNotice';
+import { PokeySchleppieAwardBanner } from '../../common/components/notices/PokeySchleppieAwardBanner';
 import { useAlertStore } from './AlertStore';
 import { TripGraphs } from './TripGraphs';
 
@@ -40,6 +41,7 @@ export const TripExplorer = () => {
       <ChartPageDiv>
         <BetaDataNotice />
         {alertsForModal?.length ? <AlertNotice /> : null}
+        <PokeySchleppieAwardBanner busRoute={busRoute} />
         <TripGraphs fromStation={fromStation} toStation={toStation} />
         <div>
           <GobbleDataNotice />

tailwind.config.js

@@ -1,3 +1,5 @@
+const plugin = require('tailwindcss/plugin');
+
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
@@ -41,6 +43,11 @@ module.exports = {
         illuminate: '0px 0px 2px rgba(255,255,255,0.5);',
         shadowUp: '0px -2px 2px rgba(0, 0, 0, 0.25);',
       },
+      textShadow: {
+        sm: '0 1px 2px var(--tw-shadow-color)',
+        DEFAULT: '0 2px 4px var(--tw-shadow-color)',
+        lg: '0 8px 16px var(--tw-shadow-color)',
+      },
       colors: {
         design: {
           darkGrey: '#353535',
@@ -83,5 +90,18 @@ module.exports = {
       },
     },
   },
-  plugins: [require('@tailwindcss/forms'), require('flowbite/plugin')],
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('flowbite/plugin'),
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'text-shadow': (value) => ({
+            textShadow: value,
+          }),
+        },
+        { values: theme('textShadow') }
+      );
+    }),
+  ],
 };