Tweaks

frontend/components/EstimatedArrival/EstimatedArrival.js

@@ -0,0 +1,41 @@
+'use client';
+
+/* * */
+
+import { useTranslations } from 'next-intl';
+import styles from './EstimatedArrival.module.css';
+import LiveIcon from '@/components/LiveIcon/LiveIcon';
+
+/* * */
+
+export default function EstimatedArrival({ estimatedArrivalInMinutes, showLiveIcon = true }) {
+  //
+
+  //
+  // A. Setup variables
+
+  const t = useTranslations('EstimatedArrival');
+
+  //
+  // B. Render components
+
+  if (typeof estimatedArrivalInMinutes !== 'number') return;
+
+  if (estimatedArrivalInMinutes <= 1) {
+    return (
+      <div className={styles.container}>
+        {showLiveIcon && <LiveIcon />}
+        <p className={styles.estimatedArrival}>{t('arriving_now')}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.container}>
+      {showLiveIcon && <LiveIcon />}
+      <p className={styles.estimatedArrival}>{t('arriving_soon', { value: estimatedArrivalInMinutes })}</p>
+    </div>
+  );
+
+  //
+}

frontend/components/EstimatedArrival/EstimatedArrival.module.css

@@ -0,0 +1,17 @@
+/* * */
+/* CONTAINER */
+
+.container {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+
+/* * */
+/* ESTIMATED ARRIVAL */
+
+.estimatedArrival {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--realtime-100);
+}

frontend/components/LineDisplay/LineDisplay.js

@@ -1,18 +1,26 @@
+/* * */
+
 import Loader from '../Loader/Loader';
 import styles from './LineDisplay.module.css';
 
-export function LineBadge({ short_name, color, text_color }) {
+/* * */
+
+export function LineBadge({ short_name, color, text_color, size = 'md' }) {
   return (
-    <div className={styles.badge} style={{ backgroundColor: color, color: text_color }}>
+    <div className={`${styles.badge} ${styles[size]}`} style={{ backgroundColor: color, color: text_color }}>
       {short_name || '• • •'}
     </div>
   );
 }
 
+/* * */
+
 export function LineName({ long_name }) {
   return <div className={styles.name}>{long_name || '• • •'}</div>;
 }
 
+/* * */
+
 export default function LineDisplay({ short_name, long_name, color = '#000000', text_color = '#ffffff' }) {
   return !short_name || !long_name ? (
     <Loader size={20} visible />

frontend/components/LineDisplay/LineDisplay.module.css

@@ -1,3 +1,6 @@
+/* * */
+/* BADGE */
+
 .badge {
   display: flex;
   align-items: center;
@@ -23,6 +26,9 @@
   max-height: 34px;
 }
 
+/* * */
+/* NAME */
+
 .name {
   display: flex;
   align-items: center;

frontend/components/LinesExplorerContentPatternPathStopRealtime/LinesExplorerContentPatternPathStopRealtime.js

@@ -4,11 +4,12 @@
 
 import useSWR from 'swr';
 import { useMemo } from 'react';
+import { DateTime } from 'luxon';
 import { useTranslations } from 'next-intl';
-import styles from './LinesExplorerContentPatternPathStopRealtime.module.css';
-import LiveIcon from '@/components/LiveIcon/LiveIcon';
 import { IconClock } from '@tabler/icons-react';
-import { DateTime } from 'luxon';
+import LiveIcon from '@/components/LiveIcon/LiveIcon';
+import EstimatedArrival from '@/components/EstimatedArrival/EstimatedArrival';
+import styles from './LinesExplorerContentPatternPathStopRealtime.module.css';
 
 /* * */
 
@@ -101,9 +102,7 @@ export default function LinesExplorerContentPatternPathStopRealtime({ patternId,
         <div className={styles.row}>
           <LiveIcon />
           {nextEstimatedArrivals.map((item, index) => (
-            <p key={index} className={styles.estimatedArrival}>
-              {t('estimated_arrival', { value: item })}
-            </p>
+            <EstimatedArrival key={index} estimatedArrivalInMinutes={item} showLiveIcon={false} />
           ))}
         </div>
       )}

frontend/package.json

@@ -23,7 +23,7 @@
         "luxon": "3.4.4",
         "maplibre-gl": "3.6.2",
         "next": "14.0.3",
-        "next-intl": "3.3.0",
+        "next-intl": "3.3.1",
         "react": "18.2.0",
         "react-dom": "18.2.0",
         "react-map-gl": "7.1.6",
@@ -32,7 +32,7 @@
         "ua-parser-js": "1.0.37"
     },
     "devDependencies": {
-        "@types/node": "20.10.3",
+        "@types/node": "20.10.4",
         "@types/react": "18.2.42",
         "@types/react-dom": "18.2.17",
         "eslint": "8.55.0",

frontend/translations/pt.json

@@ -412,6 +412,10 @@
         "estimated_arrival": "{value} min",
         "scheduled_arrival": "{value}"
     },
+    "EstimatedArrival": {
+        "arriving_now": "A chegar",
+        "arriving_soon": "{value} min"
+    },
     "LinesExplorerContentPatternPathStopTimetable": {
         "hours": {
             "label": "Hour"