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 04:35:18 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style: added some effects

Browse Source
This commit is contained in:
RiO
2024-12-29 05:08:46 +05:30
parent 32d07bea21
commit 1afaac060b
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/download/SuggestedMirror.tsx
View File

@@ -1,6 +1,7 @@
import { MapPin, Download } from 'lucide-react'; import { MapPin, Download } from 'lucide-react';
import { type Mirror } from '../../types/download'; import { type Mirror } from '../../types/download';
import { type UserLocation } from '../../lib/location'; import { type UserLocation } from '../../lib/location';
import { motion } from 'framer-motion';
interface SuggestedMirrorProps { interface SuggestedMirrorProps {
mirror: Mirror; mirror: Mirror;
@@ -23,13 +24,15 @@ export function SuggestedMirror({ mirror, userLocation, onSelect }: SuggestedMir
<p className="font-semibold text-2xl text-gray-900">{mirror.name}</p> <p className="font-semibold text-2xl text-gray-900">{mirror.name}</p>
<p className="text-sm text-gray-600">{mirror.location}</p> <p className="text-sm text-gray-600">{mirror.location}</p>
<button <motion.button
onClick={() => onSelect(mirror)} onClick={() => onSelect(mirror)}
className="w-full mt-4 px-6 py-3 bg-cornflower-blue text-white rounded-lg hover:bg-blue-600 active:scale-95 transition-all ease-in-out flex items-center justify-center gap-2" className="w-full mt-4 px-6 py-3 bg-cornflower-blue text-white rounded-lg hover:bg-blue-600 active:scale-95 transition-all ease-in-out flex items-center justify-center gap-2"
whileHover={{ scale: 1.05 }} // Zoom effect on hover
whileTap={{ scale: 0.98 }} // Slight zoom effect when clicked
> >
<Download className="h-5 w-5" /> <Download className="h-5 w-5" />
<span>Download</span> <span>Download</span>
</button> </motion.button>
</div> </div>
</div> </div>
); );