tiny chnages

Author: aditya520

components/StakingCapBar.tsx

@@ -5,15 +5,19 @@ interface StakingCapBarProps {
   height?: number
   fillPercentage: number
   secondFillPercentage: number
-  labelText?: string
+  firstFillLabel?: string
+  secondFillLabel?: string
+  totalLabel?: string
 }
 
 export default function StakingCapBar({
   totalLength = 300,
   height = 80,
   fillPercentage,
   secondFillPercentage,
-  labelText
+  firstFillLabel,
+  secondFillLabel,
+  totalLabel
 }: StakingCapBarProps) {
   // Ensure fillPercentages are between 0 and 100
   const clampedFillPercentage = Math.min(100, Math.max(0, fillPercentage))
@@ -23,7 +27,7 @@ export default function StakingCapBar({
   return (
     <div className="flex flex-col items-start">
       <div 
-        className="rounded overflow-hidden"
+        className="rounded overflow-hidden relative"
         style={{ 
           width: `${totalLength}px`, 
           height: `${height}px`,
@@ -37,24 +41,46 @@ export default function StakingCapBar({
       >
         <div className="flex h-full">
           <div
-            className="h-full transition-all duration-300 ease-in-out"
+            className="h-full transition-all duration-300 ease-in-out relative"
             style={{ 
               width: `${clampedFillPercentage}%`,
               backgroundColor: '#7142CF'
             }}
-          ></div>
+          >
+            {firstFillLabel && (
+              <div 
+                className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full mt-1 text-xs font-medium text-gray-700 whitespace-nowrap"
+                style={{
+                  transition: 'left 300ms ease-in-out'
+                }}
+              >
+                {firstFillLabel}: {clampedFillPercentage}%
+              </div>
+            )}
+          </div>
           <div
-            className="h-full transition-all duration-300 ease-in-out"
+            className="h-full transition-all duration-300 ease-in-out relative"
             style={{ 
               width: `${clampedSecondFillPercentage}%`,
-              backgroundColor: '#E6DAFE'
+              backgroundColor: '#7142CF'
             }}
-          ></div>
+          >
+            {secondFillLabel && (
+              <div 
+                className="absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-full mt-1 text-xs font-medium text-gray-700 whitespace-nowrap"
+                style={{
+                  transition: 'left 300ms ease-in-out'
+                }}
+              >
+                {secondFillLabel}: {clampedSecondFillPercentage}%
+              </div>
+            )}
+          </div>
         </div>
       </div>
-      {labelText && (
-        <div className="mt-2 text-sm font-medium text-gray-700">
-          {labelText}: {totalFillPercentage}%
+      {totalLabel && (
+        <div className="mt-6 text-sm font-medium text-gray-700">
+          {totalLabel}: {totalFillPercentage}%
         </div>
       )}
     </div>

pages/home/oracle-integrity-staking/examples.mdx

@@ -8,7 +8,8 @@ NOTE: All the symbols used in the examples are explained in the [Mathematical Re
 
 ## Example 1: Only Publisher Stake
 
-This example take the case one pool assigned where the publisher assigned has staked PYTH tokens, while the pool has no tokens delegated to it.
+This example take the case one pool where the pool has stake from only the publisher.
+
 
 $$
 \begin{aligned}
@@ -25,6 +26,8 @@ $$
 \end{aligned}
 $$
 
+<StakingCapBar fillPercentage={100} labelText="100" secondFillPercentage={0} secondFillLabel="0" totalLabel="50"/>
+
 ## Example 2: Publisher and Delegator Stake
 
 This example take the case where the pool has stake from both the publisher and the delegator.