687d02ff3a
- Added `ColumnHeader`, `EmptyState`, and `DropZone` components to improve the Kanban UI structure and user experience. - Refactored `KanbanColumn` to utilize the new components, enhancing readability and maintainability. - Updated `Card` component to support flexible props for shadow, border, and background, allowing for better customization across the application. - Adjusted `SwimlanesBase` to incorporate the new `ColumnHeader` for consistent column representation.
32 lines
704 B
TypeScript
32 lines
704 B
TypeScript
import { HTMLAttributes, forwardRef } from 'react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
interface DropZoneProps extends HTMLAttributes<HTMLDivElement> {
|
|
isOver?: boolean;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const DropZone = forwardRef<HTMLDivElement, DropZoneProps>(
|
|
({ className, isOver = false, children, ...props }, ref) => {
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
className={cn(
|
|
"transition-all duration-200",
|
|
isOver
|
|
? "ring-2 ring-[var(--primary)]/50 bg-[var(--card-hover)]"
|
|
: "",
|
|
className
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|
|
);
|
|
|
|
DropZone.displayName = 'DropZone';
|
|
|
|
export { DropZone };
|