Track HiveGrid Cloud planning reference

2026-06-26 20:48:01 +02:00
1 parent b3d5ea6764
commit e341c5938a
@@ -0,0 +1,113 @@
+"use client";
+/*
+ * Documentation:
+ * Stats Card — https://app.subframe.com/f023064a5ca0/library?component=Stats+Card_63f809c7-22ef-47f8-9fb9-0f33b252be3f
+ */
+
+import React from "react";
+import { FeatherArrowRight } from "@subframe/core";
+import { FeatherDollarSign } from "@subframe/core";
+import { FeatherTrendingDown } from "@subframe/core";
+import { FeatherTrendingUp } from "@subframe/core";
+import * as SubframeCore from "@subframe/core";
+import * as SubframeUtils from "../../utils";
+
+export interface StatsCardRootProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  trend?: "positive" | "negative" | "neutral";
+  label?: React.ReactNode;
+  value?: React.ReactNode;
+  percentage?: React.ReactNode;
+  comparisonText?: React.ReactNode;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+const StatsCardRoot = React.forwardRef<HTMLDivElement, StatsCardRootProps>(
+  function StatsCardRoot(
+    {
+      trend = "positive",
+      label,
+      value,
+      percentage,
+      comparisonText,
+      icon = <FeatherDollarSign />,
+      className,
+      ...otherProps
+    }: StatsCardRootProps,
+    ref
+  ) {
+    return (
+      <div
+        className={SubframeUtils.twClassNames(
+          "group/63f809c7 flex w-full cursor-pointer flex-col items-start gap-3 rounded-md border border-solid border-border-default bg-surface-neutral-primary px-4 py-4 hover:shadow-lg",
+          className
+        )}
+        ref={ref}
+        {...otherProps}
+      >
+        <div className="flex w-full flex-col items-start gap-5">
+          <div className="flex w-full items-center justify-between">
+            {label ? (
+              <span className="text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary">
+                {label}
+              </span>
+            ) : null}
+            {icon ? (
+              <SubframeCore.IconWrapper className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary">
+                {icon}
+              </SubframeCore.IconWrapper>
+            ) : null}
+          </div>
+          {value ? (
+            <span className="text-subtitle-0 font-subtitle-0 text-text-neutral-primary">
+              {value}
+            </span>
+          ) : null}
+          <div className="flex items-center gap-1">
+            <div className="flex items-center gap-2">
+              <FeatherTrendingDown
+                className={SubframeUtils.twClassNames(
+                  "hidden text-body-large-0 font-body-large-0 text-icon-feedback-negative",
+                  { "inline-flex": trend === "negative" }
+                )}
+              />
+              <FeatherArrowRight
+                className={SubframeUtils.twClassNames(
+                  "hidden text-body-large-0 font-body-large-0 text-icon-neutral-tertiary",
+                  { "inline-flex": trend === "neutral" }
+                )}
+              />
+              <FeatherTrendingUp
+                className={SubframeUtils.twClassNames(
+                  "text-body-large-0 font-body-large-0 text-icon-feedback-positive",
+                  { hidden: trend === "neutral" || trend === "negative" }
+                )}
+              />
+              {percentage ? (
+                <span
+                  className={SubframeUtils.twClassNames(
+                    "text-body-small-regular-0 font-body-small-regular-0 text-text-feedback-positive",
+                    {
+                      "text-text-feedback-neutral": trend === "neutral",
+                      "text-text-feedback-negative": trend === "negative",
+                    }
+                  )}
+                >
+                  {percentage}
+                </span>
+              ) : null}
+            </div>
+            {comparisonText ? (
+              <span className="text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary">
+                {comparisonText}
+              </span>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+export const StatsCard = StatsCardRoot;
@@ -0,0 +1,10 @@
+"use client";
+import { StatsCard as StatsCardComponent } from "./StatsCard";
+
+/**
+ * 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 StatsCard = StatsCardComponent;