初始化项目
This commit is contained in:
395
components/StatsSection.tsx
Normal file
395
components/StatsSection.tsx
Normal file
@@ -0,0 +1,395 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import Image from 'next/image';
|
||||
|
||||
// 数字增长动画Hook
|
||||
function useCountUp(end: number, duration: number = 1500, startRangePercent: number = 0.75) {
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [count, setCount] = useState(end); // 初始值设为目标值，避免hydration错误
|
||||
const [hasAnimated, setHasAnimated] = useState(false);
|
||||
const elementRef = useRef<HTMLDivElement>(null);
|
||||
const startValueRef = useRef<number>(end);
|
||||
|
||||
// 客户端挂载后设置随机起始值
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
startValueRef.current = Math.floor(end * (startRangePercent + Math.random() * 0.15));
|
||||
setCount(startValueRef.current);
|
||||
}, [end, startRangePercent]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!mounted) return;
|
||||
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
if (entries[0].isIntersecting && !hasAnimated) {
|
||||
setHasAnimated(true);
|
||||
const start = startValueRef.current;
|
||||
const startTime = Date.now();
|
||||
|
||||
const timer = setInterval(() => {
|
||||
const elapsed = Date.now() - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// 使用缓动函数 - easeOutCubic 更自然
|
||||
const easeOutCubic = 1 - Math.pow(1 - progress, 3);
|
||||
const currentCount = Math.floor(start + (end - start) * easeOutCubic);
|
||||
|
||||
setCount(currentCount);
|
||||
|
||||
if (progress === 1) {
|
||||
setCount(end); // 确保最终值准确
|
||||
clearInterval(timer);
|
||||
}
|
||||
}, 16);
|
||||
|
||||
return () => clearInterval(timer);
|
||||
}
|
||||
},
|
||||
{ threshold: 0.1 }
|
||||
);
|
||||
|
||||
if (elementRef.current) {
|
||||
observer.observe(elementRef.current);
|
||||
}
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [end, duration, hasAnimated, mounted]);
|
||||
|
||||
return { count, elementRef };
|
||||
}
|
||||
|
||||
// 格式化数字 - 确保始终显示正确的单位
|
||||
function formatNumber(num: number, prefix: string = '', suffix: string = '', forceUnit: 'M' | 'K' | '' = '') {
|
||||
if (forceUnit === 'M') {
|
||||
return `${prefix}${Math.floor(num)}${suffix}`;
|
||||
} else if (forceUnit === 'K') {
|
||||
return `${prefix}${Math.floor(num)}${suffix}`;
|
||||
} else if (num >= 1000000) {
|
||||
return `${prefix}${Math.floor(num / 1000000)}M${suffix}`;
|
||||
} else if (num >= 1000) {
|
||||
return `${prefix}${Math.floor(num / 1000)}K${suffix}`;
|
||||
}
|
||||
return `${prefix}${num.toLocaleString()}${suffix}`;
|
||||
}
|
||||
|
||||
export default function StatsSection() {
|
||||
const tvl = useCountUp(485, 1500, 0.80); // 从80-95%开始
|
||||
const apy = useCountUp(515, 1500, 0.85); // 5.15 * 100，从85-100%开始
|
||||
const yield_ = useCountUp(45, 1500, 0.75); // 从75-90%开始
|
||||
const users = useCountUp(23928, 1800, 0.80); // 从80-95%开始
|
||||
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [imagesVisible, setImagesVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
// 客户端挂载
|
||||
setMounted(true);
|
||||
|
||||
// 延迟显示图片动画
|
||||
const timer = setTimeout(() => {
|
||||
setImagesVisible(true);
|
||||
}, 500);
|
||||
return () => clearTimeout(timer);
|
||||
}, []);
|
||||
return (
|
||||
<section
|
||||
className="bg-white flex flex-row items-center justify-center flex-shrink-0 w-full relative"
|
||||
style={{
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#e5e7eb',
|
||||
borderWidth: '0px 0px 1px 0px',
|
||||
padding: '0px 0px 1px 0px'
|
||||
}}
|
||||
>
|
||||
{/* .section2 */}
|
||||
<div
|
||||
className="flex flex-row items-center justify-center w-[1440px] h-[183px] relative"
|
||||
>
|
||||
{/* .container4 - Grid container */}
|
||||
<div
|
||||
className="flex-shrink-0 grid gap-0 relative w-full"
|
||||
style={{
|
||||
gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
|
||||
gridTemplateRows: 'repeat(1, minmax(0, 1fr))'
|
||||
}}
|
||||
>
|
||||
{/* Card 1 - Total Value Locked */}
|
||||
<div
|
||||
className="bg-white flex flex-row items-center justify-between h-[182px] relative"
|
||||
style={{
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#e5e7eb',
|
||||
borderWidth: '0px 1px 0px 0px',
|
||||
gridColumn: '1 / span 1',
|
||||
gridRow: '1 / span 1'
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
|
||||
<div
|
||||
className="text-[#4b5563] text-left relative font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Total Value Locked
|
||||
</div>
|
||||
<div
|
||||
ref={tvl.elementRef}
|
||||
className="text-[#111827] text-left relative font-jetbrains"
|
||||
style={{
|
||||
fontSize: '48px',
|
||||
lineHeight: '110%',
|
||||
letterSpacing: '-0.01em',
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
{formatNumber(tvl.count, '$', 'M+', 'M')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 2 - Avg. APY */}
|
||||
<div
|
||||
className="bg-white flex flex-row items-center justify-between h-[182px] relative"
|
||||
style={{
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#e5e7eb',
|
||||
borderWidth: '0px 1px 0px 0px',
|
||||
padding: '0px 32px',
|
||||
gridColumn: '2 / span 1',
|
||||
gridRow: '1 / span 1'
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
|
||||
<div
|
||||
className="text-[#4b5563] text-left relative font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Avg. APY
|
||||
</div>
|
||||
<div
|
||||
ref={apy.elementRef}
|
||||
className="text-[#111827] text-left relative font-jetbrains"
|
||||
style={{
|
||||
fontSize: '48px',
|
||||
lineHeight: '110%',
|
||||
letterSpacing: '-0.01em',
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
{(apy.count / 100).toFixed(2)}%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 3 - Yield Captured */}
|
||||
<div
|
||||
className="bg-white flex flex-row items-center justify-between h-[182px] relative"
|
||||
style={{
|
||||
borderStyle: 'solid',
|
||||
borderColor: '#e5e7eb',
|
||||
borderWidth: '0px 1px 0px 0px',
|
||||
padding: '0px 32px',
|
||||
gridColumn: '3 / span 1',
|
||||
gridRow: '1 / span 1'
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
|
||||
<div
|
||||
className="text-[#4b5563] text-left relative font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Yield Captured
|
||||
</div>
|
||||
<div
|
||||
ref={yield_.elementRef}
|
||||
className="text-[#111827] text-left relative self-stretch font-jetbrains"
|
||||
style={{
|
||||
fontSize: '48px',
|
||||
lineHeight: '110%',
|
||||
letterSpacing: '-0.01em',
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
{formatNumber(yield_.count, '$', 'M', 'M')}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Card 4 - Connected Users */}
|
||||
<div
|
||||
className="bg-white flex flex-row items-center justify-between h-[182px] relative"
|
||||
style={{
|
||||
borderStyle: 'solid',
|
||||
borderColor: 'transparent',
|
||||
borderWidth: '0px 1px 0px 0px',
|
||||
padding: '0px 0px 0px 32px',
|
||||
gridColumn: '4 / span 1',
|
||||
gridRow: '1 / span 1'
|
||||
}}
|
||||
>
|
||||
<div className="flex flex-col gap-2 items-start justify-center flex-1 relative">
|
||||
<div
|
||||
className="text-[#4b5563] text-left relative font-inter"
|
||||
style={{
|
||||
fontSize: '16px',
|
||||
lineHeight: '150%',
|
||||
fontWeight: 400
|
||||
}}
|
||||
>
|
||||
Connected Users
|
||||
</div>
|
||||
|
||||
{/* .frame-38 - Number and avatars */}
|
||||
<div className="flex flex-row items-center justify-between self-stretch flex-shrink-0 relative">
|
||||
{/* Number */}
|
||||
<div
|
||||
ref={users.elementRef}
|
||||
className="text-[#111827] text-left relative font-jetbrains"
|
||||
style={{
|
||||
fontSize: '48px',
|
||||
lineHeight: '110%',
|
||||
letterSpacing: '-0.01em',
|
||||
fontWeight: 800
|
||||
}}
|
||||
>
|
||||
{users.count.toLocaleString()}+
|
||||
</div>
|
||||
|
||||
{/* .container9 - Avatar group */}
|
||||
<div className="flex flex-row items-center justify-start flex-shrink-0 relative overflow-hidden">
|
||||
{/* Avatar 1 - image-23 */}
|
||||
<div
|
||||
className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
|
||||
mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
||||
}`}
|
||||
style={{
|
||||
borderRadius: '15239273px',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '1.82px',
|
||||
padding: '1.82px',
|
||||
aspectRatio: 1,
|
||||
transitionDelay: '100ms'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/image-230.png"
|
||||
alt="User"
|
||||
width={33}
|
||||
height={33}
|
||||
className="absolute object-cover"
|
||||
style={{
|
||||
left: '1.82px',
|
||||
top: '1.82px',
|
||||
aspectRatio: 1
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Avatar 2 - image-24 */}
|
||||
<div
|
||||
className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
|
||||
mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
||||
}`}
|
||||
style={{
|
||||
margin: '0 0 0 -8px',
|
||||
borderRadius: '15239273px',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '1.82px',
|
||||
padding: '1.82px',
|
||||
aspectRatio: 1,
|
||||
transitionDelay: '200ms'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/image-240.png"
|
||||
alt="User"
|
||||
width={36}
|
||||
height={36}
|
||||
className="absolute object-cover"
|
||||
style={{
|
||||
left: '0px',
|
||||
top: '0px',
|
||||
aspectRatio: 1
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Avatar 3 - image-25 */}
|
||||
<div
|
||||
className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
|
||||
mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
||||
}`}
|
||||
style={{
|
||||
margin: '0 0 0 -8px',
|
||||
borderRadius: '15239273px',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '1.82px',
|
||||
padding: '1.82px',
|
||||
aspectRatio: 1,
|
||||
transitionDelay: '300ms'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/image-250.png"
|
||||
alt="User"
|
||||
width={40}
|
||||
height={40}
|
||||
className="absolute object-cover"
|
||||
style={{
|
||||
left: '6px',
|
||||
top: '0.5px',
|
||||
aspectRatio: 1
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Avatar 4 - image-252 */}
|
||||
<div
|
||||
className={`flex-shrink-0 w-9 h-9 relative overflow-hidden border-white transition-all duration-700 ease-out ${
|
||||
mounted && imagesVisible ? 'translate-y-0 opacity-100' : 'translate-y-12 opacity-0'
|
||||
}`}
|
||||
style={{
|
||||
margin: '0 0 0 -8px',
|
||||
borderRadius: '15239273px',
|
||||
borderStyle: 'solid',
|
||||
borderWidth: '1.82px',
|
||||
padding: '1.82px',
|
||||
aspectRatio: 1,
|
||||
transitionDelay: '400ms'
|
||||
}}
|
||||
>
|
||||
<Image
|
||||
src="/image-251.png"
|
||||
alt="User"
|
||||
width={36}
|
||||
height={36}
|
||||
className="absolute object-cover"
|
||||
style={{
|
||||
left: '0px',
|
||||
top: '0px',
|
||||
aspectRatio: 1
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user