More consistent format

Author: fallaciousreasoning

src/components/mountains/RouteAttribution.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+    import { Route } from "../../stores/mountains"
+    export let route: Route;
+</script>
+
+<div class="italic text-gray-600">{route.ascent}</div>

src/components/mountains/RouteInfo.svelte

@@ -2,9 +2,10 @@
   import { Route } from '../../stores/mountains'
   import { repeatString } from '../../utils/array'
   import TopoText from '../TopoText.svelte'
-    import Pitches from './Pitches.svelte'
+  import Pitches from './Pitches.svelte'
+  import RouteAttribution from './RouteAttribution.svelte'
 
-  export let route: Route;
+  export let route: Route
 </script>
 
 <div class="font-bold">
@@ -16,11 +17,15 @@
 </div>
 {#if route.image}
   <a target="_blank" rel="noopener noreferrer" href={route.image}>
-    <img class="h-64 w-full object-cover object-scale" alt={route.name} src={route.image} />
+    <img
+      class="h-64 w-full object-cover object-scale"
+      alt={route.name}
+      src={route.image} />
   </a>
 {/if}
 <div>
   <TopoText text={route.description} />
 </div>
 
-<Pitches pitches={route.pitches}/>
+<Pitches pitches={route.pitches} />
+<RouteAttribution {route} />

src/components/mountains/RoutesFilter.svelte

@@ -24,7 +24,8 @@
   import Grade from './Grade.svelte'
   import { parseGrade } from '../../utils/grade'
   import VirtualList from '../VirtualList.svelte'
-    import { repeatString } from '../../utils/array'
+  import { repeatString } from '../../utils/array'
+  import RouteAttribution from './RouteAttribution.svelte'
 
   const viewMountain = (mountain: Mountain, route: Route) => {
     fragment.update((value) => ({
@@ -71,7 +72,7 @@
       )
     })
     // Filter stars
-    .filter(([,r]) => {
+    .filter(([, r]) => {
       if ($minStars !== 'any' && r.quality < $minStars) return false
       if ($maxStars !== 'any' && r.quality > $maxStars) return false
       return true
@@ -121,7 +122,7 @@
         <label>
           Min:
           <select bind:value={$minStars}>
-            <option value='any'>Any</option>
+            <option value="any">Any</option>
             <option value={1}>1</option>
             <option value={2}>2</option>
             <option value={3}>3</option>
@@ -130,7 +131,7 @@
         <label>
           Max:
           <select bind:value={$maxStars}>
-            <option value='any'>Any</option>
+            <option value="any">Any</option>
             <option>0</option>
             <option>1</option>
             <option>2</option>
@@ -185,7 +186,7 @@
           </div>
           <div>
             {item[1].description}
-            <div class="italic text-gray-600">{item[1].ascent}</div>
+            <RouteAttribution route={item[1]} />
           </div>
         </Card>
       </div>