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: increase spacing and layout

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

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

@@ -1,4 +1,4 @@
import { MapPin } from 'lucide-react';
import { MapPin, Download } from 'lucide-react';
import { type Mirror } from '../../types/download';
import { type UserLocation } from '../../lib/location';
@@ -10,24 +10,25 @@ interface SuggestedMirrorProps {
export function SuggestedMirror({ mirror, userLocation, onSelect }: SuggestedMirrorProps) {
return (
<div className="bg-white/90 backdrop-blur-lg p-6 rounded-lg shadow-lg border-2 border-cornflower-blue hover:shadow-xl transition-shadow">
<div className="flex items-center gap-3 mb-5">
<MapPin className="h-6 w-6 text-cornflower-blue" />
<div className="bg-white/90 backdrop-blur-lg p-6 rounded-lg shadow-lg border-2 border-cornflower-blue hover:shadow-xl transition-shadow ease-in-out duration-300">
<div className="flex items-center gap-4 mb-5">
<MapPin className="h-7 w-7 text-cornflower-blue" />
<div>
<h3 className="text-2xl font-semibold text-gray-900">Suggested Mirror</h3>
<h3 className="text-3xl font-semibold text-gray-900">Suggested Mirror</h3>
<p className="text-sm text-gray-600">Based on your location: {userLocation.city}, {userLocation.country}</p>
</div>
</div>
<div className="space-y-3">
<p className="font-semibold text-gray-900 text-lg">{mirror.name}</p>
<div className="space-y-4">
<p className="font-semibold text-2xl text-gray-900">{mirror.name}</p>
<p className="text-sm text-gray-600">{mirror.location}</p>
<button
onClick={() => onSelect(mirror)}
className="w-full mt-4 px-5 py-3 bg-cornflower-blue text-white rounded-lg hover:bg-blue-600 transition-colors ease-in-out"
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"
>
Use This Mirror
<Download className="h-5 w-5" />
<span>Download</span>
</button>
</div>
</div>