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.
66 lines
1.4 KiB
TypeScript
66 lines
1.4 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { Button } from './Button';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface ActionCardProps {
|
|
title: string;
|
|
description?: string;
|
|
icon?: ReactNode;
|
|
onClick?: () => void;
|
|
href?: string;
|
|
variant?: 'primary' | 'secondary' | 'ghost';
|
|
className?: string;
|
|
}
|
|
|
|
export function ActionCard({
|
|
title,
|
|
description,
|
|
icon,
|
|
onClick,
|
|
href,
|
|
variant = 'secondary',
|
|
className
|
|
}: ActionCardProps) {
|
|
const content = (
|
|
<Button
|
|
variant={variant}
|
|
onClick={onClick}
|
|
className={cn("flex items-center gap-3 p-6 h-auto text-left justify-start w-full", className)}
|
|
>
|
|
{icon && (
|
|
<div className="flex-shrink-0">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<div className={`font-semibold ${
|
|
variant === 'primary'
|
|
? 'text-[var(--primary-foreground)]'
|
|
: 'text-[var(--foreground)]'
|
|
}`}>
|
|
{title}
|
|
</div>
|
|
{description && (
|
|
<div className={`text-sm ${
|
|
variant === 'primary'
|
|
? 'text-[var(--primary-foreground)] opacity-60'
|
|
: 'text-[var(--muted-foreground)]'
|
|
}`}>
|
|
{description}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Button>
|
|
);
|
|
|
|
if (href) {
|
|
return (
|
|
<a href={href} className="block">
|
|
{content}
|
|
</a>
|
|
);
|
|
}
|
|
|
|
return content;
|
|
}
|