84 lines
2.5 KiB
JavaScript
84 lines
2.5 KiB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
|
|
import { c as cn } from "./utils-DLCPGU0v.js";
|
|
import "clsx";
|
|
import "tailwind-merge";
|
|
const StepCircle = ({ step, title }) => {
|
|
return /* @__PURE__ */ jsxs("div", { className: `relative flex items-center text-red-500 ${step}`, children: [
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: cn(
|
|
"h-4 w-4 rounded-full border-2 border-gray-300 transition duration-500 ease-in-out",
|
|
step === "active" && "border-orange-500",
|
|
step === "fill" && "border-orange-600 bg-orange-600"
|
|
)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(
|
|
"p",
|
|
{
|
|
className: cn(
|
|
"absolute top-0 -ml-14 mt-6 w-32 text-center text-xs font-medium uppercase text-gray-500",
|
|
(step === "active" || step === "fill") && "text-orange-500"
|
|
),
|
|
children: title
|
|
}
|
|
)
|
|
] });
|
|
};
|
|
const StepNavigator = (props) => {
|
|
const {
|
|
step1 = "",
|
|
step2 = "",
|
|
step3 = "",
|
|
step4 = "",
|
|
step5 = ""
|
|
} = props;
|
|
return /* @__PURE__ */ jsxs("div", { className: "mb-20 flex items-center px-6", children: [
|
|
/* @__PURE__ */ jsx(StepCircle, { step: step1, title: "SERVER" }),
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: cn(
|
|
"flex-auto border-t-2 border-gray-300 transition duration-500 ease-in-out",
|
|
(step2 === "active" || step2 === "fill") && "border-orange-600"
|
|
)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(StepCircle, { step: step2, title: "SETTINGS" }),
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: cn(
|
|
"flex-auto border-t-2 border-gray-300 transition duration-500 ease-in-out",
|
|
(step3 === "active" || step3 === "fill") && "border-orange-600"
|
|
)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(StepCircle, { step: step3, title: "DATABASE" }),
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: cn(
|
|
"flex-auto border-t-2 border-gray-300 transition duration-500 ease-in-out",
|
|
(step4 === "active" || step4 === "fill") && "border-orange-600"
|
|
)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(StepCircle, { step: step4, title: "ADMIN" }),
|
|
/* @__PURE__ */ jsx(
|
|
"div",
|
|
{
|
|
className: cn(
|
|
"flex-auto border-t-2 border-gray-300 transition duration-500 ease-in-out",
|
|
(step5 === "active" || step5 === "fill") && "border-orange-600"
|
|
)
|
|
}
|
|
),
|
|
/* @__PURE__ */ jsx(StepCircle, { step: step4, title: "FINISH" })
|
|
] });
|
|
};
|
|
export {
|
|
StepNavigator as default
|
|
};
|