Heftig rekatorering

src/routes/ExerciseField.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	import QuickAddButton from '$lib/components/QuickAddButton.svelte';
+	import type { ExerciseConfig } from './workoutData';
+
+	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'
+	}: Props = $props();
+
+	function quickAdd(amount: number) {
+		const newValue = Math.max(min, value + amount);
+		value = step < 1 ? Number(newValue.toFixed(2)) : newValue;
+		onchange(value);
+	}
+</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">
+		<input
+			id={name}
+			{name}
+			type="number"
+			bind:value
+			{min}
+			{max}
+			{step}
+			{defaultValue}
+			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} />
+		{/each}
+	</div>
+</div>