Skip to content

Commit d97368f

Browse files
martinwq997martinwq997
committed
crate overview page
2 parents d1cdfdb + db8a0b8 commit d97368f

File tree

10 files changed

+327
-12
lines changed

10 files changed

+327
-12
lines changed

‎app/api/fetchCrate/route.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
const fetchCrateData = async (cratename: string, version: string) => {
2+
// 这里模拟一个API请求，实际应替换为真实的API调用
3+
const response = await fetch(`https://example-api.com/crates/${cratename}/${version}`);
4+
return await response.json();
5+
};
6+
7+
export default fetchCrateData;

‎app/homepage/[name]/[version]/dependencies/page.tsx‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import React from 'react';
2+
import { Link, useLocation } from 'react-router-dom';
3+
const CratePage = () => {
4+
// Other code
5+
6+
return (
7+
<div>
8+
{/* Existing header and search */}
9+
<header className="bg-white shadow p-4">
10+
<div className="flex justify-between items-center">
11+
<div className="text-xl font-bold flex flex-col items-start space-y-1">
12+
<div className="flex items-center space-x-1">
13+
<span>open</span>
14+
<span className="text-green-500">/</span>
15+
<span>source</span>
16+
<span className="text-green-500">/</span>
17+
<span>insights</span>
18+
</div>
19+
<div className="flex items-center space-x-2 mt-15">
20+
<span>tokio</span>
21+
<div className="relative">
22+
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
23+
1.41.1
24+
<svg
25+
className="ml-2 w-4 h-4"
26+
viewBox="0 0 20 20"
27+
fill="currentColor"
28+
>
29+
<path
30+
fillRule="evenodd"
31+
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
32+
clipRule="evenodd"
33+
/>
34+
</svg>
35+
</button>
36+
{/* 这里可以添加版本选择的下拉菜单 */}
37+
</div>
38+
</div>
39+
</div>
40+
<div className="flex items-center space-x-4">
41+
<input
42+
type="text"
43+
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
44+
placeholder="Search..."
45+
/>
46+
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
47+
Search
48+
</button>
49+
</div>
50+
</div>
51+
52+
<nav className="mt-4">
53+
<ul className="flex space-x-4 text-gray-500 relative">
54+
<li className="cursor-pointer relative">
55+
<a href="/homepage/search/ad" className="block py-2 relative z-10">Overview</a>
56+
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
57+
</li>
58+
<li className="cursor-pointer relative">
59+
<a href="#" className="block py-2 relative z-10">Dependencies</a>
60+
</li>
61+
<li className="cursor-pointer relative">
62+
<a href="#" className="block py-2 relative z-10">Dependents</a>
63+
</li>
64+
<li className="cursor-pointer relative">
65+
<a href="#" className="block py-2 relative z-10">Compare</a>
66+
</li>
67+
<li className="cursor-pointer relative">
68+
<a href="#" className="block py-2 relative z-10">Versions</a>
69+
</li>
70+
</ul>
71+
</nav>
72+
</header>
73+
74+
75+
76+
</div>
77+
);
78+
};
79+
80+
export default CratePage;

