MDX
修正使用
自定义进度条
使用 GPT 帮助自己实现了 MDX 进度条
- 示例
- ProgressBar.js
- ProgressBar.css
- 使用
src/components/ProgressBar/ProgressBar.js
import React, { useEffect, useState } from 'react';
import './ProgressBar.css';
const ProgressBar = ({ completed, color = 'green' }) => {
const [width, setWidth] = useState(0);
useEffect(() => {
let animationFrame;
const animate = () => {
setWidth((prevWidth) => {
if (prevWidth < completed) {
animationFrame = requestAnimationFrame(animate);
return prevWidth + 1; // 每次增加 1%
} else {
cancelAnimationFrame(animationFrame);
return completed;
}
});
};
animationFrame = requestAnimationFrame(animate);
return () => cancelAnimationFrame(animationFrame);
}, [completed]);
const containerStyles = {
height: '20px',
width: '300px',
backgroundColor: '#e0e0df',
borderRadius: '50px',
overflow: 'hidden', // 确保内容不溢出
margin: '50px 0'
};
const fillerStyles = {
height: '100%',
width: `${width}%`,
backgroundColor: color,
borderRadius: 'inherit',
textAlign: 'right',
transition: 'width 0.2s ease-in-out' // 添加平滑过渡效果
};
const labelStyles = {
padding: '5px',
color: 'white',
fontWeight: 'bold'
};
return (
<div style={containerStyles}>
<div style={fillerStyles}>
<span style={labelStyles}>{`${width}%`}</span>
</div>
</div>
);
};
export default ProgressBar;
src/components/ProgressBar/ProgressBar.css
.progress-bar {
height: 20px;
width: 300px; /* 限制进度条长度为 100 px */
background-color: #e0e0df;
border-radius: 50px;
overflow: hidden; /* 确保内容不溢出 */
margin: 50px 0;
}
.progress-bar__filler {
height: 100%;
border-radius: inherit;
text-align: right;
transition: width 0.2s ease-in-out; /* 添加平滑过渡效果 */
}
.progress-bar__label {
padding: 5px;
color: white;
font-weight: bold;
}
import ProgressBar from '@site/src/components/ProgressBar/ProgressBar';
<ProgressBar completed={60} color="blue" />
Github 热力图
使用 GPT 帮助自己生成对应的 JS 文件, 在博客中展示 Github 热力图
- 示例
- GithubHeatmap.js
- 使用
// src/components/GithubHeatmap/GithubHeatmap.js
import React from 'react';
import GitHubCalendar from 'react-github-calendar';
const GithubHeatmap = () => {
return <GitHubCalendar username="Guardian-JTZ" />;
};
export default GithubHeatmap;
import GithubHeatmap from '@site/src/components/GithubHeatmap/GithubHeatmap';
<GithubHeatmap />