📝 : refine react-spring's deme

hsunpei · Nov 2, 2024 · 1d34663 · 1d34663
1 parent f0358ba
commit 1d34663
Showing 1 changed file with 22 additions and 15 deletions.
diff --git a/apps/docs/components/grouped/ActiveSectionInfoSpring.tsx b/apps/docs/components/grouped/ActiveSectionInfoSpring.tsx
@@ -15,27 +15,34 @@ export const ActiveSectionInfoSpring = () => {
 
   return (
     <div className="flex h-screen items-center justify-center">
-      <ul className="list-disc text-xl leading-9 marker:text-slate-400">
-        <small>
-          Active Section = <b>{trackingId}</b>:
-        </small>
-        <li>
+      <div className="min-w-96 list-disc text-xl leading-9 marker:text-slate-400">
+        <div>
           You are viewing{' '}
           <span className="rounded-md bg-slate-100 px-2 py-1 dark:bg-slate-800">
             <b className={TEXT_COLOR[trackingId]}>{trackingId}</b>
           </span>{' '}
           section
           <br />
-        </li>
-        <li>
-          Reading ratio:
-          <animated.b>
-            {scrolledRatioSpring.to((val) => {
-              return `${Math.round(val * 10000) / 10000}`;
-            })}
-          </animated.b>
-        </li>
-      </ul>
+        </div>
+        <div>
+          <div className="w-full rounded-full bg-gray-200 dark:bg-gray-700">
+            <animated.div
+              className="min-w-20 rounded-full bg-blue-600  p-0.5 text-center text-xs font-medium leading-none text-blue-100"
+              style={{
+                width: scrolledRatioSpring.to((val) => {
+                  return `${Math.round(val * 10000) / 100}%`;
+                }),
+              }}
+            >
+              <animated.b>
+                {scrolledRatioSpring.to((val) => {
+                  return `${Math.round(val * 10000) / 10000}`;
+                })}
+              </animated.b>
+            </animated.div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 };