url/checkcle
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix: Apply grid style to SSL overview cards

Browse Source
This commit is contained in:
Tola Leng
2025-05-26 21:52:10 +08:00
parent a58180f252
commit 38374acdcd
1 changed files with 25 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
+25 -41
View File
@@ -1,7 +1,9 @@
import React from "react"; import React from "react";
import { Card } from "@/components/ui/card";
import { SSLCertificate } from "@/types/ssl.types"; import { SSLCertificate } from "@/types/ssl.types";
import { useLanguage } from "@/contexts/LanguageContext"; import { useLanguage } from "@/contexts/LanguageContext";
import { OverviewCard } from "@/components/schedule-incident/common/OverviewCard";
import { Shield, ShieldAlert, ShieldX } from "lucide-react";
interface SSLCertificateStatusCardsProps { interface SSLCertificateStatusCardsProps {
certificates: SSLCertificate[]; certificates: SSLCertificate[];
@@ -16,48 +18,30 @@ export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatus
const expiredCount = certificates.filter(cert => cert.status === 'expired').length; const expiredCount = certificates.filter(cert => cert.status === 'expired').length;
return ( return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<Card className="p-6 flex items-center space-x-4"> <OverviewCard
<div className="bg-green-100 dark:bg-green-900/20 p-3 rounded-full"> title={t('validCertificates')}
<div className="h-12 w-12 rounded-full bg-green-500/20 flex items-center justify-center"> value={validCount}
<div className="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center text-white"> icon={<Shield className="h-6 w-6 text-white" />}
✓ color="green"
</div> className="hover:scale-105 transition-transform duration-200"
</div> />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">{t('validCertificates')}</p>
<p className="text-3xl font-bold">{validCount}</p>
</div>
</Card>
<Card className="p-6 flex items-center space-x-4"> <OverviewCard
<div className="bg-yellow-100 dark:bg-yellow-900/20 p-3 rounded-full"> title={t('expiringSoon')}
<div className="h-12 w-12 rounded-full bg-yellow-500/20 flex items-center justify-center"> value={expiringCount}
<div className="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center text-white"> icon={<ShieldAlert className="h-6 w-6 text-white" />}
! color="amber"
</div> className="hover:scale-105 transition-transform duration-200"
</div> />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">{t('expiringSoon')}</p>
<p className="text-3xl font-bold">{expiringCount}</p>
</div>
</Card>
<Card className="p-6 flex items-center space-x-4"> <OverviewCard
<div className="bg-red-100 dark:bg-red-900/20 p-3 rounded-full"> title={t('expired')}
<div className="h-12 w-12 rounded-full bg-red-500/20 flex items-center justify-center"> value={expiredCount}
<div className="h-8 w-8 rounded-full bg-red-500 flex items-center justify-center text-white"> icon={<ShieldX className="h-6 w-6 text-white" />}
✗ color="red"
</div> className="hover:scale-105 transition-transform duration-200"
</div> />
</div>
<div>
<p className="text-sm font-medium text-muted-foreground">{t('expired')}</p>
<p className="text-3xl font-bold">{expiredCount}</p>
</div>
</Card>
</div> </div>
); );
}; };