ag/gymflow
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

Massive Material 3 re-styling

Browse Source
This commit is contained in:
AG
2025-12-12 01:06:09 +02:00
parent 55d414da19
commit bc1b747ef4
13 changed files with 374 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
src/components/FilledInput.tsx
View File

@@ -16,9 +16,15 @@ interface FilledInputProps {
autocapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters";
autoComplete?: string;
rightElement?: React.ReactNode;
multiline?: boolean;
rows?: number;
}
const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onClear, onFocus, onBlur, type = "number", icon, autoFocus, step, inputMode, autocapitalize, autoComplete, rightElement }) => {
const FilledInput: React.FC<FilledInputProps> = ({
label, value, onChange, onClear, onFocus, onBlur, type = "number", icon,
autoFocus, step, inputMode, autocapitalize, autoComplete, rightElement,
multiline = false, rows = 3
}) => {
const id = useId();
const handleClear = () => {
@@ -30,25 +36,41 @@ const FilledInput: React.FC<FilledInputProps> = ({ label, value, onChange, onCle
};
return (
<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 htmlFor={id} className="absolute top-2 left-4 text-[10px] font-medium text-on-surface-variant flex items-center gap-1">
<div className="relative group bg-surface-container-high rounded-t-[4px] border-b border-on-surface-variant hover:bg-on-surface/10 focus-within:border-primary focus-within:border-b-2 transition-colors min-h-[56px]">
<label htmlFor={id} className="absolute top-2 left-4 text-label-sm font-medium text-on-surface-variant flex items-center gap-1 group-focus-within:text-primary">
{icon ? <>{icon} {label}</> : label}
</label>
<input
id={id}
type={type}
step={step}
inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
autoFocus={autoFocus}
className={`w-full pt-6 pb-2 pl-4 bg-transparent text-2xl text-on-surface focus:outline-none placeholder-transparent ${rightElement ? 'pr-20' : 'pr-10'}`}
placeholder="0"
value={value}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
autoCapitalize={autocapitalize}
autoComplete={autoComplete}
/>
{!multiline ? (
<input
id={id}
type={type}
step={step}
inputMode={inputMode || (type === 'number' ? 'decimal' : 'text')}
autoFocus={autoFocus}
className={`w-full h-[56px] pt-5 pb-1 pl-4 bg-transparent text-body-lg text-on-surface focus:outline-none placeholder-transparent ${rightElement ? 'pr-20' : 'pr-10'}`}
placeholder=" "
value={value}
onChange={onChange}
onFocus={onFocus}
onBlur={onBlur}
autoCapitalize={autocapitalize}
autoComplete={autoComplete}
/>
) : (
<textarea
id={id}
rows={rows}
className={`w-full pt-6 pb-2 pl-4 bg-transparent text-body-lg text-on-surface focus:outline-none placeholder-transparent resize-none ${rightElement ? 'pr-20' : 'pr-10'}`}
placeholder=" "
value={value}
onChange={onChange as any}
onFocus={onFocus as any}
onBlur={onBlur as any}
autoCapitalize={autocapitalize}
/>
)}
{value !== '' && value !== 0 && (
<button
type="button"