2e3ec9765d
- Added new UI components: `Logo`, `Alert`, `Button`, `Input`, and `Card`. - Refactored `LoginForm` to utilize new components for better structure and styling. - Enhanced error handling in `LoginFormData` with specific error messages. - Updated styles for grid layout and various UI elements for a cohesive design. - Removed Bootstrap dependency in favor of custom styles for better control.
68 lines
1.4 KiB
Text
68 lines
1.4 KiB
Text
---
|
|
interface Props {
|
|
label?: string;
|
|
type?: "text" | "password" | "email" | "number";
|
|
name: string;
|
|
id?: string;
|
|
placeholder?: string;
|
|
value?: string | number;
|
|
required?: boolean;
|
|
error?: string;
|
|
class?: string;
|
|
}
|
|
|
|
const {
|
|
label,
|
|
type = "text",
|
|
name,
|
|
id = name,
|
|
placeholder = "",
|
|
value = "",
|
|
required = false,
|
|
error,
|
|
class: className = "",
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div class:list={["form-group", className]}>
|
|
{
|
|
label && (
|
|
<label class="form-label" for={id}>
|
|
{label}
|
|
{required && <span class="required">*</span>}
|
|
</label>
|
|
)
|
|
}
|
|
<input
|
|
type={type}
|
|
id={id}
|
|
name={name}
|
|
class:list={["input", { "input-error": error }]}
|
|
placeholder={placeholder}
|
|
value={value}
|
|
required={required}
|
|
/>
|
|
{error && <div class="input-error-message">{error}</div>}
|
|
</div>
|
|
|
|
<style>
|
|
.required {
|
|
color: var(--error-color);
|
|
margin-left: 0.25rem;
|
|
}
|
|
|
|
.input-error {
|
|
border-color: var(--error-color);
|
|
}
|
|
|
|
.input-error:focus {
|
|
border-color: var(--error-color);
|
|
box-shadow: 0 0 0 2px rgba(255, 107, 107, 0.2);
|
|
}
|
|
|
|
.input-error-message {
|
|
color: var(--error-color);
|
|
font-size: 0.875rem;
|
|
margin-top: 0.5rem;
|
|
}
|
|
</style>
|