add placeholder

renegade-fi · Dec 4, 2024 · bc3a2d8 · bc3a2d8
1 parent 472eaa9
commit bc3a2d8
Showing 1 changed file with 45 additions and 23 deletions.
diff --git a/app/stats/charts/time-to-fill-card.tsx b/app/stats/charts/time-to-fill-card.tsx
@@ -10,6 +10,7 @@ import { Slider } from "@/components/animated-slider"
 
 import { useOrderValue } from "@/hooks/use-order-value"
 import { usePriceQuery } from "@/hooks/use-price-query"
+import { cn } from "@/lib/utils"
 
 interface TimeDisplayValues {
   value: number
@@ -60,29 +61,50 @@ export function TimeToFillCard() {
   return (
     <NumberFlowGroup>
       <div className="grid grid-cols-[1fr_auto_1fr_2fr_auto] items-center gap-4 pr-32 text-2xl leading-none">
-        <NumberFlow
-          className="cursor-pointer text-right font-serif text-2xl font-bold"
-          format={{
-            maximumFractionDigits: 2,
-          }}
-          prefix={`${isSell ? "Sell" : "Buy"}  `}
-          value={Number(priceInBase)}
-          onClick={() => setIsSell((prev) => !prev)}
-        />
-        <TokenSelect
-          value={selectedToken}
-          onChange={setSelectedToken}
-        />
-        <NumberFlow
-          className="font-serif font-bold"
-          format={{
-            maximumFractionDigits: 0,
-            minimumFractionDigits: 0,
-          }}
-          prefix={`in  ${displayValues.prefix}`}
-          suffix={displayValues.suffix}
-          value={displayValues.value}
-        />
+        <div className="relative col-span-3">
+          <div
+            className={cn(
+              "absolute inset-0 text-center text-base text-gray-500 transition-all duration-200",
+              selectedAmount === 0
+                ? "pointer-events-auto opacity-100"
+                : "pointer-events-none opacity-0",
+            )}
+          >
+            Use the slider to set an amount and see estimated time to fill
+          </div>
+          <div
+            className={cn(
+              "grid grid-cols-[1fr_auto_1fr] items-center gap-4 transition-all duration-200",
+              selectedAmount === 0
+                ? "pointer-events-none opacity-0"
+                : "pointer-events-auto opacity-100",
+            )}
+          >
+            <NumberFlow
+              className="cursor-pointer text-right font-serif text-2xl font-bold"
+              format={{
+                maximumFractionDigits: 2,
+              }}
+              prefix={`${isSell ? "Sell" : "Buy"}  `}
+              value={Number(priceInBase)}
+              onClick={() => setIsSell((prev) => !prev)}
+            />
+            <TokenSelect
+              value={selectedToken}
+              onChange={setSelectedToken}
+            />
+            <NumberFlow
+              className="font-serif font-bold"
+              format={{
+                maximumFractionDigits: 0,
+                minimumFractionDigits: 0,
+              }}
+              prefix={`in  ${displayValues.prefix}`}
+              suffix={displayValues.suffix}
+              value={displayValues.value}
+            />
+          </div>
+        </div>
         <Slider
           max={1000000}
           numberFlowClassName="text-right font-serif text-2xl font-bold"