Exercise management enhanced

components/FilledInput.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+interface FilledInputProps {
+    label: string;
+    value: string | number;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    type?: string;
+    icon?: React.ReactNode;
+    autoFocus?: boolean;
+    step?: string;
+    inputMode?: "search" | "text" | "email" | "tel" | "url" | "none" | "numeric" | "decimal";
+}
+
+const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, type = "number", icon, autoFocus, step, inputMode }) => (
+    <div className="relative group bg-surface-container-high rounded-t-lg border-b border-outline-variant hover:bg-white/5 focus-within:border-primary transition-colors">
+        <label className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
+            {icon} {label}
+        </label>
+        <input
+            type={type}
+            step={step}
+            inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
+            autoFocus={autoFocus}
+            className="w-full pt-6 pb-2 px-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent"
+            placeholder="0"
+            value={value}
+            onChange={onChange}
+        />
+    </div>
+);
+
+export default FilledInput;