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

⚡️ perf: enhanced error handling

Browse Source
This commit is contained in:
RiO
2024-12-29 05:02:12 +05:30
parent e092462ade
commit 8590a0fb78
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/download/DownloadButton.tsx
View File

@@ -15,14 +15,22 @@ export function DownloadButton({ version, size, url }: DownloadButtonProps) {
rel="noopener noreferrer" // Security measure when opening external links
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.98 }}
className="flex items-center justify-between w-full p-4 bg-gradient-to-r from-cornflower-blue/10 to-white rounded-lg border border-gray-200 hover:border-cornflower-blue transition-all duration-300 ease-in-out transform hover:scale-105 focus:ring-2 focus:ring-cornflower-blue focus:outline-none"
className="flex items-center justify-between w-full p-5 bg-gradient-to-r from-cornflower-blue/10 to-white rounded-lg border border-gray-200 hover:border-cornflower-blue transition-all duration-300 ease-in-out transform hover:scale-105 focus:ring-2 focus:ring-cornflower-blue focus:outline-none shadow-md hover:shadow-lg"
aria-label={`Download Snigdha OS ${version} - ${size}`} // Accessible label
>
<div className="flex flex-col">
<h3 className="text-lg font-semibold text-gray-900">Snigdha OS {version}</h3>
<h3 className="text-xl font-semibold text-gray-900 transition duration-200 ease-in-out hover:text-cornflower-blue">
Snigdha OS {version}
</h3>
<p className="text-sm text-gray-500">{size}</p>
</div>
<Download className="h-6 w-6 text-cornflower-blue" />
<motion.div
whileHover={{ scale: 1.2 }}
transition={{ type: 'spring', stiffness: 300, damping: 20 }}
className="flex items-center justify-center"
>
<Download className="h-6 w-6 text-cornflower-blue transition-all duration-200 ease-in-out transform" />
</motion.div>
</motion.a>
);
}