swadhinbiswas feat: OpenCodeHub v1.1.0 - Enterprise Features & Storage Adapters · 2/15/2026
719a1cb
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
import { motion } from "framer-motion";
import { useEffect, useState } from "react";
import { Database, GitPullRequest, Sparkles } from "lucide-react";
interface Props {
stats: {
totalRepos: number;
collaborations: number;
}
}
// Animated counter that smoothly transitions between numbers
function AnimatedNumber({ value, className }: { value: number; className?: string }) {
const [displayValue, setDisplayValue] = useState(0);
useEffect(() => {
const duration = 1500;
const startTime = Date.now();
const startValue = displayValue;
const animate = () => {
const now = Date.now();
const progress = Math.min((now - startTime) / duration, 1);
// Easing function for smooth animation
const eased = 1 - Math.pow(1 - progress, 3);
setDisplayValue(Math.floor(startValue + (value - startValue) * eased));
if (progress < 1) {
requestAnimationFrame(animate);
}
};
requestAnimationFrame(animate);
}, [value]);
return <span className={className}>{displayValue.toLocaleString()}</span>;
}
export default function DashboardStats({ stats }: Props) {
return (
<div className="flex flex-col gap-8 p-6">
{/* Total Repositories - with glowing effect */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5 }}
className="relative group"
>
{/* Glow effect on hover */}
<div className="absolute -inset-2 bg-gradient-to-r from-cyan-500/20 via-blue-500/20 to-purple-500/20 rounded-lg blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="relative">
<div className="flex items-center gap-2 mb-2">
<Database className="w-4 h-4 text-cyan-400" />
<h3 className="text-sm uppercase tracking-widest text-cyan-400/80">
Total Repositories
</h3>
</div>
<div className="text-5xl font-light font-mono">
<span className="bg-gradient-to-r from-white via-cyan-200 to-cyan-400 bg-clip-text text-transparent">
<AnimatedNumber value={stats.totalRepos} />
</span>
</div>
<div className="flex items-center gap-1.5 mt-2">
<motion.span
className="relative flex h-2 w-2"
animate={{ scale: [1, 1.2, 1] }}
transition={{ duration: 2, repeat: Infinity }}
>
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-cyan-400 opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-cyan-500" />
</motion.span>
<span className="text-xs text-cyan-400/60">Live Count</span>
</div>
</div>
</motion.div>
{/* Active Collaborations - with pink/rose theme */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.5, delay: 0.1 }}
className="relative group"
>
{/* Glow effect on hover */}
<div className="absolute -inset-2 bg-gradient-to-r from-pink-500/20 via-rose-500/20 to-orange-500/20 rounded-lg blur-xl opacity-0 group-hover:opacity-100 transition-opacity duration-500" />
<div className="relative">
<div className="flex items-center gap-2 mb-2">
<GitPullRequest className="w-4 h-4 text-rose-400" />
<h3 className="text-sm uppercase tracking-widest text-rose-400/80">
Active Collaborations
</h3>
</div>
<div className="text-5xl font-light font-mono">
<span className="bg-gradient-to-r from-rose-200 via-pink-300 to-rose-400 bg-clip-text text-transparent">
<AnimatedNumber value={stats.collaborations} />
</span>
</div>
<div className="flex items-center gap-1.5 mt-2">
<Sparkles className="w-3 h-3 text-rose-400/60" />
<span className="text-xs text-rose-400/60">Pull Requests</span>
</div>
</div>
</motion.div>
</div>
);
}