added marketing-building-blog-v1

src/modules/marketing/ui/components/flow/EmailNode.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { Handle, Position, type NodeProps } from "@xyflow/react";
+import { Gift } from "lucide-react";
+import { cn } from "@/src/lib/utils";
+import { emailConfigSchema, formatRewardValue } from "../../../lib/node-config";
+import type { EmailFlowNode } from "./flow-model";
+import { NODE_ICONS } from "./trigger-icons";
+
+const EmailNode = ({ data, selected }: NodeProps<EmailFlowNode>) => {
+  const parsed = emailConfigSchema.safeParse(data.config);
+  const config = parsed.success ? parsed.data : null;
+  const name = typeof data.config.name === "string" ? data.config.name : "";
+  const subject = typeof data.config.subject === "string" ? data.config.subject : "";
+  const Icon = NODE_ICONS.email;
+
+  return (
+    <div
+      className={cn(
+        "w-64 rounded-xl border bg-white p-3 shadow-sm",
+        selected
+          ? "border-gray-900 ring-2 ring-gray-900/10"
+          : config
+            ? "border-gray-200"
+            : "border-red-300"
+      )}
+    >
+      <Handle
+        type="target"
+        position={Position.Left}
+        className="size-3! border-2! border-white! bg-gray-900!"
+      />
+      <div className="flex items-start gap-2.5">
+        <span className="flex size-8 shrink-0 items-center justify-center rounded-lg bg-sky-100 text-sky-700">
+          <Icon className="size-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <p className="text-[11px] font-medium uppercase tracking-wide text-gray-400">E-Mail</p>
+          <p className="truncate text-sm font-semibold text-gray-900">{name || "Ohne Namen"}</p>
+          <p className="truncate text-xs text-gray-500">{subject || "Kein Betreff"}</p>
+        </div>
+      </div>
+      <div className="mt-2 flex items-center justify-between gap-2 text-xs">
+        {config?.reward ? (
+          <span className="inline-flex items-center gap-1 rounded-full bg-amber-50 px-2 py-0.5 text-amber-800">
+            <Gift className="size-3" />
+            {formatRewardValue(config.reward)} · {config.reward.validDays} Tage
+          </span>
+        ) : (
+          <span className={config ? "text-gray-400" : "text-red-600"}>
+            {config ? "Ohne Rabatt" : "Unvollständig"}
+          </span>
+        )}
+        <span className="text-gray-500">
+          {data.sent} verschickt
+          {config?.reward ? ` · ${data.redeemed} eingelöst` : ""}
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default EmailNode;