chore(cancelConnection-example): added more style

examples/vite-app/src/examples/CancelConnection/Timer.module.css

@@ -6,13 +6,26 @@
   transform: translate(-50%, 100%);
   font-size: 1.5rem;
   z-index: 999;
-  background-color: white;
-  padding: 0.5rem 1rem;
+  background: linear-gradient(#fff, #fff, #f5f5f5);
+  padding: 0.8rem 1.5rem;
   border-radius: 5px;
   border: 1px solid #ccc;
   box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
 }
 
 .Timer.show {
-  transform: translate(-50%, 0%) translateY(-10px);
+  transform: translate(-50%, 0%) translateY(-15px);
+}
+
+.progress {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  background: linear-gradient(to right, #42df96, #16dfed);
+}
+
+.Timer.show .progress {
+  display: block;
 }

examples/vite-app/src/examples/CancelConnection/Timer.tsx

@@ -2,19 +2,26 @@ import cc from 'classcat';
 import styles from './Timer.module.css';
 
 interface Props {
+  duration: number;
   remaining: number;
   show: boolean;
 }
 
 export default function Timer({
+  duration,
   remaining,
   show,
 }: Props) {
+  const percentage = 100 - (remaining / duration) * 100;
+
   return (
     <div className={cc({
       [styles.Timer]: true,
       [styles.show]: show,
     })}>
+      <div className={styles.progress} style={{
+        width: `${percentage}%`,
+      }} />
       Connection will be canceled in {remaining} seconds
     </div>
   )

examples/vite-app/src/examples/CancelConnection/index.tsx

@@ -16,6 +16,8 @@ import useCountdown from './hooks/useCountdown';
 import { initialEdges, initialNodes } from './data';
 import Timer from './Timer';
 
+const CANCEL_AFTER = 5; // seconds
+
 const CancelConnection = () => {
   const [nodes, _, onNodesChange] = useNodesState(initialNodes);
   const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
@@ -23,7 +25,7 @@ const CancelConnection = () => {
 
   // Cancels connection after 5 seconds
   const countdown = useCountdown(() => cancelConnection());
-  const onConnectStart: OnConnectStart = () => countdown.start(5);
+  const onConnectStart: OnConnectStart = () => countdown.start(CANCEL_AFTER);
   const onConnectEnd: OnConnectEnd = () => countdown.stop();
 
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
@@ -31,6 +33,7 @@ const CancelConnection = () => {
   return (
     <>
       <Timer
+        duration={CANCEL_AFTER}
         show={countdown.counting}
         remaining={countdown.remaining}
       />