bdf8ab9fb4
- Introduced new CSS variables for light theme in `globals.css` to improve visual consistency. - Replaced `Card` component with `StatCard`, `ProgressBar`, and `MetricCard` in `DashboardStats`, `ProductivityAnalytics`, and `RecentTasks` for better modularity and reusability. - Updated `QuickActions` to use `ActionCard` for a more cohesive design. - Enhanced `Badge` and `Button` components with new variants for improved styling options. - Added new UI showcase section in `UIShowcaseClient` to demonstrate the new dashboard components.
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import { InputHTMLAttributes, forwardRef } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
|
variant?: 'default' | 'error';
|
|
label?: string;
|
|
error?: string;
|
|
}
|
|
|
|
const Input = forwardRef<HTMLInputElement, InputProps>(
|
|
({ className, variant = 'default', type, ...props }, ref) => {
|
|
const variants = {
|
|
default: 'border border-[var(--border)]/50 bg-[var(--input)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:border-[var(--primary)]/70 focus:ring-1 focus:ring-[var(--primary)]/20',
|
|
error: 'border border-[var(--destructive)]/50 bg-[var(--input)] text-[var(--foreground)] placeholder:text-[var(--muted-foreground)] focus:border-[var(--destructive)]/70 focus:ring-1 focus:ring-[var(--destructive)]/20'
|
|
};
|
|
|
|
return (
|
|
<input
|
|
type={type}
|
|
className={cn(
|
|
'flex h-10 w-full rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 transition-colors',
|
|
variants[variant],
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
Input.displayName = 'Input';
|
|
|
|
export { Input }; |