Skip to content

Commit 427161d

Browse files
juliankepkajuliankepka
committed
revision package inspector
1 parent 18c0ed5 commit 427161d

6 files changed

Lines changed: 454 additions & 90 deletions

File tree

‎src/components/package-inspector/OverallScoreIcon.tsx‎

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@ import React from 'react'
22
import { Label, Pie, PieChart } from 'recharts'
33
import { cn } from '@/lib/utils'
44
import { ChartContainer } from '@/components/ui/chart'
5+
import { ScoreCardCheck } from './types'
56

67
interface OverallScoreGaugeProps {
78
score: number
89
maxScore?: number
10+
checks?: ScoreCardCheck[]
911
}
1012

1113
function getScoreLabel(score: number): string {
@@ -31,7 +33,11 @@ function getScoreFill(score: number): string {
3133
export default function OverallScoreGauge({
3234
score,
3335
maxScore = 10,
36+
checks,
3437
}: OverallScoreGaugeProps) {
38+
const passingCount = checks?.filter((c) => c.score > 0).length ?? 0
39+
const failingCount = checks?.filter((c) => c.score === 0).length ?? 0
40+
const naCount = checks?.filter((c) => c.score < 0).length ?? 0
3541
const data = [
3642
{
3743
name: 'Score',
@@ -46,11 +52,12 @@ export default function OverallScoreGauge({
4652
]
4753

4854
return (
49-
<div className="flex flex-col items-center">
55+
<div className="flex items-center">
56+
<div className="flex flex-col items-center pr-5">
5057
<h3 className="mb-2 text-base font-semibold text-white">
5158
Overall Score
5259
</h3>
53-
<div className="h-[154px] w-[154px]">
60+
<div className="h-[154px] w-[170px]">
5461
<ChartContainer config={{}} className="aspect-square w-full">
5562
<PieChart>
5663
<Pie
@@ -106,6 +113,35 @@ export default function OverallScoreGauge({
106113
>
107114
{getScoreLabel(score)}
108115
</span>
116+
</div>
117+
{checks && (
118+
<div className="mt-3 flex flex-col items-center gap-3">
119+
<div className="text-center">
120+
<div className="font-mono text-base font-bold text-green-400">
121+
{passingCount}
122+
</div>
123+
<div className="text-[10px] text-gray-500">
124+
passing
125+
</div>
126+
</div>
127+
<div className="w-full h-px bg-white/[0.06]" />
128+
<div className="text-center">
129+
<div className="font-mono text-base font-bold text-red-400">
130+
{failingCount}
131+
</div>
132+
<div className="text-[10px] text-gray-500">
133+
failing
134+
</div>
135+
</div>
136+
<div className="w-full h-px bg-white/[0.06]" />
137+
<div className="text-center">
138+
<div className="font-mono text-base font-bold text-gray-500">
139+
{naCount}
140+
</div>
141+
<div className="text-[10px] text-gray-500">n/a</div>
142+
</div>
143+
</div>
144+
)}
109145
</div>
110146
)
111147
}

‎src/components/package-inspector/PackageHeroCard.tsx‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
import {
2+
ExternalLink,
3+
Star,
4+
GitFork,
5+
Scale,
6+
Package,
7+
ShieldCheck,
8+
} from 'lucide-react'
9+
import { Component, Project } from '@/components/package-inspector/types'
10+
11+
interface PackageHeroCardProps {
12+
packageName: string
13+
packageManager: string
14+
component: Component
15+
project: Project | undefined
16+
isMalicious: boolean
17+
}
18+
19+
export default function PackageHeroCard({
20+
packageName,
21+
packageManager,
22+
component,
23+
project,
24+
isMalicious,
25+
}: PackageHeroCardProps) {
26+
return (
27+
<div className="relative mb-4 flex items-center overflow-hidden rounded-xl border border-gray-700 bg-gray-800/50 px-7 py-[16px] justify-between">
28+
<div>
29+
{/* Name */}
30+
<div className="flex min-w-[160px] flex-col gap-0.5 pr-7">
31+
<h1 className="font-mono text-[22px] font-semibold leading-none tracking-tight text-[#f0f0f0]">
32+
{packageName}
33+
</h1>
34+
{component.version && (
35+
<span className="mt-1 font-mono tracking-wider text-xs text-gray-500">
36+
v{component.version}
37+
</span>
38+
)}
39+
{project?.description && (
40+
<span className="mt-1 text-xs text-gray-500 font-light tracking-wide">
41+
{project.description}
42+
</span>
43+
)}
44+
</div>
45+
{/* Badge */}
46+
{project && !isMalicious && (
47+
<div className="flex flex-shrink-0 flex-col gap-1.5 pt-5">
48+
<div className="flex items-center gap-1.5 rounded-[5px] border border-[#1e4d35] bg-[#0f2a1e] px-3 py-1.5 font-mono text-[11px] text-emerald-400">
49+
<ShieldCheck className="h-3.5 w-3.5 flex-shrink-0" />
50+
Not flagged as malicious
51+
</div>
52+
<span className="pl-0.5 font-mono text-xs text-gray-500">
53+
Scorecard:{' '}
54+
{new Date(
55+
project.updatedAt,
56+
).toLocaleDateString('en-US', {
57+
year: 'numeric',
58+
month: 'short',
59+
day: 'numeric',
60+
})}
61+
</span>
62+
</div>
63+
)}
64+
</div>
65+
66+
<div className='flex flex-col items-end gap-3'>
67+
{/* Stats */}
68+
<div className="flex items-center gap-5 pl-7">
69+
<div className="flex items-center gap-1.5 whitespace-nowrap font-mono text-xs text-[#888]">
70+
<Package className="h-3.5 w-3.5 opacity-60" />
71+
<span className="font-medium text-[#bbb]">
72+
{packageManager}
73+
</span>
74+
</div>
75+
{project && (
76+
<>
77+
<div className="flex items-center gap-1.5 whitespace-nowrap font-mono text-xs text-[#888]">
78+
<Scale className="h-[13px] w-[13px] opacity-60" />
79+
<span className="font-medium text-[#bbb]">
80+
{project.license}
81+
</span>
82+
</div>
83+
<div className="flex items-center gap-1.5 whitespace-nowrap font-mono text-xs text-[#888]">
84+
<Star className="h-[13px] w-[13px] opacity-60" />
85+
<span className="font-medium text-[#bbb]">
86+
{project.starsCount.toLocaleString('de-DE')}
87+
</span>
88+
</div>
89+
<div className="flex items-center gap-1.5 whitespace-nowrap font-mono text-xs text-[#888]">
90+
<GitFork className="h-[13px] w-[13px] opacity-60" />
91+
<span className="font-medium text-[#bbb]">
92+
{project.forksCount.toLocaleString('de-DE')}
93+
</span>
94+
</div>
95+
</>
96+
)}
97+
</div>
98+
99+
100+
101+
{/* Meta: Published */}
102+
{component.published && (
103+
<div className="flex flex-col items-end pl-7">
104+
<span className="font-mono uppercase tracking-widest text-xs text-gray-500">
105+
Published
106+
</span>
107+
<span className="font-mono text-[11px] text-gray-400">
108+
{new Date(component.published).toLocaleDateString(
109+
'en-US',
110+
{
111+
year: 'numeric',
112+
month: 'short',
113+
day: 'numeric',
114+
},
115+
)}
116+
</span>
117+
</div>
118+
)}
119+
120+
{/* Links */}
121+
{project && (
122+
<div className="flex items-center gap-4 pl-7">
123+
<a
124+
href={'https://' + project.projectKey}
125+
target="_blank"
126+
rel="noopener noreferrer"
127+
className="flex items-center gap-[5px] whitespace-nowrap font-mono text-[11px] text-emerald-400 opacity-85 transition-opacity hover:opacity-100"
128+
>
129+
<ExternalLink className="h-[11px] w-[11px]" />
130+
GitHub
131+
</a>
132+
{project.homepage && (
133+
<a
134+
href={project.homepage}
135+
target="_blank"
136+
rel="noopener noreferrer"
137+
className="flex items-center gap-[5px] whitespace-nowrap font-mono text-[11px] text-emerald-400 opacity-85 transition-opacity hover:opacity-100"
138+
>
139+
<ExternalLink className="h-[11px] w-[11px]" />
140+
Homepage
141+
</a>
142+
)}
143+
</div>
144+
)}
145+
</div>
146+
</div>
147+
)
148+
}

‎src/components/package-inspector/PackageInspectorPage.tsx‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,11 @@ export function PackageInspectorPage() {
4343

4444
return (
4545
<Container>
46+
{/* Left edge grid pattern */}
47+
<div className="pointer-events-none fixed inset-y-0 left-0 z-50 hidden w-8 border-r border-r-[var(--grid-line-color)] bg-[repeating-linear-gradient(315deg,var(--grid-line-color)_0,var(--grid-line-color)_1px,transparent_0,transparent_50%)] [background-size:10px_10px] bg-fixed opacity-80 sm:block" />
48+
49+
{/* Right edge grid pattern */}
50+
<div className="pointer-events-none fixed inset-y-0 right-0 z-50 hidden w-8 border-l border-l-[var(--grid-line-color)] bg-[repeating-linear-gradient(315deg,var(--grid-line-color)_0,var(--grid-line-color)_1px,transparent_0,transparent_50%)] [background-size:10px_10px] bg-fixed opacity-80 sm:block" />
4651
<div className="pointer-events-none fixed inset-0 -z-50">
4752
<Particles
4853
particleColors={['#ffffff']}

0 commit comments

Comments
 (0)