Snigdha-OS/Snigdha-OS.github.io
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/Snigdha-OS.github.io.git synced 2025-09-06 12:45:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: make it beautiful

Browse Source
This commit is contained in:
RiO
2024-12-25 06:45:20 +05:30
parent 6f6f31bccd
commit 91efea5372
1 changed files with 18 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/download/NetworkSpeed.tsx
View File

@@ -20,19 +20,28 @@ export function NetworkSpeed({ speed }: NetworkSpeedProps) {
}; };
return ( return (
<div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg"> <div className="bg-white/90 backdrop-blur-lg p-8 rounded-xl shadow-lg hover:scale-105 transform transition-all">
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-3 mb-5">
<Wifi className="h-5 w-5 text-cornflower-blue" /> <Wifi className="h-7 w-7 text-cornflower-blue" />
<h2 className="text-xl font-semibold text-gray-900">Network Speed</h2> <h2 className="text-2xl font-extrabold text-gray-900">Network Speed</h2>
</div> </div>
<div className="space-y-2"> <div className="space-y-4">
<div className="flex items-center gap-2"> <div className="flex items-center gap-4">
<span className={`text-2xl font-bold ${getSpeedClass(speed)}`}> <span className={`text-4xl font-bold ${getSpeedClass(speed)}`}>
{speed} Mbps {speed} Mbps
</span> </span>
</div> </div>
<p className="text-gray-600">{getRecommendation(speed)}</p> <p className="text-lg text-gray-700">{getRecommendation(speed)}</p>
</div>
<div className="mt-6 flex items-center justify-between">
<div className="flex items-center gap-3">
<span className={`font-medium ${getSpeedClass(speed)}`}>Speed Quality:</span>
<span className={`${getSpeedClass(speed)} font-semibold`}>
{speed >= 100 ? 'Excellent' : speed >= 50 ? 'Good' : speed >= 20 ? 'Moderate' : 'Poor'}
</span>
</div>
</div> </div>
</div> </div>
); );