Function NewWorkflowUI

web/src/components/NewWorkflowUI.tsx:72–110

()

]

function NewWorkflowUI() {
    const getSettingsQuery = useQuery({
        queryKey: ['settings'],
        queryFn: async () => {
            const response = await fetch(`/api/settings`)
            const data = await response.json()
            return data as Settings
        },
    })

    if (getSettingsQuery.isError) {
        return <div>Something went wrong, please refresh the page.</div>
    }

    if (getSettingsQuery.isLoading || !getSettingsQuery.data) {
        return <div>Loading...</div>
    }

    return (
        <div className="flex flex-col p-10">
            <div>
                <h1 className="text-3xl font-semibold">New workflow</h1>
            </div>
            <div className="flex flex-col mt-10">
                <div>
                    <Masonry
                        itemKey={(item) => item.id}
                        columnGutter={20}
                        columnWidth={350}
                        items={workflowTemplates}
                        render={(props) => (
                            <WorkflowTemplate settings={getSettingsQuery.data} item={props.data} />
                        )}
                    />
                </div>
            </div>
        </div>
    )
}

export default NewWorkflowUI