This commit is contained in:
2025-12-23 10:23:43 -05:00
parent ee1de16c9e
commit 236555e41e
12 changed files with 20 additions and 210 deletions

View File

@@ -6,12 +6,13 @@ export interface InputProps extends JSX.InputHTMLAttributes<HTMLInputElement> {
helperText?: string;
}
/**
* Reusable input component with label and error handling
* Styled to match Next.js migration source (underlined input style)
*/
export default function Input(props: InputProps) {
const [local, others] = splitProps(props, ["label", "error", "helperText", "class"]);
const [local, others] = splitProps(props, [
"label",
"error",
"helperText",
"class"
]);
return (
<div class="input-group">
@@ -23,22 +24,18 @@ export default function Input(props: InputProps) {
aria-describedby={local.error ? `${others.id}-error` : undefined}
/>
<span class="bar"></span>
{local.label && (
<label class="underlinedInputLabel">{local.label}</label>
)}
{local.label && <label class="underlinedInputLabel">{local.label}</label>}
{local.error && (
<span
id={`${others.id}-error`}
class="text-xs text-red-500 mt-1 block"
class="mt-1 block text-xs text-red-500"
role="alert"
>
{local.error}
</span>
)}
{local.helperText && !local.error && (
<span class="text-xs text-gray-500 mt-1 block">
{local.helperText}
</span>
<span class="mt-1 block text-xs text-gray-500">{local.helperText}</span>
)}
</div>
);