← Назадimport { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import type { ReactNode } from 'react';
interface SortableTaskCardProps {
id: string;
children: ReactNode;
}
export function SortableTaskCard({ id, children }: SortableTaskCardProps) {
const {
attributes,
listeners,
setNodeRef,
transform,
transition,
isDragging,
} = useSortable({ id });
const style = {
// We add a slight 3deg rotation when dragging for physical feel
transform: CSS.Transform.toString(
transform ? { ...transform, scaleY: 1, scaleX: 1 } : null
),
transition,
opacity: isDragging ? 0.4 : 1,
zIndex: isDragging ? 50 : 1,
position: 'relative' as const,
};
return (
<div
ref={setNodeRef}
style={style}
className={`touch-none rounded-lg ${isDragging ? 'shadow-xl shadow-primary/20 bg-slate-800' : ''
}`}
>
<div {...attributes} {...listeners}>
{children}
</div>
</div>
);
}