‎app/homepage/[name]/[version]/page.tsx‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
import React from 'react';
2+
import { Link, useLocation } from 'react-router-dom';
3+
const CratePage = () => {
4+
// Other code
5+
6+
return (
7+
<div>
8+
{/* Existing header and search */}
9+
<header className="bg-white shadow p-4">
10+
<div className="flex justify-between items-center">
11+
<div className="text-xl font-bold flex flex-col items-start space-y-1">
12+
<div className="flex items-center space-x-1">
13+
<span>open</span>
14+
<span className="text-green-500">/</span>
15+
<span>source</span>
16+
<span className="text-green-500">/</span>
17+
<span>insights</span>
18+
</div>
19+
<div className="flex items-center space-x-2 mt-15">
20+
<span>tokio</span>
21+
<div className="relative">
22+
<button className="flex items-center px-4 py-2 border border-gray-300 rounded hover:bg-gray-100">
23+
1.41.1
24+
<svg
25+
className="ml-2 w-4 h-4"
26+
viewBox="0 0 20 20"
27+
fill="currentColor"
28+
>
29+
<path
30+
fillRule="evenodd"
31+
d="M5 10a1 1 0 011-1h8a1 1 0 110 2H6a1 1 0 01-1-1z"
32+
clipRule="evenodd"
33+
/>
34+
</svg>
35+
</button>
36+
{/* 这里可以添加版本选择的下拉菜单 */}
37+
</div>
38+
</div>
39+
</div>
40+
<div className="flex items-center space-x-4">
41+
<input
42+
type="text"
43+
className="p-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500"
44+
placeholder="Search..."
45+
/>
46+
<button className="bg-blue-600 text-white px-4 py-2 rounded-r-md hover:bg-blue-700">
47+
Search
48+
</button>
49+
</div>
50+
</div>
51+
52+
<nav className="mt-4">
53+
<ul className="flex space-x-4 text-gray-500 relative">
54+
<li className="cursor-pointer relative">
55+
<a href="/homepage/search/ad" className="block py-2 relative z-10">Overview</a>
56+
<div className="absolute bottom-0 left-0 w-full h-1 bg-blue-500"></div>
57+
</li>
58+
<li className="cursor-pointer relative">
59+
<a href="/homepage/search/ad/dependencies" className="block py-2 relative z-10">Dependencies</a>
60+
</li>
61+
<li className="cursor-pointer relative">
62+
<a href="#" className="block py-2 relative z-10">Dependents</a>
63+
</li>
64+
<li className="cursor-pointer relative">
65+
<a href="#" className="block py-2 relative z-10">Compare</a>
66+
</li>
67+
<li className="cursor-pointer relative">
68+
<a href="#" className="block py-2 relative z-10">Versions</a>
69+
</li>
70+
</ul>
71+
</nav>
72+
</header>
73+
74+
{/* cve */}
75+
<div className="container mx-auto my-8 grid grid-cols-1 lg:grid-cols-2 gap-6">
76+
<div className="space-y-6">
77+
{/* Security Advisories */}
78+
<div className="bg-white shadow rounded-lg p-4">
79+
<h2 className="text-lg font-bold mb-2">Security Advisories</h2>
80+
<p>No advisories detected.</p>
81+
</div>
82+
{/* Licenses */}
83+
<div className="bg-white shadow rounded-lg p-4">
84+
<h2 className="text-lg font-bold mb-2">Licenses</h2>
85+
<div className="mb-2">
86+
<span className="font-bold">LICENSES:</span> MIT
87+
</div>
88+
<div className="mb-2">
89+
<span className="font-bold">DEPENDENCY LICENSES:</span>
90+
<ul className="list-disc pl-6">
91+
<li>Apache-2.0 OR MIT (116)</li>
92+
<li>MIT (27)</li>
93+
<li>MIT OR Uniclicense (7)</li>
94+
{/* Add more dependency licenses */}
95+
</ul>
96+
</div>
97+
</div>
98+
{/* Dependencies */}
99+
<div className="bg-white shadow rounded-lg p-4">
100+
<h2 className="text-lg font-bold mb-2">Dependencies</h2>
101+
<div className="mb-2">
102+
<span className="font-bold">Direct:</span> 23
103+
</div>
104+
<div className="mb-2">
105+
<span className="font-bold">Indirect:</span> 139
106+
</div>
107+
<a href="#" className="text-blue-500 hover:underline">
108+
View all dependencies
109+
</a>
110+
</div>
111+
{/* Dependents */}
112+
<div className="bg-white shadow rounded-lg p-4">
113+
<h2 className="text-lg font-bold mb-2">Dependents</h2>
114+
<div className="mb-2">
115+
<span className="font-bold">Direct:</span> 23
116+
</div>
117+
<div className="mb-2">
118+
<span className="font-bold">Indirect:</span> 139
119+
</div>
120+
<a href="#" className="text-blue-500 hover:underline">
121+
View all dependencies
122+
</a>
123+
</div>
124+
</div>
125+
<div className="bg-white shadow rounded-lg p-4">
126+
<h2 className="text-lg font-bold mb-2">OpenSSF scorecard</h2>
127+
<p>The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.</p>
128+
<a href="#" className="text-blue-500 hover:underline">
129+
View information about checks and how to fix failures.
130+
</a>
131+
<div className="flex items-center justify-between mt-4">
132+
<div className="text-3xl font-bold">8.3/10</div>
133+
<div className="text-sm text-gray-500">Scorecard as of November 11, 2024.</div>
134+
</div>
135+
<div className="mt-4 space-y-2">
136+
<div className="flex justify-between">
137+
<span>Code-Review</span>
138+
<span>10/10</span>
139+
</div>
140+
<div className="flex justify-between">
141+
<span>Maintained</span>
142+
<span>10/10</span>
143+
</div>
144+
<div className="flex justify-between">
145+
<span>CI/Best-Practices</span>
146+
<span>0/10</span>
147+
</div>
148+
<div className="flex justify-between">
149+
<span>License</span>
150+
<span>10/10</span>
151+
</div>
152+
<div className="flex justify-between">
153+
<span>Dangerous-Workflow</span>
154+
<span>10/10</span>
155+
</div>
156+
<div className="flex justify-between">
157+
<span>Security-Policy</span>
158+
<span>10/10</span>
159+
</div>
160+
<div className="flex justify-between">
161+
<span>Token-Permissions</span>
162+
<span>10/10</span>
163+
</div>
164+
<div className="flex justify-between">
165+
<span>Binary-Artifacts</span>
166+
<span>10/10</span>
167+
</div>
168+
<div className="flex justify-between">
169+
<span>Pinned-Dependencies</span>
170+
<span>0/10</span>
171+
</div>
172+
</div>
173+
</div>
174+
</div>
175+
</div>
176+
);
177+
};
178+
179+
export default CratePage;

