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.
57 lines
1.4 KiB
TypeScript
57 lines
1.4 KiB
TypeScript
import { cn } from '@/lib/utils';
|
|
|
|
interface ProgressBarProps {
|
|
value: number; // 0-100
|
|
label?: string;
|
|
color?: 'default' | 'primary' | 'success' | 'warning' | 'destructive';
|
|
showPercentage?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const colorVariants = {
|
|
default: 'bg-[var(--primary)]',
|
|
primary: 'bg-[var(--primary)]',
|
|
success: 'bg-[var(--success)]',
|
|
warning: 'bg-[var(--accent)]',
|
|
destructive: 'bg-[var(--destructive)]'
|
|
};
|
|
|
|
export function ProgressBar({
|
|
value,
|
|
label,
|
|
color = 'default',
|
|
showPercentage = true,
|
|
className
|
|
}: ProgressBarProps) {
|
|
const clampedValue = Math.min(Math.max(value, 0), 100);
|
|
|
|
return (
|
|
<div className={cn("space-y-2", className)}>
|
|
{(label || showPercentage) && (
|
|
<div className="flex items-center justify-between">
|
|
{label && (
|
|
<span className="text-sm font-medium text-[var(--foreground)]">
|
|
{label}
|
|
</span>
|
|
)}
|
|
{showPercentage && (
|
|
<span className="text-sm font-medium text-[var(--muted-foreground)]">
|
|
{Math.round(clampedValue)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
<div className="w-full bg-[var(--border)] rounded-full h-2">
|
|
<div
|
|
className={cn(
|
|
"h-2 rounded-full transition-all duration-300",
|
|
colorVariants[color]
|
|
)}
|
|
style={{ width: `${clampedValue}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|