a604b4d488
Some checks failed
CI Check / check (push) Has been cancelled
- 首页UI统一到三层架构 - 将所有 gray 系列替换为 slate 系列 - 统一按钮、输入框、边框颜色样式 - 使用 useThemeStyles() Hook - 创建通用组件库 - Badge 组件（支持 primary、success、warning、danger 变体） - Tag 组件（支持多种颜色，已在首页应用） - Button 组件（支持多种变体和尺寸，带加载状态） - Input 组件（支持错误状态和多种尺寸）
52 lines
973 B
TypeScript
52 lines
973 B
TypeScript
'use client'
|
|
|
|
import { InputHTMLAttributes, forwardRef } from 'react'
|
|
import { useThemeStyles, cn } from '@/lib/ui-styles'
|
|
|
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
error?: boolean
|
|
size?: 'sm' | 'md' | 'lg'
|
|
fullWidth?: boolean
|
|
}
|
|
|
|
const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
(
|
|
{
|
|
error = false,
|
|
size = 'md',
|
|
fullWidth = true,
|
|
className = '',
|
|
...props
|
|
},
|
|
ref
|
|
) => {
|
|
const styles = useThemeStyles()
|
|
|
|
const sizeClasses = {
|
|
sm: styles.inputModifiers.compactXs,
|
|
md: '',
|
|
lg: 'px-5 py-4 text-base',
|
|
}
|
|
|
|
const inputClass = error ? styles.inputStyles.error : styles.inputStyles.base
|
|
|
|
return (
|
|
<input
|
|
ref={ref}
|
|
className={cn(
|
|
inputClass,
|
|
sizeClasses[size],
|
|
!fullWidth && 'w-auto',
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
)
|
|
}
|
|
)
|
|
|
|
Input.displayName = 'Input'
|
|
|
|
export default Input
|
|
|