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

⚡️ perf: acessiblity improvements

Browse Source
This commit is contained in:
RiO
2024-12-29 05:05:28 +05:30
parent f2e189acc7
commit ea2598aa8b
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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