46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
interface ChartPlaceholderProps {
|
|
text: string;
|
|
height?: string;
|
|
colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'teal' | 'orange' | 'pink' | 'yellow';
|
|
}
|
|
|
|
export default function ChartPlaceholder({
|
|
text,
|
|
height = "h-64",
|
|
colorScheme = 'blue'
|
|
}: ChartPlaceholderProps) {
|
|
const borderColor = {
|
|
blue: 'border-accent-blue',
|
|
green: 'border-accent-green',
|
|
red: 'border-accent-red',
|
|
purple: 'border-accent-purple',
|
|
teal: 'border-accent-teal',
|
|
orange: 'border-accent-orange',
|
|
pink: 'border-accent-pink',
|
|
yellow: 'border-accent-yellow',
|
|
}[colorScheme];
|
|
|
|
const textColor = {
|
|
blue: 'text-accent-blue',
|
|
green: 'text-accent-green',
|
|
red: 'text-accent-red',
|
|
purple: 'text-accent-purple',
|
|
teal: 'text-accent-teal',
|
|
orange: 'text-accent-orange',
|
|
pink: 'text-accent-pink',
|
|
yellow: 'text-accent-yellow',
|
|
}[colorScheme];
|
|
|
|
return (
|
|
<div className={`${height} flex items-center justify-center bg-card-bg bg-opacity-50 rounded-md border-2 border-dashed ${borderColor}`}>
|
|
<div className="text-center">
|
|
<div className="mx-auto w-12 h-12 mb-3 rounded-full bg-background flex items-center justify-center">
|
|
<svg className={`w-6 h-6 ${textColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
|
</svg>
|
|
</div>
|
|
<p className={`${textColor} text-sm font-medium`}>{text}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|