Improve the UI

3 files changed, 231 insertions, 0 deletions

diff --git a/src/components/LineIcon.css b/src/components/LineIcon.css
new file mode 100644
index 0000000..8c9f7ee
--- /dev/null
+++ b/src/components/LineIcon.css
@@ -0,0 +1,191 @@
+.line-icon {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    margin-right: 0.5rem;
+    border-bottom: 3px solid;
+    font-size: 0.9rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    color: inherit;
+    /* Prevent color change on hover */
+}
+
+.line-c1 {
+    border-color: rgb(237, 71, 19);
+}
+
+.line-c3d {
+    border-color: rgb(255, 204, 0);
+}
+
+.line-c3i {
+    border-color: rgb(255, 204, 0);
+}
+
+.line-l4a {
+    border-color: rgb(0, 153, 0);
+}
+
+.line-l4c {
+    border-color: rgb(0, 153, 0);
+}
+
+.line-l5a {
+    border-color: rgb(0, 176, 240);
+}
+
+.line-l5b {
+    border-color: rgb(0, 176, 240);
+}
+
+.line-l6 {
+    border-color: rgb(204, 51, 153);
+}
+
+.line-l7 {
+    border-color: rgb(150, 220, 153);
+}
+
+.line-l9b {
+    border-color: rgb(244, 202, 140);
+}
+
+.line-l10 {
+    border-color: rgb(153, 51, 0);
+}
+
+.line-l11 {
+    border-color: rgb(226, 0, 38);
+}
+
+.line-l12a {
+    border-color: rgb(106, 150, 190);
+}
+
+.line-l12b {
+    border-color: rgb(106, 150, 190);
+}
+
+.line-l13 {
+    border-color: rgb(0, 176, 240);
+}
+
+.line-l14 {
+    border-color: rgb(129, 142, 126);
+}
+
+.line-l15a {
+    border-color: rgb(216, 168, 206);
+}
+
+.line-l15b {
+    border-color: rgb(216, 168, 206);
+}
+
+.line-l15c {
+    border-color: rgb(216, 168, 168);
+}
+
+.line-l16 {
+    border-color: rgb(129, 142, 126);
+}
+
+.line-l17 {
+    border-color: rgb(214, 245, 31);
+}
+
+.line-l18a {
+    border-color: rgb(212, 80, 168);
+}
+
+.line-l18b {
+    border-color: rgb(0, 0, 0);
+}
+
+.line-l18h {
+    border-color: rgb(0, 0, 0);
+}
+
+.line-l23 {
+    border-color: rgb(0, 70, 210);
+}
+
+.line-l24 {
+    border-color: rgb(191, 191, 191);
+}
+
+.line-l25 {
+    border-color: rgb(172, 100, 4);
+}
+
+.line-l27 {
+    border-color: rgb(112, 74, 42);
+}
+
+.line-l28 {
+    border-color: rgb(176, 189, 254);
+}
+
+.line-l29 {
+    border-color: rgb(248, 184, 90);
+}
+
+.line-l31 {
+    border-color: rgb(255, 255, 0);
+}
+
+.line-a {
+    border-color: rgb(119, 41, 143);
+}
+
+.line-h {
+    border-color: rgb(0, 96, 168);
+}
+
+.line-h1 {
+    border-color: rgb(0, 96, 168);
+}
+
+.line-h2 {
+    border-color: rgb(0, 96, 168);
+}
+
+.line-h3 {
+    border-color: rgb(0, 96, 168);
+}
+
+.line-lzd {
+    border-color: rgb(61, 78, 167);
+}
+
+.line-n1 {
+    border-color: rgb(191, 191, 191);
+}
+
+.line-n4 {
+    border-color: rgb(102, 51, 102);
+}
+
+.line-psa1 {
+    border-color: rgb(0, 153, 0);
+}
+
+.line-psa4 {
+    border-color: rgb(0, 153, 0);
+}
+
+.line-ptl {
+    border-color: rgb(150, 220, 153);
+}
+
+.line-turistico {
+    border-color: rgb(102, 51, 102);
+}
+
+.line-u1 {
+    border-color: rgb(172, 100, 4);
+}
+
+.line-u2 {
+    border-color: rgb(172, 100, 4);
+}
\ No newline at end of file
diff --git a/src/components/LineIcon.tsx b/src/components/LineIcon.tsx
new file mode 100644
index 0000000..50fd1ec
--- /dev/null
+++ b/src/components/LineIcon.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import './LineIcon.css';
+
+interface LineIconProps {
+  line: string;
+}
+
+const LineIcon: React.FC<LineIconProps> = ({ line }) => {
+  const formattedLine = /^[a-zA-Z]/.test(line) ? line : `L${line}`;
+  return (
+    <span className={`line-icon line-${formattedLine.toLowerCase()}`}>
+      {formattedLine}
+    </span>
+  );
+};
+
+export default LineIcon;
\ No newline at end of file
diff --git a/src/components/StopItem.tsx b/src/components/StopItem.tsx
new file mode 100644
index 0000000..6b48899
--- /dev/null
+++ b/src/components/StopItem.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Link } from 'react-router';
+import { Stop } from '../data/StopDataProvider';
+import LineIcon from './LineIcon';
+
+interface StopItemProps {
+  stop: Stop;
+}
+
+const StopItem: React.FC<StopItemProps> = ({ stop }) => {
+  return (
+    <li className="list-item">
+      <Link className="list-item-link" to={`/estimates/${stop.stopId}`}>
+        ({stop.stopId}) {stop.name}
+        <div className="line-icons">
+          {stop.lines?.map(line => <LineIcon key={line} line={line} />)}
+        </div>
+      </Link>
+    </li>
+  );
+};
+
+export default StopItem;
\ No newline at end of file