Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | // import React from 'react';
// import { ReadingQueueItem } from '@common/types';
// import { useSortable } from '@dnd-kit/sortable';
// import { CSS } from '@dnd-kit/utilities';
// import { GripVertical, X } from 'lucide-react';
// export interface QueueItemProps {
// item: ReadingQueueItem;
// onRemove: (id: string) => void;
// onClick?: () => void;
// isDraggable?: boolean;
// onMoveUp?: () => void;
// onMoveDown?: () => void;
// isFirst?: boolean;
// isLast?: boolean;
// }
// export const QueueItem: React.FC<QueueItemProps> = ({
// item,
// onRemove,
// onClick,
// isDraggable = true,
// onMoveUp,
// onMoveDown,
// isFirst = false,
// isLast = false,
// }) => {
// const {
// attributes,
// listeners,
// setNodeRef,
// transform,
// transition,
// isDragging,
// } = useSortable({ id: item.newsletter.id });
// const style = {
// transform: CSS.Transform.toString(transform),
// transition,
// opacity: isDragging ? 0.5 : 1,
// zIndex: isDragging ? 1 : 'auto',
// cursor: 'pointer',
// };
// const handleClick = () => {
// if (onClick) {
// onClick();
// }
// };
// return (
// <div
// ref={setNodeRef}
// style={style}
// className="flex items-center justify-between p-3 mb-2 bg-white rounded-lg shadow-sm hover:shadow-md transition-all"
// onClick={handleClick}
// >
// <div className="flex items-center flex-1 min-w-0">
// {isDraggable && (
// <button
// {...attributes}
// {...listeners}
// className="p-1 mr-2 text-gray-400 hover:text-gray-600 focus:outline-none"
// aria-label="Drag to reorder"
// onClick={(e) => e.stopPropagation()}
// >
// <GripVertical className="w-5 h-5" />
// </button>
// )}
// <div className="flex-1 min-w-0">
// <h3 className="text-sm font-medium text-gray-900 truncate">
// {item.newsletter.title}
// </h3>
// <p className="text-xs text-gray-500 truncate">
// {item.newsletter.source?.name || 'Unknown Source'}
// </p>
// </div>
// </div>
// <div className="flex items-center ml-2">
// <button
// className="p-1 text-gray-400 hover:text-red-500 focus:outline-none"
// aria-label="Remove from queue"
// onClick={(e) => {
// e.stopPropagation();
// onRemove(item.newsletter.id);
// }}
// >
// <X className="w-4 h-4" />
// </button>
// </div>
// </div>
// );
// };
// export default QueueItem;
|