first commit

2026-07-16 20:48:43 -03:00
commit 5696cee264
1111 changed files with 322270 additions and 0 deletions
@@ -0,0 +1,66 @@
+"use client";
+import React, { useEffect, useState } from "react";
+import classNames from "classnames";
+import styles from "./MetricGraph.module.css";
+
+export interface MetricGraphProps {
+    value: number;
+    maxValue?: number;
+    title: string;
+}
+
+export default function MetricGraph(props: MetricGraphProps) {
+    const { maxValue = 100 } = props;
+    const [animatedWidth, setAnimatedWidth] = useState(0);
+
+    const isInfinite = maxValue === -1;
+    const formatValueMax = (value: number) => {
+        if (value === -1) {
+            return "∞";
+        }
+        return value;
+    };
+
+    const percentage = isInfinite ? 100 : Math.min(100, (props.value / maxValue) * 100);
+
+    let statusClass = styles.safe;
+    if (isInfinite) {
+        statusClass = styles.infinite;
+    } else {
+        if (percentage >= 100) {
+            statusClass = styles.danger;
+        } else if (percentage >= 80) {
+            statusClass = styles.warning;
+        }
+    }
+
+    useEffect(() => {
+        // Trigger animation after mount
+        const timer = setTimeout(() => {
+            setAnimatedWidth(percentage);
+        }, 100);
+        return () => clearTimeout(timer);
+    }, [percentage]);
+
+    return (
+        <div className={styles.card}>
+            <div className={styles.header}>
+                <h4 className={styles.title}>{props.title}</h4>
+            </div>
+            
+            <div>
+                <div className={styles.valueContainer}>
+                    <p className={styles.value}>{props.value}</p>
+                    <p className={styles.maxValue}>/ {formatValueMax(maxValue)}</p>
+                </div>
+                
+                <div className={styles.progressContainer}>
+                    <div 
+                        className={classNames(styles.progressBar, statusClass)} 
+                        style={{ width: `${animatedWidth}%` }}
+                    />
+                </div>
+            </div>
+        </div>
+    );
+}