Skip to content

Commit 3686580

Browse files
maikebingmaikebing
committed
refactor: update navbar and styles, enhance project display on homepage
- Refactored NavBar component to include new navigation links and removed unused state management. - Updated navbar styles for improved aesthetics and responsiveness. - Enhanced homepage layout with new sections for project groups and capabilities. - Added detailed project descriptions and links to GitHub repositories. - Improved overall styling for better visual hierarchy and user experience.
1 parent 47eb630 commit 3686580

8 files changed

Lines changed: 959 additions & 640 deletions

File tree

‎components/footer/index.tsx‎

Lines changed: 59 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,199 +1,76 @@
1-
import {FC, JSXElementConstructor, ReactElement, ReactFragment, ReactNode, ReactPortal} from "react";
1+
import {FC} from "react";
22
import Image from "next/image";
3-
import publicLogo from "@/public/public_logo.png";
4-
import styles from "./styles.module.scss";
5-
import cName from "classnames";
6-
import {isEmpty} from "lodash";
7-
import logoText from "@/public/logo-text.svg";
8-
import QRCode from "@/public/code.jpg";
93
import logoIcon from "@/public/logo-icon.svg";
10-
interface ILink {
11-
label: string;
12-
link?: string;
13-
}
14-
15-
interface ILinkList {
16-
title: string;
17-
list: ILink[];
18-
}
19-
20-
interface IQRCode {
21-
image: string;
22-
text: string;
23-
}
4+
import logoText from "@/public/logo-text.svg";
5+
import styles from "./styles.module.scss";
246

257
export interface IFooterProps {}
268

