Show alerts horizontal on wider screens

transitnownash · Apr 28, 2024 · 6ac4f0d · 6ac4f0d
1 parent fb7e831
commit 6ac4f0d
Show file tree

Hide file tree

Showing 5 changed files with 556 additions and 512 deletions.
diff --git a/src/components/AlertList.js b/src/components/AlertList.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import AlertItem from './AlertItem';
 import dayjs from 'dayjs';
 
-function AlertList({ alerts, routes }) {
+function AlertList({ alerts, routes, showHorizontal }) {
   const [hideFuture, setHideFuture] = useState(false);
 
   const handleHideFutureAlertsOnChange = (event) => {
@@ -42,23 +42,31 @@ function AlertList({ alerts, routes }) {
       {alerts.length === 0 && (
         <div className='alert alert-info'>No active alerts.</div>
       )}
-      {alerts.map((item, _index) => {
-        const route = routes.find((r) => r.route_gid === item.alert.informed_entity[0].route_id || r.route_short_name === item.alert.informed_entity[0].route_id);
-        return (
-          <AlertItem key={item.id} alert={item.alert} route={route}></AlertItem>
-        );
-      })}
+      <div className="row">
+        {alerts.map((item, _index) => {
+          const columnWrapperClass = showHorizontal ? `col-md-6 col-xl-4` : `col-12`;
+          const route = routes.find((r) => r.route_gid === item.alert.informed_entity[0].route_id || r.route_short_name === item.alert.informed_entity[0].route_id);
+          return (
+            <div key={item.id} className={columnWrapperClass}>
+              <AlertItem alert={item.alert} route={route}></AlertItem>
+            </div>
+          );
+        })}
+      </div>
     </div>
   );
 }
 
 AlertList.propTypes = {
   alerts: PropTypes.array.isRequired,
   routes: PropTypes.array,
+  showHorizontal: PropTypes.bool
 };
 
 AlertList.defaultProps = {
+  alerts: [],
   routes: [],
+  showHorizontal: false,
 };
 
 export default AlertList;