51 lines
1.6 KiB
TypeScript
51 lines
1.6 KiB
TypeScript
"use client";
|
|
|
|
import { Handle, Position, type Node, type NodeProps } from "@xyflow/react";
|
|
|
|
import BaseNodeWrapper from "./base-node-wrapper";
|
|
|
|
export type CompareNodeData = {
|
|
leftUrl?: string;
|
|
rightUrl?: string;
|
|
};
|
|
|
|
export type CompareNode = Node<CompareNodeData, "compare">;
|
|
|
|
export default function CompareNode({ data, selected }: NodeProps<CompareNode>) {
|
|
return (
|
|
<BaseNodeWrapper selected={selected} className="w-[500px] p-2">
|
|
<div className="mb-1 text-xs font-medium text-muted-foreground">Vergleich</div>
|
|
<div className="flex h-40 gap-2">
|
|
<div className="flex flex-1 items-center justify-center rounded bg-muted text-xs text-muted-foreground">
|
|
{data.leftUrl ? (
|
|
<img src={data.leftUrl} alt="Bild A" className="h-full w-full rounded object-cover" />
|
|
) : (
|
|
"Bild A"
|
|
)}
|
|
</div>
|
|
<div className="flex flex-1 items-center justify-center rounded bg-muted text-xs text-muted-foreground">
|
|
{data.rightUrl ? (
|
|
<img src={data.rightUrl} alt="Bild B" className="h-full w-full rounded object-cover" />
|
|
) : (
|
|
"Bild B"
|
|
)}
|
|
</div>
|
|
</div>
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
id="left"
|
|
className="!h-3 !w-3 !border-2 !border-background !bg-primary"
|
|
style={{ top: "40%" }}
|
|
/>
|
|
<Handle
|
|
type="target"
|
|
position={Position.Left}
|
|
id="right"
|
|
className="!h-3 !w-3 !border-2 !border-background !bg-primary"
|
|
style={{ top: "60%" }}
|
|
/>
|
|
</BaseNodeWrapper>
|
|
);
|
|
}
|