finishes trails page

web/src/lib/components/base/double_slider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import * as noUiSlider from "noUiSlider";
     import "nouislider/dist/nouislider.css";
-    import { onMount } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     export let minValue = 0;
     export let maxValue = 100;
@@ -11,6 +11,8 @@
 
     let sliderContainer: any;
 
+    const dispatch = createEventDispatcher();
+
     onMount(() => {
         const updateValues = (values: string[]) => {
             currentMin = parseFloat(values[0]);
@@ -27,6 +29,10 @@
         });
 
         sliderContainer.noUiSlider.on("update", updateValues);
+
+        sliderContainer.noUiSlider.on("set", () => {
+            dispatch("set", [currentMin, currentMax]);
+        });
     });
 </script>
 

web/src/lib/components/base/dropdown.svelte

@@ -1,7 +1,15 @@
+<script context="module" lang="ts">
+    export type DropdownItem = {
+        text: string;
+        value: any;
+        icon?: string;
+    };
+</script>
+
 <script lang="ts">
     import { createEventDispatcher } from "svelte";
 
-    export let items: { text: string; value: any; icon?: string }[] = [];
+    export let items: DropdownItem[] = [];
     export let size: string = "regular";
 
     const dispatch = createEventDispatcher();
@@ -27,10 +35,14 @@
 <svelte:window on:mouseup={() => (isOpen = false)} />
 
 <div class="dropdown relative">
-    <button class="flex items-center justify-center" on:click={toggleMenu} type="button">
+    <button
+        class="flex items-center justify-center"
+        on:click={toggleMenu}
+        type="button"
+    >
         <slot>
             <i
-                class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 hover:bg-opacity-50 px-[14px] py-2 rounded-full "
+                class="fa fa-ellipsis-vertical text-{size} hover:bg-gray-300 hover:bg-opacity-50 px-[14px] py-2 rounded-full"
             ></i>
         </slot>
     </button>

web/src/lib/components/base/search.svelte

@@ -71,7 +71,7 @@
         type="search"
         name="q"
         autocomplete="off"
-        extraClasses="{large ? 'pl-14 text-2xl min-w-80 w-[33vw] max-w-[532px]' : 'pl-10'}"
+        extraClasses="{large ? 'pl-14 text-2xl min-w-80 w-[33vw] max-w-[532px] rounded-xl' : 'pl-10'}"
         {placeholder}
         bind:value
         on:input={onSearchType}

web/src/lib/components/base/select.svelte

@@ -1,8 +1,24 @@
+<script context="module" lang="ts">
+    export type SelectItem = {
+        text: string;
+        value: any;
+    };
+</script>
+
 <script lang="ts">
+    import { createEventDispatcher } from "svelte";
+
     export let name: string = "";
     export let value: any;
-    export let items: { text: string; value: any }[] = [];
+    export let items: SelectItem[] = [];
     export let label: string = "";
+
+    const dispatch = createEventDispatcher();
+
+    function onChange(target: any) {
+        dispatch("change", target?.value)
+    }
+
 </script>
 
 <div>
@@ -15,6 +31,7 @@
         {name}
         class="bg-gray-50 h-10 w-full px-4 border-r-8 border-transparent outline outline-1 outline-gray-200 rounded-md focus:outline-primary transition-colors"
         bind:value
+        on:change={(e) => onChange(e.target)}
     >
         {#each items as item}
             <option value={item.value}>{item.text}</option>

web/src/lib/components/base/slider.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import noUiSlider from "noUiSlider";
     import "nouislider/dist/nouislider.css";
-    import { onMount } from "svelte";
+    import { createEventDispatcher, onMount } from "svelte";
 
     export let minValue = 0;
     export let maxValue = 100;
@@ -10,6 +10,8 @@
 
     let sliderContainer: any;
 
+    const dispatch = createEventDispatcher();
+
     onMount(() => {
         const updateValues = (values: string[]) => {
             currentValue = parseFloat(values[0]);
@@ -25,6 +27,10 @@
         });
 
         sliderContainer.noUiSlider.on("update", updateValues);
+
+        sliderContainer.noUiSlider.on("set", () => {
+            dispatch("set", currentValue);
+        });
     });
 </script>