Create route icons and components to place these icons.

2026-02-05 01:52:18 +00:00
parent d38afeb922
commit e977d01315
15 changed files with 683 additions and 86 deletions
--- a/src/lib/components/RouteRow.svelte
+++ b/src/lib/components/RouteRow.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { components } from '$lib/mapRegistry';
+
+    export let feature: any; // Raw Object
+    export let activeElec: string; // Active Electrification Type
+    export let reversed: boolean = false;
+
+    $: Icon = components[feature.type] || components.default;
+</script>
+
+<div class="row-container">
+    <div class="mileage-col">
+        <span class="miles">{feature.miles + "m" || "" }</span>
+        <span class="chains">{feature.chains + "ch" || "" }</span>
+    </div>
+
+    <div class="icon-col">
+        <svelte:component
+          this={Icon}
+          {feature}
+          {activeElec}
+          {reversed}
+        />
+    </div>
+
+    <div class="label-col">
+        {#if feature.name}
+          <div class="feature-name">{feature.name}</div>
+        {/if}
+        {#if feature.description}
+          <div class="feature-desc">{feature.description}</div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .row-container {
+        display: grid;
+        grid-template-columns: 80px 64px 1fr;
+        height: 64px;
+        align-items: center;
+        margin: 0;
+        padding: 0;
+    }
+
+    .mileage-col {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        padding-right: 12px;
+        font-family: 'Courier New', Courier, monospace;
+        font-size: 0.85rem;
+        color: #54748b;
+    }
+
+    .miles {
+        font-weight: bold;
+        line-height: 1;
+    }
+
+    .chains {
+        font-size: 0.7rem;
+    }
+
+    .icon-col {
+        width: 64px;
+        height: 64px;
+        overflow: visible;
+    }
+
+    .label-col {
+        padding-left: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    .feature-name {
+        font-weight: 700;
+        color: #1e293b;
+        font-size: 1rem;
+        text-transform: capitalize;
+    }
+
+    .feature-desc {
+        font-size: 0.75rem;
+        color: #94a3b8;
+        font-style: italic;
+    }
+</style>