c1a14f9196
- Integrated `PeriodSelector`, `SkeletonGrid`, and `MetricsGrid` for better data visualization and user interaction. - Replaced legacy period selection and error display with new components for a cleaner UI. - Updated `UIShowcaseClient` to demonstrate new Jira dashboard components, enhancing showcase functionality.
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { ReactNode } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
export interface PeriodOption {
|
|
value: string;
|
|
label: string;
|
|
icon?: ReactNode;
|
|
}
|
|
|
|
interface PeriodSelectorProps {
|
|
options: PeriodOption[];
|
|
selectedValue: string;
|
|
onValueChange: (value: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function PeriodSelector({
|
|
options,
|
|
selectedValue,
|
|
onValueChange,
|
|
className
|
|
}: PeriodSelectorProps) {
|
|
return (
|
|
<div className={cn(
|
|
"flex bg-[var(--card)] border border-[var(--border)] rounded-lg p-1",
|
|
className
|
|
)}>
|
|
{options.map((option) => (
|
|
<button
|
|
key={option.value}
|
|
onClick={() => onValueChange(option.value)}
|
|
className={cn(
|
|
"px-3 py-1 text-sm rounded transition-all flex items-center gap-1",
|
|
selectedValue === option.value
|
|
? 'bg-[var(--primary)] text-[var(--primary-foreground)]'
|
|
: 'text-[var(--muted-foreground)] hover:text-[var(--foreground)]'
|
|
)}
|
|
>
|
|
{option.icon && <span>{option.icon}</span>}
|
|
<span>{option.label}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|