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 | 33x 1471x | import * as React from "react";
import { CheckIcon } from "@/ahuora-design-system/componentIcons/CheckIcon";
import { AlertCircleIcon } from "@/ahuora-design-system/componentIcons/AlertCircleIcon";
/**
*
*/
interface SelectableItemParams {
name: string;
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 px-4">
<div className="flex flex-row items-center">
{startIcon && startIcon}
<div className="flex flex-col">
<p className="text-sm"> {name}</p>
</div>
</div>
{endIcon && (
<div className="flex items-center justify-end mr-4">
{" "}
{/* Ensures alignment at the end */}
{endIcon}
</div>
)}
</div>
</div>
);
};
export { SelectableItem };
|