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 | 33x 14774x 14774x 1938x 21488x 14774x 14774x 14774x 14774x | import { useDrag, DragPreviewImage } from "react-dnd";
import { ObjectTypeEnum } from "../../../../api/apiStore.gen";
import { cn } from "../../../../lib/utils";
import objects from "@/data/objects.json";
interface objCardProps {
type: ObjectTypeEnum;
}
export const ObjectCard: React.FC<objCardProps> = (props: objCardProps) => {
const { type } = props;
const [{ isDragging }, drag, preview] = useDrag(
() => ({
type: "unit_operation",
item: { unitOpType: type }, // unit operation type
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}),
[],
);
const image = new URL(
"/assets/UpdatedIcons/" + type + ".svg",
import.meta.url,
).href;
const isDisabled = [
ObjectTypeEnum.RctBio,
ObjectTypeEnum.RctChem,
ObjectTypeEnum.Filter,
ObjectTypeEnum.ComponentSeparator,
ObjectTypeEnum.SepCol,
].includes(type);
const displayType = objects[type].displayType;
return (
<>
<DragPreviewImage connect={preview} src={image} />
<div
ref={drag}
className={cn("w-24 m-0", isDisabled && "pointer-events-none")}
style={{ opacity: isDragging ? 0.5 : 1 }}
id={"new-" + type}
>
<div className="flex flex-col items-center gap-1 justify-center pb-2">
<div
className={cn(
"w-20 h-20 border-2 border-border p-4 rounded-lg bg-white",
isDisabled && "opacity-20 pointer-events-none",
)}
>
<img className="w-full h-full" src={image} alt={type} />
</div>
<p className="text-center text-muted-foreground break-words w-full capitalizes">
{displayType}
</p>
</div>
</div>
</>
);
};
|