feat: implement public ca relevancy (only latest & hierarchical)

This commit is contained in:
dyzulk
2026-01-07 11:53:20 +07:00
parent b298fd0572
commit a7c7a58fcc

View File

@@ -559,31 +559,44 @@ export default function HomeClient() {
<div className="animate-spin rounded-full h-12 w-12 border-t-2 border-brand-500"></div>
</div>
) : (
<div className="space-y-16">
{/* Root CA Section */}
<div className="flex flex-col items-center">
<h3 className="text-sm font-bold text-brand-500 uppercase tracking-widest mb-8 px-4 py-1 bg-brand-50 dark:bg-brand-500/10 rounded-full border border-brand-100 dark:border-brand-500/20">
{t('root_ca_hierarchy')}
</h3>
<div className="grid grid-cols-1 gap-8 w-full max-w-2xl px-4">
{certificates.filter(c => c.type === 'root').map((cert) => (
<CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
))}
</div>
</div>
<div className="space-y-24">
{Object.entries(
certificates.reduce((acc, cert) => {
const famId = cert.family_id || 'unknown';
if (!acc[famId]) acc[famId] = [];
acc[famId].push(cert);
return acc;
}, {} as Record<string, CaCertificate[]>)
).map(([famId, familyCerts]) => (
<div key={famId} className="flex flex-col items-center">
{/* Root Section of the Family */}
<div className="w-full flex flex-col items-center">
<h3 className="text-sm font-bold text-brand-500 uppercase tracking-widest mb-8 px-4 py-1 bg-brand-50 dark:bg-brand-500/10 rounded-full border border-brand-100 dark:border-brand-500/20">
{t('root_ca_hierarchy')}
</h3>
<div className="grid grid-cols-1 gap-8 w-full max-w-3xl px-4">
{familyCerts.filter(c => c.type === 'root').map((cert) => (
<CaCard key={cert.serial} cert={cert} isRoot={true} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
))}
</div>
</div>
{/* Intermediate CAs Section */}
<div className="flex flex-col items-center">
<div className="w-px h-12 bg-gradient-to-b from-brand-500/50 to-transparent mb-8"></div>
<h3 className="text-sm font-bold text-blue-500 uppercase tracking-widest mb-8 px-4 py-1 bg-blue-50 dark:bg-blue-500/10 rounded-full border border-blue-100 dark:border-blue-500/20">
{t('intermediate_ca_hierarchy')}
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-6xl px-4">
{certificates.filter(c => c.type !== 'root').map((cert) => (
<CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
))}
{/* Connecting Line */}
<div className="w-px h-16 bg-gradient-to-b from-brand-500/50 via-blue-500/30 to-transparent my-4"></div>
{/* Intermediates Section of the Family */}
<div className="w-full flex flex-col items-center">
<h3 className="text-sm font-bold text-blue-500 uppercase tracking-widest mb-8 px-4 py-1 bg-blue-50 dark:bg-blue-500/10 rounded-full border border-blue-100 dark:border-blue-500/20">
{t('intermediate_ca_hierarchy')}
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-6xl px-4">
{familyCerts.filter(c => c.type !== 'root').map((cert) => (
<CaCard key={cert.serial} cert={cert} isRoot={false} t={t} selectedOs={selectedOs} setSelectedOs={setSelectedOs} />
))}
</div>
</div>
</div>
</div>
))}
{/* OS Selection Tabs for Global Guide */}
<div className="max-w-4xl mx-auto mt-20 p-8 rounded-[2rem] bg-gray-50 dark:bg-gray-900/50 border border-gray-100 dark:border-gray-800">