align icon with text

Author: stevhliu

kit/src/lib/Tip.svelte

@@ -1,53 +1,52 @@
-<script>
+<script lang="ts">
+	interface IconData {
+		paths: string[];
+	}
+	
 	export let warning = false;
-	const color = warning ? "orange" : "green";
+	const color: 'orange' | 'green' = warning ? "orange" : "green";
+	
+	// Icon paths
+	const WarningIcon: IconData = {
+		paths: [
+			"m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3",
+			"M12 9v4",
+			"M12 17h.01"
+		]
+	};
+	
+	const TipIcon: IconData = {
+		paths: [
+			"M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5",
+			"M9 18h6",
+			"M10 22h4"
+		]
+	};
+	
+	const iconPaths = warning ? WarningIcon.paths : TipIcon.paths;
 </script>
 
-<!-- For tailwind:
-	border-green-50 text-green-700 from-green-50 dark:from-green-900 before:border-green-500 dark:before:border-green-800
-	border-orange-50 text-orange-700 from-orange-50 dark:from-orange-900 before:border-orange-500 dark:before:border-orange-800
--->
-
 <div
-	class="course-tip {color === 'orange'
-		? 'course-tip-orange'
-		: ''} bg-gradient-to-br dark:bg-gradient-to-r before:border-{color}-500 dark:before:border-{color}-800 from-{color}-50 border to-white dark:from-gray-900 dark:to-gray-950 border-{color}-50 text-{color}-700 dark:text-gray-400"
+	class="course-tip {color === 'orange' ? 'course-tip-orange' : ''} bg-gradient-to-br dark:bg-gradient-to-r border to-white dark:from-gray-900 dark:to-gray-950 dark:text-gray-400 {color === 'orange' ? 'from-orange-50 border-orange-50 text-orange-700 before:border-orange-500 dark:before:border-orange-800' : 'from-green-50 border-green-50 text-green-700 before:border-green-500 dark:before:border-green-800'}"
 >
-	<div class="flex items-center gap-2">
-		{#if warning}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="20"
-				height="20"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="-mt-0.5 h-4 w-4 flex-shrink-0"
-				><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" /><path
-					d="M12 9v4"
-				/><path d="M12 17h.01" /></svg
-			>
-		{:else}
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				width="20"
-				height="20"
-				viewBox="0 0 24 24"
-				fill="none"
-				stroke="currentColor"
-				stroke-width="2"
-				stroke-linecap="round"
-				stroke-linejoin="round"
-				class="-mt-0.5 h-4 w-4 flex-shrink-0"
-				><path
-					d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
-				/><path d="M9 18h6" /><path d="M10 22h4" /></svg
-			>
-		{/if}
-		<div class="flex-1">
+	<div class="flex items-baseline gap-2">
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			width="20"
+			height="20"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="2"
+			stroke-linecap="round"
+			stroke-linejoin="round"
+			class="h-4 w-4 flex-shrink-0 transform translate-y-0.5"
+		>
+			{#each iconPaths as path}
+				<path d={path} />
+			{/each}
+		</svg>
+		<div class="flex-1 mt-0.5">
 			<slot />
 		</div>
 	</div>