salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

123

Browse Source
This commit is contained in:
Desktop
2025-11-12 22:17:37 +05:00
parent 7c48854e86
commit 883e4642dc
4 changed files with 18 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/dashboard/WorkflowPipeline.tsx
View File

@@ -1,4 +1,4 @@
import { ReactNode } from "react";
import React, { ReactNode } from "react";
import { Link } from "react-router";
import { CheckCircleIcon, TimeIcon, ArrowRightIcon } from "../../icons";
import { Tooltip } from "../ui/tooltip";
@@ -59,8 +59,8 @@ export default function WorkflowPipeline({
};
return (
<div className={`relative ${className}`}>
<div className="flex items-center justify-between gap-4 overflow-x-auto pb-4 scrollbar-hide">
<div className={`relative overflow-visible ${className}`}>
<div className="flex items-center justify-between gap-2 overflow-x-auto pb-4 scrollbar-hide">
<style>{`
.scrollbar-hide::-webkit-scrollbar {
display: none;
@@ -75,9 +75,9 @@ export default function WorkflowPipeline({
const nextStep = !isLast ? steps[index + 1] : null;
return (
<div key={step.number} className="flex items-center flex-shrink-0">
<React.Fragment key={step.number}>
{/* Step Node */}
<div className="flex flex-col items-center">
<div className="flex flex-col items-center flex-shrink-0">
<Tooltip
text={
step.details ||
@@ -149,13 +149,13 @@ export default function WorkflowPipeline({
{/* Connection Line */}
{!isLast && showConnections && (
<div className="flex items-center mx-2 flex-shrink-0">
<div className={`h-0.5 w-16 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
<ArrowRightIcon className={`size-4 ${step.status === "completed" ? "text-success-500" : "text-gray-400"} transition-colors duration-300`} />
<div className={`h-0.5 w-16 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
<div className="flex items-center flex-1 min-w-[60px] max-w-[120px] mx-1">
<div className={`h-0.5 flex-1 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
<ArrowRightIcon className={`size-4 mx-1 flex-shrink-0 ${step.status === "completed" ? "text-success-500" : "text-gray-400"} transition-colors duration-300`} />
<div className={`h-0.5 flex-1 ${getConnectionColor(step.status, nextStep?.status)} transition-colors duration-300`} />
</div>
)}
</div>
</React.Fragment>
);
})}
</div>