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 | 33x 35x 35x 7x 66x 35x 35x | import { useDrag, DragPreviewImage } from "react-dnd";
import { cn } from "../../../../lib/utils";
import { useCreateModuleFromTemplate } from "@/hooks/useTemplate";
interface TemplateCardProps {
template: any;
}
export const TemplateCard: React.FC<TemplateCardProps> = ({ template }) => {
const { isLoading } = useCreateModuleFromTemplate();
const [{ isDragging }, drag, preview] = useDrag(
() => ({
type: "unit_operation",
item: {
unitOpType: "template_module",
templateId: template.id,
templateName: template.name,
},
collect: (monitor) => ({
isDragging: !!monitor.isDragging(),
}),
}),
[template.id]
);
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", isLoading && "pointer-events-none")}
style={{ opacity: isDragging ? 0.5 : 1 }}
id={"template-" + template.id}
// 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",
isLoading && "opacity-20 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>
</>
);
};
|