Track HiveGrid Cloud planning reference

2026-06-26 20:48:01 +02:00
1 parent b3d5ea6764
commit e341c5938a
@@ -0,0 +1,133 @@
+"use client";
+/*
+ * Documentation:
+ * Progress — https://app.subframe.com/f023064a5ca0/library?component=Progress_60964db0-a1bf-428b-b9d5-f34cdf58ea77
+ */
+
+import React from "react";
+import * as SubframeCore from "@subframe/core";
+import * as SubframeUtils from "../../utils";
+
+export interface IndicatorProps
+  extends React.ComponentProps<typeof SubframeCore.Progress.Indicator> {
+  state?: "option-1" | "success" | "error";
+  className?: string;
+}
+
+const Indicator = React.forwardRef<HTMLDivElement, IndicatorProps>(
+  function Indicator(
+    { state = "option-1", className, ...otherProps }: IndicatorProps,
+    ref
+  ) {
+    return (
+      <SubframeCore.Progress.Indicator asChild={true} {...otherProps}>
+        <div
+          className={SubframeUtils.twClassNames(
+            "group/641ca690 flex h-1.5 w-full flex-col items-start gap-2 rounded-round bg-brand-brand-surface-solid-default transition-all",
+            {
+              "bg-surface-feedback-solid-negative-default": state === "error",
+              "bg-surface-feedback-solid-positive-default": state === "success",
+            },
+            className
+          )}
+          ref={ref}
+        />
+      </SubframeCore.Progress.Indicator>
+    );
+  }
+);
+
+export interface ProgressRootProps
+  extends React.ComponentProps<typeof SubframeCore.Progress.Root> {
+  state?: "uploading" | "success" | "error";
+  cardProgress?: boolean;
+  hideLabel?: boolean;
+  value?: number;
+  label?: React.ReactNode;
+  statusText?: React.ReactNode;
+  className?: string;
+}
+
+const ProgressRoot = React.forwardRef<HTMLDivElement, ProgressRootProps>(
+  function ProgressRoot(
+    {
+      state = "uploading",
+      cardProgress = false,
+      hideLabel = false,
+      value = 30,
+      label,
+      statusText,
+      className,
+      ...otherProps
+    }: ProgressRootProps,
+    ref
+  ) {
+    return (
+      <SubframeCore.Progress.Root asChild={true} value={value} {...otherProps}>
+        <div
+          className={SubframeUtils.twClassNames(
+            "group/60964db0 flex w-56 flex-col items-start gap-5",
+            { "flex-row items-center gap-2": cardProgress },
+            className
+          )}
+          ref={ref}
+        >
+          <div
+            className={SubframeUtils.twClassNames(
+              "flex w-full items-center justify-between",
+              { hidden: hideLabel || cardProgress }
+            )}
+          >
+            {label ? (
+              <span className="text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-primary">
+                {label}
+              </span>
+            ) : null}
+            {statusText ? (
+              <span
+                className={SubframeUtils.twClassNames(
+                  "text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-tertiary",
+                  {
+                    "text-text-feedback-negative": state === "error",
+                    "text-text-feedback-positive": state === "success",
+                  }
+                )}
+              >
+                {statusText}
+              </span>
+            ) : null}
+          </div>
+          <div className="flex w-full flex-col items-start gap-2 overflow-hidden rounded-round bg-surface-neutral-tertiary">
+            <Indicator
+              state={
+                state === "error"
+                  ? "error"
+                  : state === "success"
+                  ? "success"
+                  : undefined
+              }
+            />
+          </div>
+          {statusText ? (
+            <span
+              className={SubframeUtils.twClassNames(
+                "hidden text-body-small-medium-0 font-body-small-medium-0 text-text-neutral-tertiary",
+                {
+                  inline: cardProgress,
+                  "text-text-feedback-negative": state === "error",
+                  "text-text-feedback-positive": state === "success",
+                }
+              )}
+            >
+              {statusText}
+            </span>
+          ) : null}
+        </div>
+      </SubframeCore.Progress.Root>
+    );
+  }
+);
+
+export const Progress = Object.assign(ProgressRoot, {
+  Indicator,
+});
@@ -0,0 +1,10 @@
+"use client";
+import { Progress as ProgressComponent } from "./Progress";
+
+/**
+ * Add wrapper components and business logic here.
+ * If you modify this file, disable Subframe sync for it to prevent overwrites.
+ * Learn more: https://docs.subframe.com/concepts/syncing-components#wrapping-components
+ */
+
+export const Progress = ProgressComponent;