Skip to content

Commit 384c6f4

Browse files
juliankepkajuliankepka
committed
unterseiten angepasst
1 parent addd3f8 commit 384c6f4

File tree

4 files changed

+314
-351
lines changed

4 files changed

+314
-351
lines changed

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,20 @@ export default function ProjectStats({
6363
<Scale className="h-4 w-4" />
6464
{project.license}
6565
</Badge>
66-
<StatCard icon={Star} value={project.starsCount} />
67-
<StatCard icon={GitFork} value={project.forksCount} />
66+
<Badge
67+
variant="outline"
68+
className="flex w-fit items-center gap-1.5 text-sm"
69+
>
70+
<Star className="h-4 w-4" />
71+
{project.starsCount.toLocaleString('de-DE')}
72+
</Badge>
73+
<Badge
74+
variant="outline"
75+
className="flex w-fit items-center gap-1.5 text-sm"
76+
>
77+
<GitFork className="h-4 w-4" />
78+
{project.forksCount.toLocaleString('de-DE')}
79+
</Badge>
6880
</div>
6981

7082
<div className="flex flex-wrap gap-x-4 text-xs text-gray-400">

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

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { useState } from 'react'
2+
import Link from 'next/link'
23
import { ChevronDown } from 'lucide-react'
34
import { Vuln, AffectedComponent } from './types'
45

@@ -43,14 +44,17 @@ export default function VulnerabilityList({
4344
}
4445
}
4546

46-
const visible = expanded ? vulns : vulns.slice(0, 7)
47-
const hasMore = vulns.length > 7
47+
const sortedVulns = [...vulns].sort((a, b) => {
48+
const aScore = cveMap.get(a.cveId)?.cvss ?? 0
49+
const bScore = cveMap.get(b.cveId)?.cvss ?? 0
50+
return bScore - aScore
51+
})
52+
53+
const visible = expanded ? sortedVulns : sortedVulns.slice(0, 7)
54+
const hasMore = sortedVulns.length > 7
4855

4956
return (
5057
<div>
51-
<h2 className="mb-4 text-xl font-semibold text-white">
52-
Vulnerabilities fixed in later releases
53-
</h2>
5458
{vulns.length === 0 ? (
5559
<p className="rounded-md border border-gray-700 bg-gray-800 px-4 py-3 text-sm text-gray-400">
5660
None found
@@ -60,9 +64,10 @@ export default function VulnerabilityList({
6064
{visible.map((vuln) => {
6165
const details = cveMap.get(vuln.cveId)
6266
return (
63-
<div
67+
<Link
6468
key={vuln.cveId}
65-
className="rounded-md border border-gray-700 bg-gray-800 p-3"
69+
href={`/vulnerability-database/${vuln.cveId}`}
70+
className="block rounded-md border border-gray-700 bg-gray-800 p-3 transition-colors hover:border-gray-500 hover:bg-gray-700/70"
6671
>
6772
<div className="flex items-center justify-between">
6873
<span className="text-sm font-semibold text-white">
@@ -92,7 +97,7 @@ export default function VulnerabilityList({
9297
</span>
9398
)}
9499
</div>
95-
</div>
100+
</Link>
96101
)
97102
})}
98103
</div>

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

Lines changed: 64 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
import Head from 'next/head'
22
import useSWR from 'swr'
3+
import Link from 'next/link'
4+
import { ExternalLink } from 'lucide-react'
35
import { fetcher } from '@/lib/fetcher'
46
import { extractPackageName } from '@/lib/utils'
57
import { PackageInspectResult } from '@/components/package-inspector/types'
68
import ScoreCardChart from '@/components/package-inspector/ScoreCardChart'
79
import ProjectStats from '@/components/package-inspector/ProjectStats'
810
import OverallScoreGauge from '@/components/package-inspector/OverallScoreIcon'
911
import VulnerabilityList from '@/components/package-inspector/VulnerabilityList'
12+
import { Button } from '@/components/ui/button'
1013

1114
export default function PurlPageComponent({ purl }: { purl?: string }) {
1215
const purlString = typeof purl === 'string' ? purl : ''
@@ -59,45 +62,75 @@ export default function PurlPageComponent({ purl }: { purl?: string }) {
5962
<p className="mb-1 text-sm font-medium uppercase tracking-wider text-gray-500">
6063
Package Inspector
6164
</p>
62-
<div className="flex items-baseline gap-3">
63-
<h1 className="text-3xl font-bold text-white">
64-
{packageName}
65-
</h1>
66-
{component.version && (
67-
<span className="text-lg text-gray-400">
68-
v{component.version}
69-
</span>
70-
)}
71-
</div>
7265
</div>
73-
{/* Top row: Project stats + Overall score */}
74-
<div className="mb-8 flex items-start gap-16">
75-
<div className="min-w-0 max-w-2xl flex-1">
76-
<ProjectStats
77-
project={project}
78-
purl={result.purl}
79-
published={component.published}
80-
isMalicious={result.maliciousPackage != null}
81-
/>
82-
</div>
83-
<div className="shrink-0">
84-
<OverallScoreGauge score={project.scoreCardScore} />
66+
67+
{/* Hero card */}
68+
<div className="mb-4 rounded-xl border border-gray-700 bg-gray-800/50 p-6">
69+
<div className="flex items-start justify-between gap-6">
70+
<div className="min-w-0 flex-1">
71+
<div className="mb-1 flex items-baseline gap-3">
72+
<h1 className="text-3xl font-bold text-white">
73+
{packageName}
74+
</h1>
75+
{component.version && (
76+
<span className="text-lg text-gray-400">
77+
v{component.version}
78+
</span>
79+
)}
80+
</div>
81+
<ProjectStats
82+
project={project}
83+
purl={result.purl}
84+
published={component.published}
85+
isMalicious={result.maliciousPackage != null}
86+
/>
87+
</div>
88+
<div className="shrink-0">
89+
<OverallScoreGauge score={project.scoreCardScore} />
90+
</div>
8591
</div>
8692
</div>
8793

88-
{/* Bottom row: Scorecard bars + Vulnerability list */}
89-
<div className="grid items-start gap-12 md:grid-cols-2">
90-
<div>
91-
<h2 className="mb-4 text-xl font-semibold text-white">
92-
Open SSF Scorecard Checks
94+
{/* Two-column: Scorecard + Vulnerabilities */}
95+
<div className="grid items-stretch gap-4 md:grid-cols-2">
96+
<div className="rounded-xl border border-gray-700 bg-gray-800/50 p-6">
97+
<h2 className="mb-4 text-base font-bold text-white">
98+
Open SSF Scorecard
9399
</h2>
94100
<ScoreCardChart checks={project.scoreCard.checks} />
95101
</div>
96102

97-
<VulnerabilityList
98-
vulns={vulns}
99-
affectedComponents={affectedComponents}
100-
/>
103+
<div className="rounded-xl border border-gray-700 bg-gray-800/50 p-6">
104+
<h2 className="mb-4 text-base font-bold text-white">
105+
Vulnerabilities fixed in later releases
106+
</h2>
107+
<VulnerabilityList
108+
vulns={vulns}
109+
affectedComponents={affectedComponents}
110+
/>
111+
</div>
112+
</div>
113+
114+
{/* Bottom buttons */}
115+
<div className="mt-6 flex justify-end gap-3">
116+
<div>
117+
<Button>
118+
<Link href="/package-inspector">Get Back</Link>
119+
</Button>
120+
</div>
121+
<div>
122+
<Button>
123+
<a
124+
target="_blank"
125+
href="https://main.devguard.org/"
126+
rel="noopener noreferrer"
127+
className="flex items-center gap-2"
128+
>
129+
Try DevGuard
130+
<ExternalLink size={16} />
131+
</a>
132+
</Button>
133+
</div>
101134
</div>
102135
</div>
103136
)

0 commit comments

Comments
 (0)