Skip to content

Commit 62becd2

Browse files
buyfakettbuyfakett
committed
完成tools页面
1 parent 26540fa commit 62becd2

File tree

9 files changed

+313
-28
lines changed

9 files changed

+313
-28
lines changed

‎src/App.jsx

+3
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import Tools from "./components/Tools";
99
import Urls from "./components/Urls";
1010

1111
const App = () => {
12+
// semi-design的主题默认为暗色
13+
document.body.setAttribute('theme-mode', 'dark');
14+
1215
const [wakatimeData, setwakatimeData] = useState(wakatineDefaultData);
1316

1417
useEffect(() => {

‎src/components/NavBar.jsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,12 @@ const NavBar = ({skipUrl}) => {
2222
<Divider layout="vertical" margin='20px' className="bg-white"/>
2323

2424
{/* 链接 */}
25-
{/*<Link*/}
26-
{/* to="/tools"*/}
27-
{/* className="flex items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200"*/}
28-
{/*>*/}
29-
{/* Tools*/}
30-
{/*</Link>*/}
25+
<Link
26+
to="/tools"
27+
className="flex items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200"
28+
>
29+
Tools
30+
</Link>
3131
{/*<Link*/}
3232
{/* to="/urls"*/}
3333
{/* className="flex items-center text-lg font-bold dark:hover:text-blue-400 transition-colors duration-200"*/}

‎src/components/Tools.jsx

-11
This file was deleted.

‎src/components/Tools/CategorySection.jsx

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import ToolSection from './ToolSection';
3+
4+
const CategorySection = ({title, categories}) => {
5+
return (
6+
<div>
7+
<h2 className="mb-6 text-xl font-bold">{title}</h2>
8+
{categories.map((category, index) => (
9+
<div className="mb-8" key={index}>
10+
<h3 className="mb-4 text-lg font-semibold">{category.title}</h3>
11+
{Object.values(category.sections).map((section, sectionIndex) => (
12+
<div className="mb-6" key={sectionIndex}>
13+
<ToolSection title={section.title} tools={section.tools}/>
14+
</div>
15+
))}
16+
</div>
17+
))}
18+
</div>
19+
);
20+
};
21+
22+
export default CategorySection;

‎src/components/Tools/ToolSection.jsx

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import {cn} from "../../lib/utils";
3+
4+
const ToolSection = ({className, title, tools, ...props}) => {
5+
return (
6+
<div
7+
className={cn(
8+
className,
9+
'flex flex-col rounded-xl border border-border py-5 px-3 gap-y-4 sm:gap-y-6'
10+
)}
11+
{...props}
12+
>
13+
<h2 className="px-2 text-lg font-medium">{title}</h2>
14+
<div className="grid grid-cols-1 gap-x-2 gap-y-3 sm:grid-cols-2 sm:gap-y-4">
15+
{tools.map((tool, index) => (
16+
<a
17+
key={index}
18+
className="group relative hover:bg-transparent cursor-pointer"
19+
href={tool.href}
20+
id={tool.name}
21+
target="_blank"
22+
rel="noopener noreferrer"
23+
>
24+
<div className="relative flex flex-row items-center gap-x-4 px-2 py-0.5 transition-all">
25+
<div
26+
className="absolute -inset-0 z-10 rounded-lg border border-border bg-muted opacity-0 transition-all group-hover:opacity-50"/>
27+
<div className="z-20 flex flex-col">
28+
<h3 className="font-medium">{tool.name}</h3>
29+
<p className="text-muted-foreground">{tool.description}</p>
30+
</div>
31+
</div>
32+
</a>
33+
))}
34+
</div>
35+
</div>
36+
);
37+
};
38+
39+
export default ToolSection;

‎src/components/Tools/index.jsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import React from "react";
2+
import {Button} from '@douyinfe/semi-ui';
3+
import {IoIosArrowBack} from "react-icons/io";
4+
import {useNavigate} from "react-router-dom";
5+
import CategorySection from "./CategorySection";
6+
import {DEVICES, SOFTWARE_TOOLS} from "../../config";
7+
8+
const Tools = () => {
9+
const navigate = useNavigate()
10+
return (
11+
<div
12+
className="w-[60%] mx-auto min-h-screen dark:bg-gray-900 text-white flex flex-col items-center p-4 mt-3"
13+
>
14+
<div className="w-full flex justify-start text-white">
15+
<Button
16+
theme='outline'
17+
type='tertiary'
18+
onClick={() => navigate('/')}
19+
>
20+
<IoIosArrowBack/>
21+
返回首页
22+
</Button>
23+
</div>
24+
<div className="mt-5 flex w-full flex-col gap-y-10">
25+
<div>
26+
<h1 className="mb-1 text-2xl font-bold">Tools & Devices</h1>
27+
<p>Tools, software, and devices I use daily</p>
28+
</div>
29+
30+
<CategorySection title="Software Tools" categories={Object.values(SOFTWARE_TOOLS)}/>
31+
<CategorySection title="Hardware Devices" categories={Object.values(DEVICES)}/>
32+
</div>
33+
</div>
34+
);
35+
};
36+
37+
export default Tools;

‎src/components/Urls.jsx

-11
This file was deleted.

‎src/components/Urls/index.jsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from "react";
2+
import {Button} from "@douyinfe/semi-ui";
3+
import {IoIosArrowBack} from "react-icons/io";
4+
import {useNavigate} from "react-router-dom";
5+
6+
const Index = () => {
7+
const navigate = useNavigate()
8+
return (
9+
<div
10+
className="w-[60%] mx-auto min-h-screen dark:bg-gray-900 text-white flex flex-col items-center p-4 mt-3"
11+
>
12+
<div className="w-full flex justify-start text-white">
13+
<Button
14+
theme='outline'
15+
type='tertiary'
16+
onClick={() => navigate('/')}
17+
>
18+
<IoIosArrowBack/>
19+
返回首页
20+
</Button>
21+
</div>
22+
</div>
23+
);
24+
};
25+
26+
export default Index;

‎src/config.js

+180
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,184 @@ export const umamiId = "12d3e9e9-3982-43a1-a285-e2f611073a71";
2222

2323
export const apiList = {
2424
wakaTime: `${apiBaseUrl}/waka_time.json`,
25+
}
26+
27+
export const SOFTWARE_TOOLS = {
28+
development: {
29+
title: 'Development',
30+
sections: {
31+
ide: {
32+
title: 'IDE & Editors',
33+
tools: [
34+
{
35+
name: 'Sublime Text',
36+
description: 'Text Editing, Done Right',
37+
href: 'https://www.sublimetext.com/'
38+
},
39+
{
40+
name: 'VS Code',
41+
description: 'Code Editor',
42+
href: 'https://code.visualstudio.com/'
43+
},
44+
{
45+
name: 'JetBrains Suite',
46+
description: 'Professional IDEs',
47+
href: 'https://www.jetbrains.com/'
48+
}
49+
]
50+
}
51+
}
52+
},
53+
productivity: {
54+
title: 'Productivity',
55+
sections: {
56+
browser: {
57+
title: 'Browsers',
58+
tools: [
59+
{
60+
name: 'Google Chrome',
61+
description: 'Web Browser',
62+
href: 'https://www.google.com/chrome/'
63+
}
64+
]
65+
},
66+
notes: {
67+
title: 'Note Taking',
68+
tools: [
69+
{
70+
name: 'Obsidian',
71+
description: 'Note Taking',
72+
href: 'https://obsidian.md/'
73+
},
74+
{
75+
name: 'Typora',
76+
description: 'Markdown',
77+
href: 'https://typoraio.cn/'
78+
}
79+
]
80+
},
81+
tools: {
82+
title: 'Productivity Tools',
83+
tools: [
84+
{
85+
name: 'draw.io',
86+
description: 'Drawing tools',
87+
href: 'https://draw.io/'
88+
},
89+
{
90+
name: 'PicGo',
91+
description: 'A tool for quickly uploading images and obtaining image URL links',
92+
href: 'https://github.com/Molunerfinn/PicGo'
93+
},
94+
{
95+
name: 'Fluent Reader',
96+
description: 'RSS Reader',
97+
href: 'https://github.com/yang991178/fluent-reader'
98+
}
99+
]
100+
}
101+
}
102+
}
103+
}
104+
105+
106+
export const DEVICES = {
107+
computing: {
108+
title: 'Computing Devices',
109+
sections: {
110+
devices: {
111+
title: 'Devices',
112+
tools: [
113+
{
114+
name: 'MacBook Air M1',
115+
description: '主力机&移动办公 (16GB, 512GB)',
116+
},
117+
{
118+
name: '暗影精灵',
119+
description: 'win (i5 10th, 16GB, 512GB+1T)',
120+
},
121+
{
122+
name: 'Nas',
123+
description: 'debian (N100, 12T*4, raid5)',
124+
},
125+
{
126+
name: 'Home Server',
127+
description: 'PVE (N305, 1T SSD+1T HDD)',
128+
}
129+
]
130+
}
131+
}
132+
},
133+
mobile: {
134+
title: 'Mobile Devices',
135+
sections: {
136+
phone: {
137+
title: 'Phone',
138+
tools: [
139+
{
140+
name: 'XiaoMi 13 Pro',
141+
description: '手机 (512GB)'
142+
},
143+
{
144+
name: 'iPhone 10',
145+
description: '手机 (128GB)'
146+
}
147+
]
148+
},
149+
tablet: {
150+
title: 'Tablet',
151+
tools: [
152+
{
153+
name: 'XiaoMi Pad 6 Pro',
154+
description: '平板 (256GB)'
155+
}
156+
]
157+
}
158+
}
159+
},
160+
wearables: {
161+
title: 'Smart Wearables',
162+
sections: {
163+
watch: {
164+
title: 'Smart Watch',
165+
tools: [
166+
{
167+
name: 'XiaoMi Bond 8 NFC',
168+
description: '手环'
169+
}
170+
]
171+
},
172+
audio: {
173+
title: 'Audio Devices',
174+
tools: [
175+
{
176+
name: 'XiaoMi Buds 5',
177+
description: '无线耳机'
178+
},
179+
{
180+
name: 'Sony WH-XM3',
181+
description: '头戴式耳机'
182+
}
183+
]
184+
}
185+
}
186+
},
187+
imaging: {
188+
title: 'Imaging Equipment',
189+
sections: {
190+
cameras: {
191+
title: 'Camera System',
192+
tools: [
193+
{
194+
name: 'Nikon ZFC',
195+
description: '相机'
196+
},
197+
{
198+
name: 'Nikon 16-50mm',
199+
description: '变焦镜头'
200+
}
201+
]
202+
}
203+
}
204+
}
25205
}

0 commit comments

Comments
 (0)