‎app/newpage/styles.css‎ renamed to ‎app/homepage/cratepage/page.tsx‎

File renamed without changes.

‎app/newpage/layout.tsx‎ renamed to ‎app/homepage/layout.tsx‎

File renamed without changes.

‎app/newpage/page.tsx‎ renamed to ‎app/homepage/page.tsx‎

File renamed without changes.

‎app/newpage/search/page.tsx‎ renamed to ‎app/homepage/search/page.tsx‎

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
"use client";
22

3+
import Link from 'next/link';
34
import { useState } from 'react';
45

56
export default function Home() {
@@ -57,17 +58,19 @@ export default function Home() {
5758

5859
{/*搜索数据展示 */}
5960
<div className="max-w-2xl ml-10 p-4">
60-
<div id="results" className="space-y-4">
61-
{results.map((item, index) => (
62-
<div
63-
key={index}
64-
className="p-4 rounded-md hover:bg-blue-100 transition"
65-
>
66-
<strong>{item.crate_name}</strong>
67-
<div>Crate {item.version}Published {item.date}</div>
68-
</div>
69-
))}
70-
</div>
61+
<Link href="/homepage/tokio/1.41.1">
62+
<div id="results" className="space-y-4">
63+
{results.map((item, index) => (
64+
<div
65+
key={index}
66+
className="p-4 rounded-md hover:bg-blue-100 transition"
67+
>
68+
<strong>{item.crate_name}</strong>
69+
<div>Crate {item.version}Published {item.date}</div>
70+
</div>
71+
))}
72+
</div>
73+
</Link>
7174
</div>
7275
</div>
7376
);

‎app/homepage/styles.css‎

Whitespace-only changes.

‎components/CratePage.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
//import { useParams } from 'react-router-dom';
2+
// import { useState, useEffect } from 'react';
3+
// import './CratePage.css';
4+
5+
// interface CrateData {
6+
// crate_name: string;
7+
// version: string;
8+
// date: string;
9+
// }
10+
11+
// const CratePage: React.FC = () => {
12+
// const { name, version } = useParams<{ name: string; version: string }>();
13+
// const [crateData, setCrateData] = useState<CrateData | null>(null);
14+
15+
// useEffect(() => {
16+
// const fetchCrateData = async () => {
17+
// try {
18+
// const response = await fetch(`/api/crates/${name}/${version}`);
19+
// const data = await response.json();
20+
// setCrateData(data);
21+
// } catch (error) {
22+
// console.error('Error fetching crate data:', error);
23+
// }
24+
// };
25+
26+
// fetchCrateData();
27+
// }, [name, version]);
28+
29+
// if (!crateData) {
30+
// return <div>Loading...</div>;
31+
// }
32+
33+
// return (
34+
// <div className="crate-page">
35+
// <div className="bg-white shadow p-4">
36+
// <h1>{crateData.crate_name}</h1>
37+
// <p>Version: {crateData.version}</p>
38+
// <p>Published: {crateData.date}</p>
39+
// {/* Additional crate details */}
40+
// </div>
41+
// </div>
42+
// );
43+
// };
44+
45+
// export default CratePage;

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"postcss": "8.4.49",
2424
"react": "18.3.1",
2525
"react-dom": "18.3.1",
26+
"react-router-dom": "^6.28.0",
2627
"tailwindcss": "3.4.15",
2728
"typescript": "5.6.3",
2829
"use-debounce": "^10.0.1",
@@ -40,4 +41,4 @@
4041
"engines": {
4142
"node": ">=20.12.0"
4243
}
43-
}
44+
}

0 commit comments

Comments
 (0)