Something went wrong. Try again.
because I got bored of customising my CV for every job
Something went wrong. Try again.
1.6 kB · 56 lines
TSX
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657import { Card, StatusDot } from "@cv/ui";import type { QueueStatsQuery } from "@/generated/graphql";
type Stats = NonNullable<QueueStatsQuery["queueStats"]>;
const formatDuration = (seconds: number): string => { if (seconds < 60) return `${Math.round(seconds)}s`; const minutes = Math.floor(seconds / 60); if (minutes < 60) return `${minutes}m ${Math.round(seconds % 60)}s`; const hours = Math.floor(minutes / 60); return `${hours}h ${minutes % 60}m`;};
const DetailRow = ({ label, value,}: { label: string; value: React.ReactNode;}) => ( <div className="flex justify-between py-1.5 border-b border-ctp-surface1 last:border-b-0"> <span className="text-sm text-ctp-subtext0">{label}</span> <span className="text-sm font-medium text-ctp-text">{value}</span> </div>);
interface QueueStatsCardProps { stats: Stats;}
export const QueueStatsCard = ({ stats }: QueueStatsCardProps) => ( <Card> <h3 className="mb-3 text-lg font-medium text-ctp-text">Queue</h3> <div className="space-y-0"> <DetailRow label="Pending" value={ <span className="flex items-center gap-2"> <StatusDot color={stats.pending === 0 ? "green" : "yellow"} /> {stats.pending} </span> } /> <DetailRow label="Scheduled" value={stats.scheduled} /> <DetailRow label="Processing" value={stats.processing} /> <DetailRow label="Oldest Pending" value={ stats.oldestPendingSeconds != null ? formatDuration(stats.oldestPendingSeconds) : "none" } /> </div> </Card>);