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-05 20:26:43 +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

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

@@ -20,20 +20,29 @@ export function NetworkSpeed({ speed }: NetworkSpeedProps) {
};
return (
<div className="bg-white/80 backdrop-blur-sm p-6 rounded-lg">
<div className="flex items-center gap-2 mb-4">
<Wifi className="h-5 w-5 text-cornflower-blue" />
<h2 className="text-xl font-semibold text-gray-900">Network Speed</h2>
<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-3 mb-5">
<Wifi className="h-7 w-7 text-cornflower-blue" />
<h2 className="text-2xl font-extrabold text-gray-900">Network Speed</h2>
</div>
<div className="space-y-2">
<div className="flex items-center gap-2">
<span className={`text-2xl font-bold ${getSpeedClass(speed)}`}>
<div className="space-y-4">
<div className="flex items-center gap-4">
<span className={`text-4xl font-bold ${getSpeedClass(speed)}`}>
{speed} Mbps
</span>
</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>
);
}
}