27-
const Footer: FC<IFooterProps> = ({}) => {
28-
const data = {
29-
"title": "IoTSharp",
30-
"qr_code": "",
31-
"copy_right": "© 2018 - 2026 The IoTSharp Authors. All rights reserved.",
32-
"site_number": "",
33-
"public_number": "冀ICP备18039206号",
34-
"qr_code_image": {
35-
"data": {
36-
"name": "code.png",
37-
"alternativeText": "code.png",
38-
"caption": "code.png",
39-
"width": 56,
40-
"height": 56,
41-
"formats": {},
42-
"hash": "code_67191e1aba",
43-
"ext": ".png",
44-
"mime": "image/png",
45-
"size": 1.45,
46-
"url": "/uploads/code_67191e1aba.png",
47-
"previewUrl": {},
48-
"provider": "local",
49-
"provider_metadata": {}
50-
}
51-
},
52-
"link_lists": {
53-
"data": [
54-
{
55-
"title": '关于',
56-
"links": {
57-
"data": [
58-
{
59-
"label": "演示",
60-
"link": "http://iotsharp.online/"
61-
},
62-
{
63-
"label": "文档",
64-
"link": "https://iotsharp.gitee.io/",
65-
},
66-
]
67-
}
68-
},
69-
{
70-
"title": "了解更多",
71-
"links": {
72-
"data": [
73-
{
74-
"label": "Github",
75-
"link": "https://github.com/IoTSharp"
76-
},
77-
{
78-
"label": "Gitee",
79-
"link": "https://gitee.com/IoTSharp"
80-
},
81-
]
82-
}
83-
},
84-
{
85-
"title": "联系我们",
86-
"links": {
87-
"data": [
88-
{
89-
"label": "QQ",
90-
"link": "https://jq.qq.com/?_wv=1027&k=u1ZzTmVd"
91-
}, {
92-
"label": "企微",
93-
"link": "https://iotsharp.gitee.io/img/qyqun.jpg"
94-
}, {
95-
"label": "Discord",
96-
"link": "https://discord.com/invite/My6PaTmUvu"
97-
}
98-
]
99-
}
100-
}
101-
]
102-
}
103-
}
104-
const {copy_right, link_lists, public_number, qr_code, qr_code_image, site_number, title} = data || {};
105-
const footerData = {
106-
title,
107-
linkList: link_lists?.data?.map((item: any) => ({
108-
title: item.title,
109-
list: item?.links?.data?.map((_item: any) => ({
110-
label: _item.label,
111-
link: isEmpty(_item.link) ? '' : _item.link,
112-
})),
113-
})),
114-
qrCode: {
115-
image: QRCode,
116-
text: qr_code,
117-
},
118-
copyRight: copy_right,
119-
siteNumber: site_number,
120-
publicNumber: public_number,
9+
const linkGroups = [
10+
{
11+
title: "核心项目",
12+
links: [
13+
{label: "IoTSharp", link: "https://iotsharp.net/IoTSharp/"},
14+
{label: "IoTCoWork", link: "https://iotsharp.net/IoTCoWork/"},
15+
{label: "IoTEdge", link: "https://iotsharp.net/IoTEdge/"},
16+
{label: "IoTEmBASIC", link: "https://iotsharp.net/IoTEmBASIC/"}
17+
]
18+
},
19+
{
20+
title: "开发者入口",
21+
links: [
22+
{label: "GitHub", link: "https://github.com/IoTSharp"},
23+
{label: "文档", link: "https://docs.iotsharp.net/"},
24+
{label: "商业服务", link: "https://iotsharp.online"},
25+
{label: "组织主页", link: "https://iotsharp.net"}
26+
]
27+
},
28+
{
29+
title: "社区",
30+
links: [
31+
{label: "Gitee", link: "https://gitee.com/IoTSharp"},
32+
{label: "Discord", link: "https://discord.com/invite/My6PaTmUvu"},
33+
{label: "QQ 群", link: "https://jq.qq.com/?_wv=1027&k=u1ZzTmVd"}
34+
]
12135
}
36+
];
37+
38+
const Footer: FC<IFooterProps> = ({}) => {
39+
const year = new Date().getFullYear();
40+
12241
return (
123-
<div className={styles.footer}>
42+
<footer className={styles.footer}>
12443
<div className={styles.topArea}>
125-
<h1 className={styles.footerTitle}>
126-
<Image src={logoIcon} alt="" width={35} height={35}/>
127-
<Image src={logoText} alt="" width={135} height={40}/>
128-
</h1>
44+
<div>
45+
<h1 className={styles.footerTitle}>
46+
<Image src={logoIcon} alt="" width={35} height={35}/>
47+
<Image src={logoText} alt="IoTSharp" width={135} height={40}/>
48+
</h1>
49+
<p className={styles.summary}>
50+
IoTSharp 开源生态门面。设备、边缘、协议、SDK、数据和工具项目都从这里进入。
51+
</p>
52+
</div>
53+
12954
<div className={styles.linkListArea}>
130-
{footerData?.linkList?.map((item, index) => {
131-
return (
132-
<div className={styles.linkArea} key={`linkArea${index}`}>
133-
<span className={styles.title}>{item.title}</span>
134-
<div className={styles.links}>
135-
{item.list?.map((_item: { link: string | URL | undefined; label: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal | Iterable<ReactNode> | null | undefined; }, _index: any) => {
136-
return (
137-
<div
138-
className={cName({
139-
[styles.link]: _item.link,
140-
[styles.disabled]: !_item.link,
141-
})}
142-
onClick={(): void => {
143-
_item.link &&
144-
window.open(
145-
_item.link,
146-
"blank",
147-
"noopener=yes,noreferrer=yes"
148-
);
149-
}}
150-
key={`link${_index}`}
151-
>
152-
{_item.label}
153-
</div>
154-
);
155-
})}
156-
</div>
55+
{linkGroups.map((group) => (
56+
<div className={styles.linkArea} key={group.title}>
57+
<span className={styles.title}>{group.title}</span>
58+
<div className={styles.links}>
59+
{group.links.map((item) => (
60+
<a href={item.link} target="_blank" rel="noreferrer" key={item.link}>
61+
{item.label}
62+
</a>
63+
))}
15764
</div>
158-
);
159-
})}
65+
</div>
66+
))}
16067
</div>
16168
</div>
16269
<div className={styles.bottomArea}>
163-
<div className={styles.codeArea}>
164-
<div>
165-
<Image
166-
src={footerData?.qrCode?.image}
167-
alt={footerData?.qrCode?.text}
168-
width={120}
169-
height={120}
170-
></Image>
171-
</div>
172-
<div className={styles.text}>{footerData?.qrCode?.text}</div>
173-
</div>
174-
<div className={styles.numArea}>
175-
<span>{footerData?.copyRight}</span>
176-
<span>{footerData?.siteNumber}</span>
177-
<div className={styles.publicLogo} onClick={(): void => {
178-
window.open(
179-
"https://beian.miit.gov.cn/",
180-
"blank",
181-
"noopener=yes,noreferrer=yes"
182-
);
183-
}}>
184-
<div className={styles.logo}>
185-
<Image
186-
src={publicLogo}
187-
alt={footerData?.publicNumber}
188-
width={20}
189-
height={20}
190-
></Image>
191-
</div>
192-
<span>{footerData?.publicNumber}</span>
193-
</div>
194-
</div>
70+
<span>© 2018 - {year} The IoTSharp Authors. All rights reserved.</span>
71+
<a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer">冀ICP备18039206号</a>
19572
</div>
196-
</div>
73+
</footer>
19774
);
19875
};
19976

0 commit comments

Comments
 (0)