@loafmarkets/ui 0.1.76 → 0.1.78

package/dist/index.mjs

@@ -2930,7 +2930,7 @@ var PropertyNewsUpdates = React5.forwardRef(
               "LIVE"
             ] }) : null
           ] }),
-          isHomeVariant && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 0, marginTop: "0.75rem", marginBottom: "0.25rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsx(
+          isHomeVariant && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: "1.5rem", marginTop: "0.5rem", marginBottom: "1rem", borderBottom: "1px solid rgba(255, 255, 255, 0.08)", paddingBottom: "0.5rem" }, children: ["all", "property", "market"].map((tab) => /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
@@ -2939,7 +2939,8 @@ var PropertyNewsUpdates = React5.forwardRef(
                 background: "transparent",
                 border: "none",
                 borderBottom: homeTab === tab ? "2px solid var(--color-accent, #f0b90b)" : "2px solid transparent",
-                padding: "0.5rem 0.75rem",
+                padding: "0 0 0.5rem 0",
+                marginBottom: "-1px",
                 fontSize: "0.75rem",
                 fontWeight: homeTab === tab ? 600 : 400,
                 color: homeTab === tab ? "var(--color-text, #fff)" : "var(--color-text-secondary, #848e9c)",
@@ -9707,6 +9708,90 @@ function OfferingProgressCard({
       ] })
     ] });
   }
+  if (variant === "home") {
+    const isPreLive = !ipoStarted && ipoStatus !== "CLOSED" && ipoStatus !== "CANCELLED";
+    return /* @__PURE__ */ jsxs(Container, { style, className, children: [
+      /* @__PURE__ */ jsxs(Header2, { children: [
+        /* @__PURE__ */ jsxs("h3", { children: [
+          /* @__PURE__ */ jsx(FaChartLine, {}),
+          " Offering Progress"
+        ] }),
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStarted ? /* @__PURE__ */ jsxs(StatusSpan, { $color: "#0ecb81", children: [
+          /* @__PURE__ */ jsx(StatusDot, { $color: "#0ecb81", $pulse: true }),
+          "LIVE"
+        ] }) : /* @__PURE__ */ jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
+          /* @__PURE__ */ jsx(StatusDot, { $color: statusColor || "#D4AF37" }),
+          statusLabel || "Preparing"
+        ] }) })
+      ] }),
+      isPreLive ? /* @__PURE__ */ jsxs(HomePreLiveRow, { children: [
+        countdown ? /* @__PURE__ */ jsxs(HomeCountdownSide, { children: [
+          /* @__PURE__ */ jsx(CountdownLabel, { children: "Opens In" }),
+          /* @__PURE__ */ jsxs(CountdownDigits, { children: [
+            /* @__PURE__ */ jsx(CountdownNumber, { children: String(countdown.days).padStart(2, "0") }),
+            /* @__PURE__ */ jsx(CountdownUnitLabel, { children: "D" }),
+            /* @__PURE__ */ jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsx(CountdownNumber, { children: String(countdown.hours).padStart(2, "0") }),
+            /* @__PURE__ */ jsx(CountdownUnitLabel, { children: "H" }),
+            /* @__PURE__ */ jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsx(CountdownNumber, { children: String(countdown.minutes).padStart(2, "0") }),
+            /* @__PURE__ */ jsx(CountdownUnitLabel, { children: "M" }),
+            /* @__PURE__ */ jsx(CountdownSeparator, { children: ":" }),
+            /* @__PURE__ */ jsx(CountdownNumber, { children: String(countdown.seconds).padStart(2, "0") }),
+            /* @__PURE__ */ jsx(CountdownUnitLabel, { children: "S" })
+          ] })
+        ] }) : /* @__PURE__ */ jsx(HomeCountdownSide, { children: /* @__PURE__ */ jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }) }),
+        /* @__PURE__ */ jsxs(HomeUnitsSide, { children: [
+          /* @__PURE__ */ jsx(HomeUnitsLabel, { children: "Units Subscribed" }),
+          /* @__PURE__ */ jsxs(HomeUnitsValue, { children: [
+            /* @__PURE__ */ jsx(HomeSpinner, {}),
+            /* @__PURE__ */ jsxs("span", { children: [
+              " / ",
+              supplyToSell.toLocaleString()
+            ] })
+          ] })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs(LiveBody, { children: [
+        /* @__PURE__ */ jsxs(LiveTopRow, { children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsxs(LiveLabel, { children: [
+              "Offering Subscribed ",
+              /* @__PURE__ */ jsx("span", { children: "\u24D8" })
+            ] }),
+            /* @__PURE__ */ jsxs(LivePercent, { children: [
+              percentSold.toFixed(1),
+              "%",
+              /* @__PURE__ */ jsx("span", { className: "arrow", children: "\u2191" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { style: { textAlign: "right" }, children: [
+            /* @__PURE__ */ jsx(LiveLabel, { children: "Units Subscribed" }),
+            /* @__PURE__ */ jsxs(UnitsValue, { children: [
+              /* @__PURE__ */ jsx("span", { children: totalSold.toLocaleString() }),
+              /* @__PURE__ */ jsxs("small", { children: [
+                "/ ",
+                supplyToSell.toLocaleString()
+              ] })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
+        /* @__PURE__ */ jsxs(ProgressInfo, { children: [
+          /* @__PURE__ */ jsxs(ProgressSubscribers, { children: [
+            "Subscribers: ",
+            subscriberCount.toLocaleString()
+          ] }),
+          /* @__PURE__ */ jsxs(ProgressAmounts, { children: [
+            /* @__PURE__ */ jsx("span", { className: "raised", children: formatCurrency3(computedRaised) }),
+            /* @__PURE__ */ jsxs("span", { className: "target", children: [
+              " / ",
+              formatCurrency3(computedTarget)
+            ] })
+          ] })
+        ] })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(Container, { style, className, children: [
     /* @__PURE__ */ jsxs(Header2, { children: [
       /* @__PURE__ */ jsxs("h3", { children: [
@@ -10015,6 +10100,52 @@ var CompactContainer = styled25.div`
   flex-direction: column;
   gap: 0.5rem;
 `;
+var HomePreLiveRow = styled25.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 1rem;
+`;
+var HomeCountdownSide = styled25.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+`;
+var HomeUnitsSide = styled25.div`
+  text-align: center;
+  flex-shrink: 0;
+`;
+var HomeUnitsLabel = styled25.div`
+  font-size: 0.6rem;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  margin-bottom: 0.2rem;
+`;
+var HomeUnitsValue = styled25.div`
+  font-size: 1.1rem;
+  font-weight: 700;
+  font-family: monospace;
+  span {
+    color: var(--color-text-secondary);
+    font-weight: 400;
+  }
+`;
+var HomeSpinner = styled25.span`
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid rgba(255, 255, 255, 0.1);
+  border-top-color: var(--color-accent, #f0b90b);
+  border-radius: 50%;
+  animation: homeSpin 1s linear infinite;
+  vertical-align: middle;
+  margin-right: 0.15rem;
+  @keyframes homeSpin {
+    to { transform: rotate(360deg); }
+  }
+`;
 var MAX_DISPLAY_AMOUNT = 6e4;
 var formatCurrency4 = (amount) => {
   if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;