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 | 26x 16x 16x 16x 16x 4x 44x 20x 6x 20x 6x 20x 22x 16x 16x 4x 4x 16x 20x 4x 16x 20x 4x 16x 20x 24x 58x 28x | import { DragPreviewImage, useDrag } from "react-dnd";
import type { FlowsheetRead } from "@/api/apiStore.gen";
import { useFlowsheetAccess } from "@/hooks/flowsheetAccess";
import { useCreateModuleFromTemplate } from "@/hooks/useTemplate";
import { cn } from "../../../../lib/utils";
interface TemplateCardProps {
template: FlowsheetRead;
}
export const TemplateCard: React.FC<TemplateCardProps> = ({ template }) => {
const { isLoading } = useCreateModuleFromTemplate();
const access = useFlowsheetAccess();
const isDisabled = isLoading || access?.can_edit === false;
const [{ isDragging }, drag, preview] = useDrag(
() => ({
type: "unit_operation",
item: {
unitOpType: "template_module",
templateId: template.id,
templateName: template.name,
},
canDrag: !isDisabled,
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}),
[isDisabled, template.id, template.name],
);
const image = new URL("/assets/UpdatedIcons/group.svg", import.meta.url).href;
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={"template-" + template.id}
aria-disabled={isDisabled}
// Helpful selectors for Playwright / drop handlers
aria-label={`Template-Card ${template.name}`}
>
<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 && "cursor-not-allowed opacity-60 pointer-events-none",
)}
>
<img
className="w-full h-full opacity-70"
src={image}
alt="package"
/>
</div>
<p className="text-center text-muted-foreground break-words w-full capitalizes">
{isLoading ? "Creating..." : template.name}
</p>
</div>
</div>
</>
);
};
|