From 61ccc3d0daea75787b7fc890fb2ae7b5f40c78cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20de=20Vasconcelos?= <johnyvasconcelos@icloud.com>
Date: Thu, 7 Dec 2023 14:15:28 +0000
Subject: [PATCH] Tweaks

---
 .../EstimatedArrival/EstimatedArrival.js      | 41 +++++++++++++++++++
 .../EstimatedArrival.module.css               | 17 ++++++++
 .../components/LineDisplay/LineDisplay.js     | 12 +++++-
 .../LineDisplay/LineDisplay.module.css        |  6 +++
 ...sExplorerContentPatternPathStopRealtime.js | 11 +++--
 frontend/package.json                         |  4 +-
 frontend/translations/pt.json                 |  4 ++
 7 files changed, 85 insertions(+), 10 deletions(-)
 create mode 100644 frontend/components/EstimatedArrival/EstimatedArrival.js
 create mode 100644 frontend/components/EstimatedArrival/EstimatedArrival.module.css

diff --git a/frontend/components/EstimatedArrival/EstimatedArrival.js b/frontend/components/EstimatedArrival/EstimatedArrival.js
new file mode 100644
index 00000000..ddb3c4aa
--- /dev/null
+++ b/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>
+  );
+
+  //
+}
diff --git a/frontend/components/EstimatedArrival/EstimatedArrival.module.css b/frontend/components/EstimatedArrival/EstimatedArrival.module.css
new file mode 100644
index 00000000..5762c60f
--- /dev/null
+++ b/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);
+}
diff --git a/frontend/components/LineDisplay/LineDisplay.js b/frontend/components/LineDisplay/LineDisplay.js
index 246ec213..820ffea4 100644
--- a/frontend/components/LineDisplay/LineDisplay.js
+++ b/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 />
diff --git a/frontend/components/LineDisplay/LineDisplay.module.css b/frontend/components/LineDisplay/LineDisplay.module.css
index 6e2a2720..2536a4ea 100644
--- a/frontend/components/LineDisplay/LineDisplay.module.css
+++ b/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;
diff --git a/frontend/components/LinesExplorerContentPatternPathStopRealtime/LinesExplorerContentPatternPathStopRealtime.js b/frontend/components/LinesExplorerContentPatternPathStopRealtime/LinesExplorerContentPatternPathStopRealtime.js
index a0a60d04..b4aeca95 100644
--- a/frontend/components/LinesExplorerContentPatternPathStopRealtime/LinesExplorerContentPatternPathStopRealtime.js
+++ b/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>
       )}
diff --git a/frontend/package.json b/frontend/package.json
index 1dcdbf4b..5390e601 100644
--- a/frontend/package.json
+++ b/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",
diff --git a/frontend/translations/pt.json b/frontend/translations/pt.json
index 8a8753b4..ebb004af 100644
--- a/frontend/translations/pt.json
+++ b/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"