Heftig rekatorering

src/routes/ExerciseField.svelte

@@ -1,38 +1,41 @@
 <script lang="ts">
-	import QuickAddButton from '$lib/components/QuickAddButton.svelte';
-	import type { ExerciseConfig } from './workoutData';
+	import type { ExerciseConfig, ColorExercise } from '$lib/workout';
 
 	interface Props extends ExerciseConfig {
-		label: string;
 		value: number;
-		onchange: (value: number) => void;
 		defaultValue: number;
 	}
 
 	let {
-		label,
-		icon,
-		name,
 		value = $bindable(),
-		onchange,
 		min = 0,
 		max = 9999,
 		step = 1,
-		quickAddOptions,
-		defaultValue,
-		color = 'blue'
+		color = 'blue',
+		...restProps
 	}: Props = $props();
 
+	// Destructure the remaining props for easier access
+	const { icon, name, quickAddOptions, defaultValue, unit } = restProps;
+
+	const label = unit ? `${icon} ${name} (${unit})` : `${icon} ${name}`;
+
 	function quickAdd(amount: number) {
 		const newValue = Math.max(min, value + amount);
 		value = step < 1 ? Number(newValue.toFixed(2)) : newValue;
-		onchange(value);
 	}
+
+	const colorClasses = {
+		blue: 'bg-blue-100 text-blue-700 hover:bg-blue-200 focus:ring-blue-500',
+		green: 'bg-green-100 text-green-700 hover:bg-green-200 focus:ring-green-500',
+		orange: 'bg-orange-100 text-orange-700 hover:bg-orange-200 focus:ring-orange-500',
+		red: 'bg-red-100 text-red-700 hover:bg-red-200 focus:ring-red-500',
+		purple: 'bg-purple-100 text-purple-700 hover:bg-purple-200 focus:ring-purple-500'
+	};
 </script>
 
 <div class="mb-6">
 	<label for={name} class="mb-2 block text-sm font-medium text-gray-700">
-		{icon}
 		{label}
 	</label>
 	<div class="flex items-center space-x-2">
@@ -48,8 +51,21 @@
 			required={true}
 			class="flex-1 rounded-md border border-gray-300 px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
 		/>
+
 		{#each quickAddOptions as option}
-			<QuickAddButton label={option.label} onclick={() => quickAdd(option.value)} {color} />
+			{@render quickAddButton(option.label, () => quickAdd(option.value), color)}
 		{/each}
 	</div>
 </div>
+
+{#snippet quickAddButton(label: string, onclick: () => void, color: ColorExercise)}
+	<button
+		type="button"
+		{onclick}
+		class="rounded px-3 py-1 text-xs focus:ring-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 {colorClasses[
+			color
+		]}"
+	>
+		{label}
+	</button>
+{/snippet}