Skip to content

Commit b3eebe5

Browse files
USS-ShenzhouUSS-Shenzhou
committed
update index page
1 parent b031ec9 commit b3eebe5

2 files changed

Lines changed: 112 additions & 33 deletions

File tree

‎src/components/ModList/ModList.tsx‎

Lines changed: 86 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,36 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
44
import styles from './styles.module.css';
55
import Translate from '@docusaurus/Translate'
66

7-
const CFMod = ({modUrl, buttons}) => {
8-
const [modData, setModData] = useState(null);
7+
const getButtonStyle = (text: string, url: string): React.CSSProperties => {
8+
const t = text.toLowerCase();
9+
const u = url.toLowerCase();
10+
11+
let color = '#3c91ff';
12+
13+
if (t.includes('video')) {
14+
if (u.includes('bilibili')) {
15+
color = '#df7298';
16+
} else if (u.includes('youtube')) {
17+
color = '#dc0032';
18+
}
19+
} else if (t.includes('morrinth') || t.includes('modrinth')) {
20+
color = '#7dd971';
21+
} else if (t.includes('curseforge')) {
22+
color = '#d56439';
23+
} else if (t.includes('mcmod')) {
24+
return {
25+
'--btn-bg': 'linear-gradient(135deg, #9ac15d 50%, #7cb6d7 50%)'
26+
} as React.CSSProperties;
27+
}
28+
29+
return {
30+
'--btn-bg': color,
31+
'--btn-hover-color': color
32+
} as React.CSSProperties;
33+
};
34+
35+
const CFMod = ({modUrl, buttons}: { modUrl: string, buttons: any[] }) => {
36+
const [modData, setModData] = useState<any>(null);
937
const [loading, setLoading] = useState(true);
1038

1139
useEffect(() => {
@@ -61,10 +89,18 @@ const CFMod = ({modUrl, buttons}) => {
6189
key={index}
6290
href={button.url}
6391
className={styles.button}
92+
style={getButtonStyle(button.text, button.url)}
6493
target="_blank"
6594
rel="noopener noreferrer"
6695
>
67-
{button.text}
96+
{button.text.toLowerCase() === 'mcmod' ? (
97+
<span className={styles.btnText}>
98+
<span className={styles.mcText}>MC</span>
99+
<span className={styles.modText}>Mod</span>
100+
</span>
101+
) : (
102+
<span className={styles.btnText}>{button.text}</span>
103+
)}
68104
</a>
69105
))}
70106
</div>
@@ -147,10 +183,18 @@ const MRMod = ({slug, buttons}) => {
147183
key={index}
148184
href={button.url}
149185
className={styles.button}
186+
style={getButtonStyle(button.text, button.url)}
150187
target="_blank"
151188
rel="noopener noreferrer"
152189
>
153-
{button.text}
190+
{button.text.toLowerCase() === 'mcmod' ? (
191+
<span className={styles.btnText}>
192+
<span className={styles.mcText}>MC</span>
193+
<span className={styles.modText}>Mod</span>
194+
</span>
195+
) : (
196+
<span className={styles.btnText}>{button.text}</span>
197+
)}
154198
</a>
155199
))}
156200
</div>
@@ -243,50 +287,64 @@ const ModList: React.FC = () => {
243287

244288
<CFMod modUrl={cfApiUrl + mp} buttons={[
245289
{text: 'Demo Video', url: 'https://www.bilibili.com/video/BV1Ao4y1t7XC/'},
246-
{text: 'CurseForge', url: baseCfUrl + mp + '/files'},
247290
{text: 'Modrinth', url: 'https://modrinth.com/mod/mad-particle'},
291+
{text: 'CurseForge', url: baseCfUrl + mp + '/files'},
248292
{text: 'MCMod', url: 'https://www.mcmod.cn/class/7482.html'},
249293
]}/>
250294
<CFMod modUrl={cfApiUrl + t88} buttons={[
295+
{text: 'Modrinth', url: 'https://modrinth.com/mod/t88'},
251296
{text: 'CurseForge', url: baseCfUrl + t88 + '/files'},
252297
{text: 'MCMod', url: 'https://www.mcmod.cn/class/7410.html'},
253298
]}/>
254299
<CFMod modUrl={cfApiUrl + hotbar} buttons={[
255300
{text: 'Demo Video', url: 'https://www.bilibili.com/video/BV1DCx4eUEQR/'},
256-
{text: 'CurseForge', url: baseCfUrl + hotbar + '/files'},
301+
{text: 'Modrinth', url: 'https://modrinth.com/mod/hotbaaaar'},
302+
{text: 'CurseForge', url: 'https://www.curseforge.com/minecraft/mc-mods/hotbaaaar'},
257303
{text: 'MCMod', url: 'https://www.mcmod.cn/class/14032.html'},
258304
]}/>
259305
<CFMod modUrl={cfApiUrl + section31} buttons={[
260306
{text: 'Demo Video', url: 'https://www.bilibili.com/video/BV1tt9UY4E8x/'},
307+
{text: 'Modrinth', url: 'https://modrinth.com/mod/section-31'},
261308
{text: 'CurseForge', url: baseCfUrl + section31 + '/files'},
262309
{text: 'MCMod', url: 'https://www.mcmod.cn/class/18765.html'},
263310
]}/>
311+
<MRMod slug={"not-enough-bandwidth"} buttons={[
312+
{text: 'Demo Video', url: 'https://www.bilibili.com/video/BV1M6XsBmEbb/'},
313+
{text: 'Modrinth', url: 'https://modrinth.com/mod/not-enough-bandwidth'},
314+
{text: 'CurseForge', url: 'https://www.curseforge.com/minecraft/mc-mods/not-enough-bandwidth'},
315+
{text: 'MCMod', url: 'https://www.mcmod.cn/class/25120.html'}
316+
]}/>
317+
<MRMod slug={"channel"} buttons={[
318+
{text: 'Demo Video 0', url: 'https://www.bilibili.com/video/BV1qfiMBrEvi/'},
319+
{text: 'Modrinth', url: 'https://modrinth.com/mod/channel'},
320+
{text: 'CurseForge', url: 'https://www.curseforge.com/minecraft/mc-mods/channel'},
321+
]}/>
264322

265-
<h2 className={styles.h2Margin}><Translate>制作中</Translate></h2>
266-
<PlainMod img={"neb_icon_500.png"}
267-
title={'Not Enough Bandwidth'}
268-
description={'Save your server network flow more than 70%.'}
269-
buttons={[]}
270-
/>
271-
<PlainMod img={"chl_icon_500.png"}
272-
title={'Channel'}
273-
description={'An open source in-game talking mod.'}
274-
buttons={[]}
275-
/>
323+
{/*<h2 className={styles.h2Margin}><Translate>制作中</Translate></h2>*/}
324+
{/*<PlainMod img={"neb_icon_500.png"}*/}
325+
{/* title={'Not Enough Bandwidth'}*/}
326+
{/* description={'Save your server network flow more than 70%.'}*/}
327+
{/* buttons={[]}*/}
328+
{/*/>*/}
329+
{/*<PlainMod img={"chl_icon_500.png"}*/}
330+
{/* title={'Channel'}*/}
331+
{/* description={'An open source in-game talking mod.'}*/}
332+
{/* buttons={[]}*/}
333+
{/*/>*/}
276334

277-
<h2 className={styles.h2Margin}><Translate>计划中</Translate></h2>
335+
{/*<h2 className={styles.h2Margin}><Translate>计划中</Translate></h2>*/}
278336

279-
<PlainMod img={"question.png"}
280-
title={'PowerGrid'}
281-
description={'Multi-thread in time.'}
282-
buttons={[]}
283-
/>
337+
{/*<PlainMod img={"question.png"}*/}
338+
{/* title={'PowerGrid'}*/}
339+
{/* description={'Multi-thread in time.'}*/}
340+
{/* buttons={[]}*/}
341+
{/*/>*/}
284342

285-
<PlainMod img={"ares_logo_500.png"}
286-
title={'Ares'}
287-
description={'The best unified first-person pvp experience.'}
288-
buttons={[]}
289-
/>
343+
{/*<PlainMod img={"ares_logo_500.png"}*/}
344+
{/* title={'Ares'}*/}
345+
{/* description={'The best unified first-person pvp experience.'}*/}
346+
{/* buttons={[]}*/}
347+
{/*/>*/}
290348

291349
{/*<CFMod modUrl={cfApiUrl + r6} buttons={[*/}
292350
{/* //{text: 'All downloads', url: baseCFUrl + r6 + '/files'},*/}

‎src/components/ModList/styles.module.css‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -90,23 +90,44 @@
9090
.button {
9191
display: block;
9292
text-align: center;
93-
background-color: #3c91ff;
94-
border: 2px solid #3c91ff;
95-
color: #fff;
9693
border-radius: 0.5rem;
9794
padding: 0.25rem 0.7rem;
9895
text-decoration: none;
9996
font-size: 14px;
10097
margin-right: 0.5rem;
10198
margin-top: 0.5rem;
99+
100+
border: 2px solid transparent;
101+
background: var(--btn-bg, #3c91ff);
102+
background-origin: border-box;
103+
background-clip: border-box;
104+
color: #fff;
102105
}
103106

104107
.button:hover {
105-
background-color: transparent;
106-
color: #3c91ff;
108+
background:
109+
linear-gradient(var(--ifm-background-color, #fff), var(--ifm-background-color, #fff)) padding-box,
110+
var(--btn-bg, #3c91ff) border-box;
111+
background-origin: border-box;
107112
text-decoration: none;
108113
}
109114

115+
.btnText, .mcText, .modText {
116+
color: #fff;
117+
}
118+
119+
.button:hover .btnText {
120+
color: var(--btn-hover-color, #3c91ff);
121+
}
122+
123+
.button:hover .btnText .mcText {
124+
color: #9ac15d;
125+
}
126+
127+
.button:hover .btnText .modText {
128+
color: #7cb6d7;
129+
}
130+
110131
.container {
111132
margin-top: -2rem;
112133
display: flex;

0 commit comments

Comments
 (0)