diff --git a/common/components/notices/PokeySchleppieAwardBanner.tsx b/common/components/notices/PokeySchleppieAwardBanner.tsx new file mode 100644 index 00000000..257722b0 --- /dev/null +++ b/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 = ({ + 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 ( +
+
+ +
+

+ "Winner" of the {year}{' '} + {pokey && schleppie + ? 'Pokey and Schleppie' + : pokey + ? 'Pokey' + : schleppie + ? 'Schleppie' + : null}{' '} + Award{pokey && schleppie ? 's' : ''}! +

+ + Read more + +
+
+
+ ); + }); +}; diff --git a/modules/tripexplorer/TripExplorer.tsx b/modules/tripexplorer/TripExplorer.tsx index 98022af8..e5c0071b 100644 --- a/modules/tripexplorer/TripExplorer.tsx +++ b/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 = () => { {alertsForModal?.length ? : null} +
diff --git a/tailwind.config.js b/tailwind.config.js index d3e0d059..3c161986 100644 --- a/tailwind.config.js +++ b/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') } + ); + }), + ], };