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 { Card } from "@/components/ui/card";
import { SSLCertificate } from "@/types/ssl.types";
import { useLanguage } from "@/contexts/LanguageContext";
import { OverviewCard } from "@/components/schedule-incident/common/OverviewCard";
import { Shield, ShieldAlert, ShieldX } from "lucide-react";
interface SSLCertificateStatusCardsProps {
certificates: SSLCertificate[];
@@ -16,48 +18,30 @@ export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatus
const expiredCount = certificates.filter(cert => cert.status === 'expired').length;
return (
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Card className="p-6 flex items-center space-x-4">
<div className="bg-green-100 dark:bg-green-900/20 p-3 rounded-full">
<div className="h-12 w-12 rounded-full bg-green-500/20 flex items-center justify-center">
<div className="h-8 w-8 rounded-full bg-green-500 flex items-center justify-center text-white">
✓
</div>
</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>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<OverviewCard
title={t('validCertificates')}
value={validCount}
icon={<Shield className="h-6 w-6 text-white" />}
color="green"
className="hover:scale-105 transition-transform duration-200"
/>
<Card className="p-6 flex items-center space-x-4">
<div className="bg-yellow-100 dark:bg-yellow-900/20 p-3 rounded-full">
<div className="h-12 w-12 rounded-full bg-yellow-500/20 flex items-center justify-center">
<div className="h-8 w-8 rounded-full bg-yellow-500 flex items-center justify-center text-white">
!
</div>
</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>
<OverviewCard
title={t('expiringSoon')}
value={expiringCount}
icon={<ShieldAlert className="h-6 w-6 text-white" />}
color="amber"
className="hover:scale-105 transition-transform duration-200"
/>
<Card className="p-6 flex items-center space-x-4">
<div className="bg-red-100 dark:bg-red-900/20 p-3 rounded-full">
<div className="h-12 w-12 rounded-full bg-red-500/20 flex items-center justify-center">
<div className="h-8 w-8 rounded-full bg-red-500 flex items-center justify-center text-white">
✗
</div>
</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>
<OverviewCard
title={t('expired')}
value={expiredCount}
icon={<ShieldX className="h-6 w-6 text-white" />}
color="red"
className="hover:scale-105 transition-transform duration-200"
/>
</div>
);
};