certimate/ui/src/components/workflow/DeployPanelBody.tsx
2024-11-09 11:31:44 +08:00

59 lines
1.9 KiB
TypeScript

import { accessProviders } from "@/domain/access";
import { WorkflowNode } from "@/domain/workflow";
import { memo, useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import Show from "../Show";
import DeployForm from "./DeployForm";
import { DeployTarget, deployTargets } from "@/domain/domain";
type DeployPanelBodyProps = {
data: WorkflowNode;
};
const DeployPanelBody = ({ data }: DeployPanelBodyProps) => {
const { t } = useTranslation();
const [providerType, setProviderType] = useState("");
useEffect(() => {
if (data.config?.providerType) {
setProviderType(data.config.providerType as string);
}
}, [data]);
return (
<>
{/* 默认展示服务商列表 */}
<Show when={!providerType} fallback={<DeployForm data={data} defaultProivder={providerType} />}>
<div className="text-lg font-semibold text-gray-700"></div>
{deployTargets
.reduce((acc: DeployTarget[][], provider, index) => {
if (index % 2 === 0) {
acc.push([provider]);
} else {
acc[acc.length - 1].push(provider);
}
return acc;
}, [])
.map((providerRow, rowIndex) => (
<div key={rowIndex} className="flex space-x-5">
{providerRow.map((provider, index) => (
<div
key={index}
className="flex space-x-2 w-[47%] items-center cursor-pointer hover:bg-slate-100 p-2 rounded-sm"
onClick={() => {
setProviderType(provider.type);
}}
>
<img src={provider.icon} alt={provider.type} className="w-8 h-8" />
<div className="text-muted-foreground text-sm">{t(provider.name)}</div>
</div>
))}
</div>
))}
</Show>
</>
);
};
export default memo(DeployPanelBody);