feat(web): update state icon shown in result card

Signed-off-by: Jordan Shatford <[email protected]>

apps/web/src/lib/components/StateIcon.svelte

@@ -1,33 +1,39 @@
 <script lang="ts">
 	import { DownloadState } from '@yd/client';
-	import { CheckCircleIcon, LoaderIcon, ExclamationCircleIcon, Icon } from '@yd/ui';
+	import {
+		CheckCircleIcon,
+		LoaderIcon,
+		ExclamationCircleIcon,
+		Icon,
+		type IconSource
+	} from '@yd/ui';
 
 	export let state: DownloadState;
-	let className = 'animate-spin';
-	let icon = LoaderIcon;
 
-	$: switch (state) {
-		case DownloadState.WAITING:
-			className = 'text-yellow-600 animate-spin';
-			icon = LoaderIcon;
-			break;
-		case DownloadState.DOWNLOADING:
-			className = 'text-blue-600 animate-spin';
-			icon = LoaderIcon;
-			break;
-		case DownloadState.PROCESSING:
-			className = 'text-purple-600 animate-spin';
-			icon = LoaderIcon;
-			break;
-		case DownloadState.DONE:
-			className = 'text-green-600';
-			icon = CheckCircleIcon;
-			break;
-		case DownloadState.ERROR:
-			className = 'text-red-600';
-			icon = ExclamationCircleIcon;
-			break;
-	}
+	const lookup: Record<DownloadState, { icon: IconSource; class: string }> = {
+		[DownloadState.WAITING]: {
+			icon: LoaderIcon,
+			class: 'text-yellow-600 animate-spin'
+		},
+		[DownloadState.DOWNLOADING]: {
+			icon: LoaderIcon,
+			class: 'text-blue-600 animate-spin'
+		},
+		[DownloadState.PROCESSING]: {
+			icon: LoaderIcon,
+			class: 'text-blue-600 animate-spin'
+		},
+		[DownloadState.ERROR]: {
+			icon: ExclamationCircleIcon,
+			class: 'text-red-600'
+		},
+		[DownloadState.DONE]: {
+			icon: CheckCircleIcon,
+			class: 'text-green-600'
+		}
+	};
 </script>
 
-<Icon src={icon} class="h-5 w-5 {className}" />
+{#key state}
+	<Icon src={lookup[state].icon} theme="solid" class="h-5 w-5 {lookup[state].class}" />
+{/key}

packages/ui/src/lib/utilities.ts

@@ -38,7 +38,7 @@ export const variantMapping: Record<Variant, { icon: IconSource; class: string }
  * @param value some unknown value, could be string, number, boolean, etc
  * @returns IconSource or undefined
  */
-export function toIcon(value: unknown, extras: { loading?: boolean }): IconSource | undefined {
+export function toIcon(value: unknown, extras?: { loading?: boolean }): IconSource | undefined {
 	if (extras?.loading) {
 		return LoaderIcon;
 	}