kurihada
0c5676493e
- UserAvatar: 统一头像渲染（5 种尺寸），新增 resolveAvatar 工具函数，替换 SwipeDeck 和 RoomManageModal 中的重复逻辑 - Input: 统一表单输入样式（4 种尺寸 + default/purple 变体），替换 AuthModal、ProfilePage、BlindboxPage 共 12 处 - Card: 统一卡片容器样式 + 可选淡入动画和延迟，替换 ProfilePage 中 7 处重复的 motion.div
32 lines
949 B
TypeScript
32 lines
949 B
TypeScript
import { type ComponentPropsWithoutRef, forwardRef } from "react";
|
|
|
|
const sizeStyles = {
|
|
sm: "h-8 rounded-lg px-2",
|
|
md: "h-9 rounded-lg px-3",
|
|
lg: "h-10 rounded-xl px-3",
|
|
xl: "h-11 rounded-xl px-4",
|
|
} as const;
|
|
|
|
const variantStyles = {
|
|
default: "bg-elevated text-heading focus:ring-accent/50",
|
|
purple: "bg-surface text-foreground focus:ring-purple-600",
|
|
} as const;
|
|
|
|
interface InputProps extends Omit<ComponentPropsWithoutRef<"input">, "size"> {
|
|
size?: keyof typeof sizeStyles;
|
|
variant?: keyof typeof variantStyles;
|
|
}
|
|
|
|
const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
({ size = "md", variant = "default", className = "", ...rest }, ref) => (
|
|
<input
|
|
ref={ref}
|
|
className={`w-full border-none text-sm outline-none ring-1 ring-border placeholder:text-dim focus:ring-2 ${sizeStyles[size]} ${variantStyles[variant]} ${className}`}
|
|
{...rest}
|
|
/>
|
|
),
|
|
);
|
|
|
|
Input.displayName = "Input";
|
|
export default Input;
|