42 lines
1.3 KiB
TypeScript
42 lines
1.3 KiB
TypeScript
"use client";
|
|
|
|
import { memo } from "react";
|
|
import { NodeProps } from "reactflow";
|
|
import { Database } from "lucide-react";
|
|
import { CompactNodeShell } from "./CompactNodeShell";
|
|
import type { TableSourceNodeData } from "@/types/node-editor";
|
|
|
|
export const TableSourceNode = memo(({ data, selected }: NodeProps<TableSourceNodeData>) => {
|
|
const fieldCount = data.fields?.length || 0;
|
|
const summary = data.tableName
|
|
? `${data.tableName} (${fieldCount}개 필드)`
|
|
: "테이블을 선택해 주세요";
|
|
|
|
return (
|
|
<CompactNodeShell
|
|
color="#3B82F6"
|
|
label={data.displayName || data.tableName || "테이블 소스"}
|
|
summary={summary}
|
|
icon={<Database className="h-3.5 w-3.5" />}
|
|
selected={selected}
|
|
hasInput={false}
|
|
>
|
|
{fieldCount > 0 && (
|
|
<div className="space-y-0.5">
|
|
{data.fields!.slice(0, 4).map((f) => (
|
|
<div key={f.name} className="flex items-center gap-1.5">
|
|
<div className="h-1 w-1 flex-shrink-0 rounded-full bg-blue-400" />
|
|
<span>{f.label || f.displayName || f.name}</span>
|
|
</div>
|
|
))}
|
|
{fieldCount > 4 && (
|
|
<span className="text-zinc-600">외 {fieldCount - 4}개</span>
|
|
)}
|
|
</div>
|
|
)}
|
|
</CompactNodeShell>
|
|
);
|
|
});
|
|
|
|
TableSourceNode.displayName = "TableSourceNode";
|