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 | 4885x 4885x 4885x 4885x 4885x 39080x 4885x 4885x 4885x 1522x 6407x 14655x 4865x 9750x 14655x 29310x | import * as React from "react";
/**
*
*/
interface SelectableItemParams {
name: React.ReactNode;
onClick: () => void;
onDoubleClick?: () => void;
objectClass?: string;
isSelected: boolean;
startIcon?: React.ReactNode | null;
endIcon?: React.ReactNode | null;
}
const SelectableItem: React.FC<SelectableItemParams> = ({
onClick,
onDoubleClick,
name = "default",
isSelected = false,
startIcon = null,
endIcon = null,
...props
}) => {
return (
<div
className={
"items-center w-full transition-colors duration-300 hover:bg-secondary hover:opacity-75 cursor-pointer py-3 " +
(isSelected ? "bg-accent" : "")
}
onClick={onClick}
onDoubleClick={onDoubleClick}
{...props}
>
<div className="flex flex-row justify-between items-center gap-2 px-4">
<div className="flex min-w-0 flex-1 flex-row items-center">
{startIcon && startIcon}
<div className="flex min-w-0 flex-1 flex-col">
<span className="block min-w-0 truncate text-sm">{name}</span>
</div>
</div>
{endIcon && (
<div className="flex shrink-0 items-center justify-end">
{endIcon}
</div>
)}
</div>
</div>
);
};
export { SelectableItem };
|