39 lines
704 B
TypeScript
39 lines
704 B
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { cn } from '@/lib/utils/cn';
|
||
|
|
|
||
|
|
interface ColorDisplayProps {
|
||
|
|
color: string;
|
||
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
||
|
|
className?: string;
|
||
|
|
showBorder?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function ColorDisplay({
|
||
|
|
color,
|
||
|
|
size = 'lg',
|
||
|
|
className,
|
||
|
|
showBorder = true,
|
||
|
|
}: ColorDisplayProps) {
|
||
|
|
const sizeClasses = {
|
||
|
|
sm: 'h-16 w-16',
|
||
|
|
md: 'h-32 w-32',
|
||
|
|
lg: 'h-48 w-48',
|
||
|
|
xl: 'h-64 w-64',
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
'rounded-lg transition-all',
|
||
|
|
showBorder && 'ring-2 ring-border',
|
||
|
|
sizeClasses[size],
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
style={{ backgroundColor: color }}
|
||
|
|
role="img"
|
||
|
|
aria-label={`Color swatch: ${color}`}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|