ValueOn AG
a13a158c67
Some checks failed
Deploy Nyla Frontend to Integration / deploy (push) Failing after 51s
64 lines
2 KiB
TypeScript
64 lines
2 KiB
TypeScript
/**
|
|
* NodeListItem - Draggable node type item for the sidebar.
|
|
* Used in both regular categories and I/O sub-groups.
|
|
*/
|
|
|
|
import React from 'react';
|
|
import type { NodeType } from '../../../api/workflowAutomationApi';
|
|
import { useLanguage } from '../../../providers/language/LanguageContext';
|
|
import { getCategoryIcon } from '../nodes/shared/utils';
|
|
import type { GetLabelFn } from '../nodes/shared/utils';
|
|
import styles from './WorkflowFlowEditor.module.css';
|
|
import { AiBadge } from '../nodes/shared/AiBadge';
|
|
|
|
interface NodeListItemProps {
|
|
node: NodeType;
|
|
language: string;
|
|
getLabel: GetLabelFn;
|
|
getCategoryIcon?: (categoryId: string) => React.ReactNode;
|
|
}
|
|
|
|
export const NodeListItem: React.FC<NodeListItemProps> = ({
|
|
node,
|
|
language,
|
|
getLabel,
|
|
getCategoryIcon: getIcon = getCategoryIcon,
|
|
}) => {
|
|
const { t } = useLanguage();
|
|
const desc = getLabel(node.description, language);
|
|
return (
|
|
<div
|
|
className={styles.nodeItem}
|
|
draggable
|
|
onDragStart={(e) => {
|
|
e.dataTransfer.setData('application/json', JSON.stringify({ type: node.id }));
|
|
e.dataTransfer.effectAllowed = 'copy';
|
|
}}
|
|
>
|
|
<div
|
|
className={styles.nodeItemIcon}
|
|
style={{
|
|
backgroundColor: node.meta?.color
|
|
? `${node.meta.color}20`
|
|
: 'var(--bg-tertiary, #e9ecef)',
|
|
color: node.meta?.color ?? 'var(--text-secondary, #666)',
|
|
}}
|
|
>
|
|
{getIcon(node.category)}
|
|
</div>
|
|
<div className={styles.nodeItemInfo}>
|
|
<span className={styles.nodeItemLabelRow}>
|
|
<span className={styles.nodeItemLabel}>{getLabel(node.label, language)}</span>
|
|
{node.meta?.usesAi === true && (
|
|
<AiBadge
|
|
variant="palette"
|
|
title={t('Dieser Schritt nutzt AI und verbraucht Credits')}
|
|
/>
|
|
)}
|
|
</span>
|
|
<span className={styles.nodeItemDesc}>{desc}</span>
|
|
</div>
|
|
{desc && <div className={styles.nodeItemTooltip}>{desc}</div>}
|
|
</div>
|
|
);
|
|
};
|