mirror of
https://github.com/Snigdha-OS/Snigdha-OS.github.io.git
synced 2025-09-06 12:45:18 +02:00
✨ style: ui has been updated
This commit is contained in:
@@ -17,49 +17,49 @@ export function Checksum({ sha256, gpg }: ChecksumProps) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="bg-white/90 backdrop-blur-sm p-8 rounded-lg shadow-lg max-w-3xl mx-auto">
|
||||
<div className="flex items-center gap-3 mb-6">
|
||||
<Shield className="h-6 w-6 text-cornflower-blue" />
|
||||
<h2 className="text-2xl font-extrabold text-gray-900">Verify Download</h2>
|
||||
<div className="bg-white p-8 rounded-3xl shadow-xl max-w-4xl mx-auto">
|
||||
<div className="flex items-center gap-3 mb-8">
|
||||
<Shield className="h-8 w-8 text-cornflower-blue" />
|
||||
<h2 className="text-3xl font-extrabold text-gray-900">Verify Download</h2>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<div className="space-y-8">
|
||||
{/* SHA256 Checksum */}
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-2">SHA256 Checksum</h3>
|
||||
<code className="block p-3 bg-gray-50 rounded-lg text-sm break-all text-gray-800 border border-gray-200">
|
||||
<div className="w-3/4">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-2">SHA256 Checksum</h3>
|
||||
<code className="block p-4 bg-gray-100 rounded-lg text-sm break-all text-gray-900 border border-gray-300 shadow-md">
|
||||
{sha256}
|
||||
</code>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopy(sha256, "sha256")}
|
||||
className="ml-3 p-2 text-cornflower-blue hover:bg-gray-100 rounded-lg transition"
|
||||
className="ml-6 p-3 text-cornflower-blue hover:bg-blue-50 hover:text-cornflower-blue rounded-full transition-all transform active:scale-95 animate-button"
|
||||
aria-label="Copy SHA256 checksum"
|
||||
>
|
||||
<Clipboard className="h-5 w-5" />
|
||||
<Clipboard className="h-6 w-6" />
|
||||
{copied === "sha256" && (
|
||||
<span className="text-xs text-green-500 ml-2">Copied!</span>
|
||||
<span className="text-xs text-green-500 ml-2 animate-fade-in">Copied!</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* GPG Signature */}
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold text-gray-700 mb-2">GPG Signature</h3>
|
||||
<code className="block p-3 bg-gray-50 rounded-lg text-sm break-all text-gray-800 border border-gray-200">
|
||||
<div className="w-3/4">
|
||||
<h3 className="text-lg font-semibold text-gray-800 mb-2">GPG Signature</h3>
|
||||
<code className="block p-4 bg-gray-100 rounded-lg text-sm break-all text-gray-900 border border-gray-300 shadow-md">
|
||||
{gpg}
|
||||
</code>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleCopy(gpg, "gpg")}
|
||||
className="ml-3 p-2 text-cornflower-blue hover:bg-gray-100 rounded-lg transition"
|
||||
className="ml-6 p-3 text-cornflower-blue hover:bg-blue-50 hover:text-cornflower-blue rounded-full transition-all transform active:scale-95 animate-button"
|
||||
aria-label="Copy GPG signature"
|
||||
>
|
||||
<Clipboard className="h-5 w-5" />
|
||||
<Clipboard className="h-6 w-6" />
|
||||
{copied === "gpg" && (
|
||||
<span className="text-xs text-green-500 ml-2">Copied!</span>
|
||||
<span className="text-xs text-green-500 ml-2 animate-fade-in">Copied!</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
|
Reference in New Issue
Block a user