From 68ef9710375e862f02030d4441122c99456f5a4e Mon Sep 17 00:00:00 2001
From: Ahmedhossamdev <ahmedhossamdev1@gmail.com>
Date: Sun, 24 Nov 2024 18:20:07 +0200
Subject: [PATCH] chore: formatting

---
 src/components/containers/Accordion.svelte    | 66 +++++++--------
 .../containers/AccordionItem.svelte           | 80 +++++++++----------
 src/components/navigation/ModalPane.svelte    |  2 +-
 src/components/stops/StopPane.svelte          | 18 ++---
 4 files changed, 84 insertions(+), 82 deletions(-)

diff --git a/src/components/containers/Accordion.svelte b/src/components/containers/Accordion.svelte
index 01ed5f8..21e7320 100644
--- a/src/components/containers/Accordion.svelte
+++ b/src/components/containers/Accordion.svelte
@@ -1,33 +1,35 @@
 <script>
-    import { setContext } from 'svelte';
-    import { writable, derived } from 'svelte/store';
-  
-    // Create a store to track the active item
-    const activeItem = writable(null);
-  
-    // Create dispatch for activeChanged event
-    import { createEventDispatcher } from 'svelte';
-    const dispatch = createEventDispatcher();
-  
-    // Watch for changes to activeItem and dispatch event
-    $: {
-      dispatch('activeChanged', { activeItem: $activeItem });
-    }
-  
-    // Provide context for child AccordionItems
-    setContext('accordion', {
-      registerItem: (id) => {
-        const isActive = derived(activeItem, $activeItem => $activeItem === id);
-        return {
-          isActive,
-          activate: () => {
-            activeItem.set($activeItem === id ? null : id);
-          }
-        };
-      }
-    });
-  </script>
-  
-  <div class="divide-y divide-gray-200 border-y border-gray-200 dark:divide-gray-700 dark:border-gray-700">
-    <slot />
-  </div>
\ No newline at end of file
+	import { setContext } from 'svelte';
+	import { writable, derived } from 'svelte/store';
+
+	// Create a store to track the active item
+	const activeItem = writable(null);
+
+	// Create dispatch for activeChanged event
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	// Watch for changes to activeItem and dispatch event
+	$: {
+		dispatch('activeChanged', { activeItem: $activeItem });
+	}
+
+	// Provide context for child AccordionItems
+	setContext('accordion', {
+		registerItem: (id) => {
+			const isActive = derived(activeItem, ($activeItem) => $activeItem === id);
+			return {
+				isActive,
+				activate: () => {
+					activeItem.set($activeItem === id ? null : id);
+				}
+			};
+		}
+	});
+</script>
+
+<div
+	class="divide-y divide-gray-200 border-y border-gray-200 dark:divide-gray-700 dark:border-gray-700"
+>
+	<slot />
+</div>
diff --git a/src/components/containers/AccordionItem.svelte b/src/components/containers/AccordionItem.svelte
index 46cee01..7e12244 100644
--- a/src/components/containers/AccordionItem.svelte
+++ b/src/components/containers/AccordionItem.svelte
@@ -1,46 +1,46 @@
 <script>
-  import { getContext } from 'svelte';
-  import { slide } from 'svelte/transition';
+	import { getContext } from 'svelte';
+	import { slide } from 'svelte/transition';
 
-  const id = crypto.randomUUID();
-  const { registerItem } = getContext('accordion');
-  const { isActive, activate } = registerItem(id);
+	const id = crypto.randomUUID();
+	const { registerItem } = getContext('accordion');
+	const { isActive, activate } = registerItem(id);
 
-  function toggle() {
-    activate();
-  }
+	function toggle() {
+		activate();
+	}
 </script>
 
 <div class="relative">
-  <!-- Added sticky positioning to the button wrapper -->
-  <div class="sticky top-0 z-10 bg-white dark:bg-gray-800">
-    <button
-      type="button"
-      class="flex w-full items-center justify-between py-3 text-left text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
-      class:text-gray-900={$isActive}
-      class:dark:text-white={$isActive}
-      on:click={toggle}
-      aria-expanded={$isActive}
-    >
-      <slot name="header" />
-      <svg
-        class="h-6 w-6 shrink-0 transition-transform"
-        class:rotate-180={$isActive}
-        fill="none"
-        stroke="currentColor"
-        viewBox="0 0 24 24"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
-      </svg>
-    </button>
-  </div>
-  
-  {#if $isActive}
-    <div transition:slide|local>
-      <div class="py-3">
-        <slot />
-      </div>
-    </div>
-  {/if}
-</div>
\ No newline at end of file
+	<!-- Added sticky positioning to the button wrapper -->
+	<div class="sticky top-0 z-10 bg-white dark:bg-gray-800">
+		<button
+			type="button"
+			class="flex w-full items-center justify-between py-3 text-left text-base font-medium text-gray-500 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+			class:text-gray-900={$isActive}
+			class:dark:text-white={$isActive}
+			on:click={toggle}
+			aria-expanded={$isActive}
+		>
+			<slot name="header" />
+			<svg
+				class="h-6 w-6 shrink-0 transition-transform"
+				class:rotate-180={$isActive}
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				xmlns="http://www.w3.org/2000/svg"
+			>
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+			</svg>
+		</button>
+	</div>
+
+	{#if $isActive}
+		<div transition:slide|local>
+			<div class="py-3">
+				<slot />
+			</div>
+		</div>
+	{/if}
+</div>
diff --git a/src/components/navigation/ModalPane.svelte b/src/components/navigation/ModalPane.svelte
index ac31912..27a9677 100644
--- a/src/components/navigation/ModalPane.svelte
+++ b/src/components/navigation/ModalPane.svelte
@@ -40,7 +40,7 @@
 		<div class="relative flex-1">
 			<div class="absolute inset-0 overflow-y-auto">
 				<slot></slot>
-				<div class='mb-4'>
+				<div class="mb-4">
 					<!-- this empty footer shows a user that the content in the pane hasn't been cut off. -->
 					&nbsp;
 				</div>
diff --git a/src/components/stops/StopPane.svelte b/src/components/stops/StopPane.svelte
index 2d06bc0..2e4a436 100644
--- a/src/components/stops/StopPane.svelte
+++ b/src/components/stops/StopPane.svelte
@@ -92,7 +92,7 @@
 	}
 
 	function selectionChanged() {
-		console.log("bonk");
+		console.log('bonk');
 	}
 </script>
 
@@ -114,14 +114,14 @@
 					<AccordionItem>
 						<span slot="header">
 							<ArrivalDeparture
-							routeShortName={arrival.routeShortName}
-							tripHeadsign={arrival.tripHeadsign}
-							scheduledArrivalTime={arrival.scheduledArrivalTime}
-							predictedArrivalTime={arrival.predictedArrivalTime}
-							tripId={arrival.tripId}
-							vehicleId={arrival.vehicleId}
-							serviceDate={arrival.serviceDate}
-							on:showTripDetails={handleShowTripDetails}
+								routeShortName={arrival.routeShortName}
+								tripHeadsign={arrival.tripHeadsign}
+								scheduledArrivalTime={arrival.scheduledArrivalTime}
+								predictedArrivalTime={arrival.predictedArrivalTime}
+								tripId={arrival.tripId}
+								vehicleId={arrival.vehicleId}
+								serviceDate={arrival.serviceDate}
+								on:showTripDetails={handleShowTripDetails}
 							/>
 						</span>