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

Updated SSL Certificate Status Cards linear-gradient

Browse Source
This commit is contained in:
Tola Leng
2025-07-01 19:15:24 +07:00
parent d183ca9791
commit 9b1ccc7f8d
1 changed files with 105 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
application/src/components/ssl-domain/SSLCertificateStatusCards.tsx
+103 -27
View File
@@ -1,9 +1,9 @@
import React from "react"; import React from "react";
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 { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
import { Shield, ShieldAlert, ShieldX } from "lucide-react"; import { Shield, ShieldAlert, ShieldX } from "lucide-react";
import { useTheme } from "@/contexts/ThemeContext";
interface SSLCertificateStatusCardsProps { interface SSLCertificateStatusCardsProps {
certificates: SSLCertificate[]; certificates: SSLCertificate[];
@@ -11,37 +11,113 @@ interface SSLCertificateStatusCardsProps {
export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatusCardsProps) => { export const SSLCertificateStatusCards = ({ certificates }: SSLCertificateStatusCardsProps) => {
const { t } = useLanguage(); const { t } = useLanguage();
const { theme } = useTheme();
// Count certificates by status // Count certificates by status
const validCount = certificates.filter(cert => cert.status === 'valid').length; const validCount = certificates.filter(cert => cert.status === "valid").length;
const expiringCount = certificates.filter(cert => cert.status === 'expiring_soon').length; const expiringCount = certificates.filter(cert => cert.status === "expiring_soon").length;
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-6"> <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-8 w-full">
<OverviewCard {/* Valid Certificates */}
title={t('validCertificates')} <Card
value={validCount} className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10"
icon={<Shield className="h-6 w-6 text-white" />} style={{
color="green" background:
className="hover:scale-105 transition-transform duration-200" theme === "dark"
/> ? "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, rgba(34,197,94,0.6) 100%)"
: "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, #22c55e 100%)",
}}
>
<div className="absolute inset-0 z-0 opacity-10">
<div
className="w-full h-full"
style={{
backgroundImage: `linear-gradient(#000 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px)`,
backgroundSize: "20px 20px",
}}
/>
</div>
<CardHeader className="pb-2 relative z-10">
<CardTitle className="text-sm font-medium text-white">
{t("validCertificates")}
</CardTitle>
</CardHeader>
<CardContent className="flex items-center justify-between relative z-10">
<span className="text-5xl font-bold text-white">{validCount}</span>
<div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
<Shield className="h-6 w-6 text-white" />
</div>
</CardContent>
</Card>
<OverviewCard {/* Expiring Soon */}
title={t('expiringSoon')} <Card
value={expiringCount} className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10"
icon={<ShieldAlert className="h-6 w-6 text-white" />} style={{
color="amber" background:
className="hover:scale-105 transition-transform duration-200" theme === "dark"
/> ? "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, rgba(251,191,36,0.6) 100%)"
: "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, #fbbf24 100%)",
}}
>
<div className="absolute inset-0 z-0 opacity-10">
<div
className="w-full h-full"
style={{
backgroundImage: `linear-gradient(#000 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px)`,
backgroundSize: "20px 20px",
}}
/>
</div>
<CardHeader className="pb-2 relative z-10">
<CardTitle className="text-sm font-medium text-white">
{t("expiringSoon")}
</CardTitle>
</CardHeader>
<CardContent className="flex items-center justify-between relative z-10">
<span className="text-5xl font-bold text-white">{expiringCount}</span>
<div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
<ShieldAlert className="h-6 w-6 text-white" />
</div>
</CardContent>
</Card>
<OverviewCard {/* Expired */}
title={t('expired')} <Card
value={expiredCount} className="border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10"
icon={<ShieldX className="h-6 w-6 text-white" />} style={{
color="red" background:
className="hover:scale-105 transition-transform duration-200" theme === "dark"
/> ? "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, rgba(239,68,68,0.6) 100%)"
: "linear-gradient(135deg, rgba(65,59,55,0.8) 0%, #ef4444 100%)",
}}
>
<div className="absolute inset-0 z-0 opacity-10">
<div
className="w-full h-full"
style={{
backgroundImage: `linear-gradient(#000 1px, transparent 1px),
linear-gradient(90deg, #fff 1px, transparent 1px)`,
backgroundSize: "20px 20px",
}}
/>
</div>
<CardHeader className="pb-2 relative z-10">
<CardTitle className="text-sm font-medium text-white">
{t("expired")}
</CardTitle>
</CardHeader>
<CardContent className="flex items-center justify-between relative z-10">
<span className="text-5xl font-bold text-white">{expiredCount}</span>
<div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
<ShieldX className="h-6 w-6 text-white" />
</div>
</CardContent>
</Card>
</div> </div>
); );
}; };