diff --git a/.vscode/settings.json b/.vscode/settings.json index 42fc89b..3dcc82a 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,6 +7,8 @@ "oneditprepare", "oneditresize", "oneditsave", + "onpaletteadd", + "onpaletteremove", "projectstorm", "ptype", "PWRD" diff --git a/README.md b/README.md index 1e1d706..9639965 100644 --- a/README.md +++ b/README.md @@ -208,12 +208,11 @@ The backlog is organized by epic, with each task having a unique ID, description ### Scrum Board -| To Do | In Progress | In Review | Done | -| ----- | ----------- | --------- | ---- | -| SF-01 | | | | -| SF-02 | | | | -| SF-03 | | | | -| SF-04 | | | | +| To Do | In Progress | In Review | Done | +| ----- | ----------- | --------- | ----- | +| SF-01 | | | SF-04 | +| SF-02 | | | | +| SF-03 | | | | ### Progress Tracking diff --git a/packages/flow-client/src/app/components/builder/node-editor.tsx b/packages/flow-client/src/app/components/builder/node-editor.tsx index 9c1648f..2f0c71f 100644 --- a/packages/flow-client/src/app/components/builder/node-editor.tsx +++ b/packages/flow-client/src/app/components/builder/node-editor.tsx @@ -20,9 +20,9 @@ import redTypedInputCssUrl from '../../red/red-typed-input.css?url'; import { FlowNodeEntity, flowActions, - selectEntityById, + selectFlowNodeById, } from '../../redux/modules/flow/flow.slice'; -import { selectNodeById } from '../../redux/modules/node/node.slice'; +import { selectPaletteNodeById } from '../../redux/modules/palette/node.slice'; import environment from '../../../environment'; const StyledEditor = styled.div` @@ -187,10 +187,10 @@ export const NodeEditor = () => { ); const editing = useAppSelector(selectEditing); const editingNode = useAppSelector(state => - selectEntityById(state, editing ?? '') + selectFlowNodeById(state, editing ?? '') ) as FlowNodeEntity; const editingNodeEntity = useAppSelector(state => - selectNodeById(state, editingNode?.type) + selectPaletteNodeById(state, editingNode?.type) ); const propertiesFormRefCallback = useCallback( @@ -251,7 +251,7 @@ export const NodeEditor = () => { (propertiesForm?.getRootNode() as ShadowRoot) ?? undefined ); // TODO: Implement logic method for removing any old input links (if necessary) - dispatch(flowActions.removeEntity(editingNode.id)); + dispatch(flowActions.removeFlowNode(editingNode.id)); closeEditor(); }, [ closeEditor, @@ -321,7 +321,7 @@ export const NodeEditor = () => { }); } // update node - dispatch(flowLogic.updateFlowNode(editingNode.id, nodeUpdates)); + dispatch(flowLogic.node.updateFlowNode(editingNode.id, nodeUpdates)); // close editor closeEditor(); }, [ diff --git a/packages/flow-client/src/app/components/builder/tab-manager.tsx b/packages/flow-client/src/app/components/builder/tab-manager.tsx index 2a9e290..2e4ad02 100644 --- a/packages/flow-client/src/app/components/builder/tab-manager.tsx +++ b/packages/flow-client/src/app/components/builder/tab-manager.tsx @@ -11,11 +11,8 @@ import { selectOpenFlows, } from '../../redux/modules/builder/builder.slice'; import { - FlowEntity, - SubflowEntity, flowActions, - selectFlows, - selectSubflows, + selectFlowEntities, } from '../../redux/modules/flow/flow.slice'; import { FlowCanvas } from '../flow-canvas/flow-canvas'; @@ -126,8 +123,7 @@ const StyledTabManager = styled.div` export const TabManager = () => { const dispatch = useDispatch(); - const flows = useAppSelector(selectFlows); - const subflows = useAppSelector(selectSubflows); + const flowEntities = useAppSelector(selectFlowEntities); const openFlows = useAppSelector(selectOpenFlows); const activeFlow = useAppSelector(selectActiveFlow); const flowCounter = useAppSelector(selectNewFlowCounter); @@ -151,17 +147,16 @@ export const TabManager = () => { const createNewTab = useCallback(() => { const flowId = uuidv4(); dispatch( - flowActions.addEntity({ + flowActions.addFlowEntity({ id: flowId, - type: 'tab', - label: `New Flow${flowCounter ? ` ${flowCounter}` : ''}`, + type: 'flow', + name: `New Flow${flowCounter ? ` ${flowCounter}` : ''}`, disabled: false, info: '', env: [], }) ); dispatch(builderActions.addNewFlow(flowId)); - dispatch(builderActions.openFlow(flowId)); dispatch(builderActions.setActiveFlow(flowId)); }, [dispatch, flowCounter]); @@ -187,38 +182,32 @@ export const TabManager = () => { ref={tabContentRef} >
- {openFlows.map(flowId => { - const flowOrSubflow = [...flows, ...subflows].find( - it => it.id === flowId - ); - const name = - (flowOrSubflow as SubflowEntity)?.name ?? - (flowOrSubflow as FlowEntity)?.label ?? - '...'; - return ( + {openFlows + .map(flowId => flowEntities[flowId]) + .filter(it => it) + .map(flowEntity => (
switchTab(flowId)} + onClick={() => switchTab(flowEntity.id)} > -

{name}

+

{flowEntity.name}

{ e.stopPropagation(); // Prevent tab switch when closing - closeTab(flowId); + closeTab(flowEntity.id); }} >
- ); - })} + ))}
diff --git a/packages/flow-client/src/app/components/flow-canvas/engine.ts b/packages/flow-client/src/app/components/flow-canvas/engine.ts index 200835e..ae54fe0 100644 --- a/packages/flow-client/src/app/components/flow-canvas/engine.ts +++ b/packages/flow-client/src/app/components/flow-canvas/engine.ts @@ -17,9 +17,9 @@ import { } from '@projectstorm/react-diagrams'; import { DropTargetMonitor } from 'react-dnd'; +import { SerializedGraph } from '../../redux/modules/flow/graph.logic'; import { CustomDiagramModel } from './model'; import { CustomNodeFactory } from './node'; -import { SerializedGraph } from '../../redux/modules/flow/flow.logic'; export class CustomEngine extends DiagramEngine { constructor(options?: CanvasEngineOptions) { @@ -201,7 +201,7 @@ export const createEngine = (options = {}) => { engine.getLinkFactories().registerFactory(new DefaultLinkFactory()); engine.getLinkFactories().registerFactory(new PathFindingLinkFactory()); engine.getPortFactories().registerFactory(new DefaultPortFactory()); - // register the default interaction behaviours + // register the default interaction behaviors engine.getStateMachine().pushState(new DefaultDiagramState()); return engine; }; diff --git a/packages/flow-client/src/app/components/flow-canvas/flow-canvas.tsx b/packages/flow-client/src/app/components/flow-canvas/flow-canvas.tsx index 43e2d41..1539635 100644 --- a/packages/flow-client/src/app/components/flow-canvas/flow-canvas.tsx +++ b/packages/flow-client/src/app/components/flow-canvas/flow-canvas.tsx @@ -16,9 +16,13 @@ import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; import { useAppDispatch, useAppLogic, useAppSelector } from '../../redux/hooks'; -import { SerializedGraph } from '../../redux/modules/flow/flow.logic'; -import { selectAllEntities } from '../../redux/modules/flow/flow.slice'; -import { NodeEntity } from '../../redux/modules/node/node.slice'; +import { + selectAllDirectories, + selectAllFlowEntities, + selectAllFlowNodes, +} from '../../redux/modules/flow/flow.slice'; +import { SerializedGraph } from '../../redux/modules/flow/graph.logic'; +import { PaletteNodeEntity } from '../../redux/modules/palette/node.slice'; import { ItemTypes } from '../node/draggable-item-types'; // Assuming ItemTypes is defined elsewhere import { createEngine } from './engine'; import { CustomDiagramModel } from './model'; @@ -98,11 +102,13 @@ const debounce = (func: (...args: unknown[]) => void, wait: number) => { }; const LogFlowSlice = () => { - const flowSlice = useAppSelector(selectAllEntities); + const flowEntities = useAppSelector(selectAllFlowEntities); + const flowNodes = useAppSelector(selectAllFlowNodes); + const directories = useAppSelector(selectAllDirectories); useEffect(() => { - console.log('Flow state: ', flowSlice); - }, [flowSlice]); + console.log('Flow state: ', { flowEntities, flowNodes, directories }); + }, [flowEntities, flowNodes, directories]); return null; // This component does not render anything }; @@ -145,7 +151,10 @@ export const FlowCanvas: React.FC = ({ flowId }) => { }, [flowId, engine]); const serializedGraph = useAppSelector(state => - flowLogic.selectSerializedGraphByFlowId(state, model?.getID() ?? '') + flowLogic.graph.selectSerializedGraphByFlowId( + state, + model?.getID() ?? '' + ) ); const registerModelChangeListener = useCallback(() => { @@ -160,7 +169,9 @@ export const FlowCanvas: React.FC = ({ flowId }) => { const serializedModel = model.serialize() as unknown as SerializedGraph; // Dispatch an action to update the Redux state with the serialized model - dispatch(flowLogic.updateFlowFromSerializedGraph(serializedModel)); + dispatch( + flowLogic.graph.updateFlowFromSerializedGraph(serializedModel) + ); }, 500); // Register event listeners and store the handle in the ref @@ -250,7 +261,7 @@ export const FlowCanvas: React.FC = ({ flowId }) => { const [, drop] = useDrop(() => ({ accept: ItemTypes.NODE, - drop: (entity: NodeEntity, monitor) => { + drop: (entity: PaletteNodeEntity, monitor) => { // Find the canvas widget element const canvasElement = document.querySelector( '.flow-canvas > svg' @@ -302,7 +313,7 @@ export const FlowCanvas: React.FC = ({ flowId }) => { node.setPosition(nodePosition); - const ports = flowLogic.getNodeInputsOutputs(config, entity); + const ports = flowLogic.node.getNodeInputsOutputs(config, entity); ports.inputs.forEach(input => { node.addPort( new DefaultPortModel({ diff --git a/packages/flow-client/src/app/components/flow-canvas/node.tsx b/packages/flow-client/src/app/components/flow-canvas/node.tsx index 9bd92bf..c9ead0c 100644 --- a/packages/flow-client/src/app/components/flow-canvas/node.tsx +++ b/packages/flow-client/src/app/components/flow-canvas/node.tsx @@ -12,10 +12,10 @@ import styled from 'styled-components'; import { useAppDispatch } from '../../redux/hooks'; import { builderActions } from '../../redux/modules/builder/builder.slice'; -import { NodeEntity } from '../../redux/modules/node/node.slice'; import NodeRedNode from '../node/node-red-node'; import { CustomEngine } from './engine'; import { FlowNodeEntity } from '../../redux/modules/flow/flow.slice'; +import { PaletteNodeEntity } from '../../redux/modules/palette/node.slice'; // Styled components for the node and its elements const StyledNode = styled.div<{ @@ -198,7 +198,7 @@ export const Node: React.FC = ({ node, engine }) => { dispatch(builderActions.setEditing(node.getID())); }; - const entity = node.entity ?? ({} as NodeEntity); + const entity = node.entity ?? ({} as PaletteNodeEntity); return ( = ({ node, engine }) => { // Assuming createCustomNodeModel exists, and you're adding to this file export class CustomNodeModel extends DefaultNodeModel { - public entity?: NodeEntity; + public entity?: PaletteNodeEntity; public config?: FlowNodeEntity; constructor(options: { extras: { - entity: NodeEntity; + entity: PaletteNodeEntity; config: FlowNodeEntity; [index: string]: unknown; }; diff --git a/packages/flow-client/src/app/components/flow-tree/flow-tree.tsx b/packages/flow-client/src/app/components/flow-tree/flow-tree.tsx index 20ed2e9..92d7924 100644 --- a/packages/flow-client/src/app/components/flow-tree/flow-tree.tsx +++ b/packages/flow-client/src/app/components/flow-tree/flow-tree.tsx @@ -9,8 +9,8 @@ import { selectNewFlowCounter, selectNewFolderCounter, } from '../../redux/modules/builder/builder.slice'; -import { TreeItemData } from '../../redux/modules/flow/flow.logic'; import { flowActions } from '../../redux/modules/flow/flow.slice'; +import { TreeItemData } from '../../redux/modules/flow/tree.logic'; import { TreeItem } from './tree-item'; const StyledFlowTree = styled.div` @@ -49,7 +49,7 @@ const StyledFlowTree = styled.div` export const FlowTree = () => { const dispatch = useAppDispatch(); const flowLogic = useAppLogic().flow; - const { tree, items } = useAppSelector(flowLogic.selectFlowTree); + const { tree, items } = useAppSelector(flowLogic.tree.selectFlowTree); const activeFlow = useAppSelector(selectActiveFlow); const flowCounter = useAppSelector(selectNewFlowCounter); const folderCounter = useAppSelector(selectNewFolderCounter); @@ -74,7 +74,7 @@ export const FlowTree = () => { const handleNewFolder = useCallback(() => { const folderId = uuidv4(); dispatch( - flowActions.addEntity({ + flowActions.addDirectory({ id: folderId, type: 'directory', name: `New Folder ${folderCounter}`, @@ -89,10 +89,10 @@ export const FlowTree = () => { const flowId = uuidv4(); dispatch( - flowActions.addEntity({ + flowActions.addFlowEntity({ id: flowId, - type: 'tab', - label: `New Flow${flowCounter ? ` ${flowCounter}` : ''}`, + type: 'flow', + name: `New Flow${flowCounter ? ` ${flowCounter}` : ''}`, disabled: false, info: '', env: [], @@ -100,7 +100,6 @@ export const FlowTree = () => { }) ); dispatch(builderActions.addNewFlow(flowId)); - dispatch(builderActions.openFlow(flowId)); dispatch(builderActions.setActiveFlow(flowId)); }, [dispatch, flowCounter, getSelectedDirectory]); diff --git a/packages/flow-client/src/app/components/flow-tree/tree-item.tsx b/packages/flow-client/src/app/components/flow-tree/tree-item.tsx index 2683608..c6c3476 100644 --- a/packages/flow-client/src/app/components/flow-tree/tree-item.tsx +++ b/packages/flow-client/src/app/components/flow-tree/tree-item.tsx @@ -8,21 +8,21 @@ import React, { useState, } from 'react'; import { useDrag, useDrop } from 'react-dnd'; -import { Tooltip } from 'react-tooltip'; -import styled from 'styled-components'; import ReactDOM from 'react-dom'; import { useDispatch } from 'react-redux'; +import { Tooltip } from 'react-tooltip'; +import styled from 'styled-components'; import { useAppLogic, useAppSelector } from '../../redux/hooks'; import { builderActions, selectNewTreeItem, } from '../../redux/modules/builder/builder.slice'; +import { flowActions } from '../../redux/modules/flow/flow.slice'; import { TreeDirectory, TreeItemData, -} from '../../redux/modules/flow/flow.logic'; -import { FlowEntity, flowActions } from '../../redux/modules/flow/flow.slice'; +} from '../../redux/modules/flow/tree.logic'; import { RenameForm } from './rename-form'; const StyledTreeItem = styled.div<{ level: number }>` @@ -117,6 +117,14 @@ const StyledTooltip = styled(Tooltip)` const TreeItemType = 'TREE_ITEM'; +const usePrevious = (value: T) => { + const ref = useRef(value); + useEffect(() => { + ref.current = value; + }, [value]); + return ref.current; +}; + export type TreeItemProps = { selectedItem?: TreeItemData; item: TreeItemData; @@ -142,7 +150,7 @@ export const TreeItem = ({ const isSelected = selectedItem?.id === item.id; const canDelete = item.type !== 'directory' || - (!item.children.length && !flowLogic.directoryIsDefault(item)); + (!item.children.length && !flowLogic.tree.directoryIsDefault(item)); const treeItemId = `tree-item-${item.id.replaceAll(/[/\s]/g, '-')}`; const [{ isDragging }, drag] = useDrag( @@ -170,17 +178,20 @@ export const TreeItem = ({ }, drop: draggedItem => { // Handle the drop logic here, e.g., moving the dragged item into this item's children + const actionPayload = { + id: draggedItem.id, + changes: { + directory: flowLogic.tree.directoryIsDefault( + item as TreeDirectory + ) + ? undefined + : item.id, + }, + }; dispatch( - flowActions.updateEntity({ - id: draggedItem.id, - changes: { - directory: flowLogic.directoryIsDefault( - item as TreeDirectory - ) - ? undefined - : item.id, - }, - }) + draggedItem.type === 'directory' + ? flowActions.updateDirectory(actionPayload) + : flowActions.updateFlowEntity(actionPayload) ); return draggedItem; }, @@ -208,7 +219,6 @@ export const TreeItem = ({ if (item.type === 'directory') { setIsCollapsed(!isCollapsed); } else { - dispatch(builderActions.openFlow(item.id)); dispatch(builderActions.setActiveFlow(item.id)); } @@ -243,25 +253,22 @@ export const TreeItem = ({ return; } - const changes = { - name: newName, - label: newName, - } as Partial; - - if (item.id === item.name) { - changes.id = newName; - } + const actionPayload = { + id: item.id, + changes: { + name: newName, + }, + }; dispatch( - flowActions.updateEntity({ - id: item.id, - changes, - }) + item.type === 'directory' + ? flowActions.updateDirectory(actionPayload) + : flowActions.updateFlowEntity(actionPayload) ); stopRename(); }, - [isRenaming, item.id, item.name, dispatch, stopRename] + [isRenaming, item.id, item.type, dispatch, stopRename] ); const handleDeleteClick = useCallback( @@ -282,10 +289,14 @@ export const TreeItem = ({ clearTimeout(deleteConfirmTimeout.current); deleteConfirmTimeout.current = null; } - dispatch(flowActions.removeEntity(item.id)); + dispatch( + item.type === 'directory' + ? flowActions.removeDirectory(item.id) + : flowActions.removeFlowEntity(item.id) + ); } }, - [canDelete, dispatch, isDeleteConfirming, item.id] + [canDelete, dispatch, isDeleteConfirming, item.id, item.type] ); const handleNameKeydown = useCallback( @@ -306,7 +317,9 @@ export const TreeItem = ({ } if ( - selectedItem?.directoryPath.startsWith(flowLogic.getFilePath(item)) + selectedItem?.directoryPath.startsWith( + flowLogic.tree.getFilePath(item) + ) ) { setIsCollapsed(false); } @@ -328,12 +341,18 @@ export const TreeItem = ({ // open when a child is added const numberChildren = item.type === 'directory' ? (item as TreeDirectory).children.length : 0; + const prevNumberChildren = usePrevious(numberChildren); useEffect(() => { + if (numberChildren <= prevNumberChildren) { + return; + } + if (item.type !== 'directory') { return; } + setIsCollapsed(false); - }, [item.type, numberChildren]); + }, [item.type, numberChildren, prevNumberChildren]); // scroll to when we become selected useEffect(() => { @@ -390,7 +409,7 @@ export const TreeItem = ({

; + nodes: Array; }; const StyledCategory = styled.div` diff --git a/packages/flow-client/src/app/components/node-palette/draggable-node-wrapper.tsx b/packages/flow-client/src/app/components/node-palette/draggable-node-wrapper.tsx index b57e115..5539b19 100644 --- a/packages/flow-client/src/app/components/node-palette/draggable-node-wrapper.tsx +++ b/packages/flow-client/src/app/components/node-palette/draggable-node-wrapper.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { useDrag } from 'react-dnd'; -import { NodeEntity } from '../../redux/modules/node/node.slice'; import { ItemTypes } from '../node/draggable-item-types'; // Adjust the path as necessary +import { PaletteNodeEntity } from '../../redux/modules/palette/node.slice'; export type DraggableNodeWrapperProps = { - node: NodeEntity; + node: PaletteNodeEntity; children: React.ReactNode; }; diff --git a/packages/flow-client/src/app/components/node-palette/node-list.tsx b/packages/flow-client/src/app/components/node-palette/node-list.tsx index fa41073..1fd8752 100644 --- a/packages/flow-client/src/app/components/node-palette/node-list.tsx +++ b/packages/flow-client/src/app/components/node-palette/node-list.tsx @@ -1,10 +1,11 @@ import React from 'react'; import styled from 'styled-components'; -import { NodeEntity } from '../../redux/modules/node/node.slice'; + +import { PaletteNodeEntity } from '../../redux/modules/palette/node.slice'; import Category from './category'; // Ensure this is correctly imported export type NodeListProps = { - nodes: Array; + nodes: Array; }; const StyledNodeList = styled.div` @@ -20,7 +21,7 @@ const StyledNodeList = styled.div` export const NodeList: React.FC = ({ nodes }) => { // Example categorization logic (you'll need to adjust this based on your actual data structure) - const categories = nodes.reduce>>( + const categories = nodes.reduce>>( (acc, node) => { const category = node.category || 'Other'; // Now using 'category' field if (!acc[category]) { diff --git a/packages/flow-client/src/app/components/node-palette/node-palette.tsx b/packages/flow-client/src/app/components/node-palette/node-palette.tsx index df433a8..da45920 100644 --- a/packages/flow-client/src/app/components/node-palette/node-palette.tsx +++ b/packages/flow-client/src/app/components/node-palette/node-palette.tsx @@ -2,9 +2,9 @@ import styled from 'styled-components'; import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { - nodeActions, + paletteNodeActions, selectFilteredNodes, -} from '../../redux/modules/node/node.slice'; +} from '../../redux/modules/palette/node.slice'; import NodeList from './node-list'; import SearchBar from './search-bar'; @@ -35,7 +35,7 @@ export const NodePalette = () => { const nodes = useAppSelector(selectFilteredNodes); const handleSearch = (query: string) => { - dispatch(nodeActions.setSearchQuery(query)); + dispatch(paletteNodeActions.setSearchQuery(query)); }; return ( diff --git a/packages/flow-client/src/app/components/node-palette/node.tsx b/packages/flow-client/src/app/components/node-palette/node.tsx index feca255..cf0a96c 100644 --- a/packages/flow-client/src/app/components/node-palette/node.tsx +++ b/packages/flow-client/src/app/components/node-palette/node.tsx @@ -1,15 +1,15 @@ import React from 'react'; import styled from 'styled-components'; -import { NodeEntity } from '../../redux/modules/node/node.slice'; +import { PaletteNodeEntity } from '../../redux/modules/palette/node.slice'; import NodeRedNode from '../node/node-red-node'; export type NodeProps = { - node: NodeEntity; // Extend this interface based on your node's properties + node: PaletteNodeEntity; // Extend this interface based on your node's properties }; // Styled component for the node item -const StyledNodeItem = styled.li<{ node: NodeEntity }>` +const StyledNodeItem = styled.li<{ node: PaletteNodeEntity }>` &.node-item { } `; diff --git a/packages/flow-client/src/app/components/node/node-red-node.tsx b/packages/flow-client/src/app/components/node/node-red-node.tsx index 652ef90..4329dc4 100644 --- a/packages/flow-client/src/app/components/node/node-red-node.tsx +++ b/packages/flow-client/src/app/components/node/node-red-node.tsx @@ -1,11 +1,11 @@ import styled from 'styled-components'; -import { NodeEntity } from '../../redux/modules/node/node.slice'; import environment from '../../../environment'; import { FlowNodeEntity } from '../../redux/modules/flow/flow.slice'; +import { PaletteNodeEntity } from '../../redux/modules/palette/node.slice'; // Styled component for the node item -const StyledNode = styled.div<{ node: NodeEntity }>` +const StyledNode = styled.div<{ node: PaletteNodeEntity }>` align-items: center; background-color: ${props => props.node.color ? props.node.color : '#fff'}; @@ -30,7 +30,7 @@ const StyledNode = styled.div<{ node: NodeEntity }>` `; export type NodeRedNodeProps = { - entity: NodeEntity; + entity: PaletteNodeEntity; instance?: FlowNodeEntity; children?: React.ReactNode; }; diff --git a/packages/flow-client/src/app/components/nx-welcome.tsx b/packages/flow-client/src/app/components/nx-welcome.tsx deleted file mode 100644 index 3a5360b..0000000 --- a/packages/flow-client/src/app/components/nx-welcome.tsx +++ /dev/null @@ -1,893 +0,0 @@ -/* - * * * * * * * * * * * * * * * * * * * * * * * * * * * * - This is a starter component and can be deleted. - * * * * * * * * * * * * * * * * * * * * * * * * * * * * - Delete this file and get started with your project! - * * * * * * * * * * * * * * * * * * * * * * * * * * * * - */ -export function NxWelcome({ title }: { title: string }) { - return ( - <> -