-
Notifications
You must be signed in to change notification settings - Fork 62
/
SigningKey.tsx
75 lines (66 loc) · 2.14 KB
/
SigningKey.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { Badge } from '@inngest/components/Badge';
import { Card } from '@inngest/components/Card';
import { Time } from '@inngest/components/Time';
import { RiStarFill } from '@remixicon/react';
import { Secret } from '@/components/Secret';
import { DeleteSigningKeyButton } from './DeleteSigningKeyButton';
type Props = {
signingKey: {
createdAt: Date;
decryptedValue: string;
id: string;
isActive: boolean;
user: {
email: string;
name: string | null;
} | null;
};
};
export function SigningKey({ signingKey }: Props) {
let accentColor = 'bg-emerald-600';
let controls = null;
let description = null;
let title = 'Current key';
if (!signingKey.isActive) {
accentColor = 'bg-amber-400';
controls = (
<div className="flex gap-2">
<DeleteSigningKeyButton signingKeyID={signingKey.id} />
</div>
);
description = 'This key is inactive. You can activate it using rotation.';
title = 'New key';
}
let pill = null;
if (signingKey.createdAt > new Date(Date.now() - 24 * 60 * 60 * 1000)) {
pill = (
<Badge className="border-0 bg-amber-100">
<RiStarFill className="text-amber-600" size={16} />
<span className="text-amber-600">New</span>
</Badge>
);
}
return (
<Card accentColor={accentColor} accentPosition="left" className="mb-4">
<Card.Content className="px-4 py-0">
<div className="py-4">
<div className="flex">
<div className="flex grow items-center gap-2 font-medium text-slate-950">
{title}
{pill}
</div>
{controls && <div>{controls}</div>}
</div>
<p className="text-sm text-slate-500">{description}</p>
</div>
<Secret className="mb-4" kind="signing-key" secret={signingKey.decryptedValue} />
</Card.Content>
<Card.Footer className="flex text-sm text-slate-500">
<span className="grow">
Created at <Time value={signingKey.createdAt} />
</span>
{signingKey.user && <span>Created by {signingKey.user.name ?? signingKey.user.email}</span>}
</Card.Footer>
</Card>
);
}