挑战用React封装100个组件【010】

Hello，大家好，今天我挑战的组件是这样的！

今天这个组件是一个打卡成功，或者获得徽章后的组件。点击按钮后，会弹出礼花。项目中的勋章是我通过AI生成的，还是很厉害的哈！稍微抠图直接使用。最后面，我也会展示我的提示词，大家可以去试一试。
欢迎大家把项目拉下来使用哦！
项目地址： https://github.com/hismeyy/react-component-100
今天还是用到了canvas-confetti。它是一个可以喷射礼花的一个库，GitHub地址我放在了下方，地址中有它的使用教程呢！
canvas-confetti
如果大家有什么询问的，或者推荐做的组件，可以评论区，评论哦！
下面是代码展示

代码展示

SuccessCard.tsx

import confetti from "canvas-confetti";
import "./SuccessCard.css";
import medalPNG from "./medal.png";

const SuccessCard = () => {
  // 触发烟花效果的函数
  const triggerConfetti = (event: React.MouseEvent<HTMLButtonElement>) => {
    const button = event.currentTarget;
    const rect = button.getBoundingClientRect();
    const x = (rect.left + rect.width / 2) / window.innerWidth;
    const y = rect.top / window.innerHeight;

    confetti({
      particleCount: 200,     
      angle: 90,              
      spread: 90,           
      origin: { x, y }, 
      scalar: 1.5,            
    });
  };

  return (
    <div className="success-card">
      <div className="success-medal">
        <img src={medalPNG} alt="success-medal" />
      </div>
      <div className="success-message">
        <h1>Congratulations</h1>
        <p>You did a great job in the test!</p>
      </div>
      <div className="success-button">
        <button onClick={triggerConfetti}>Continue</button>
      </div>
    </div>
  );
};

export default SuccessCard;

SuccessCard.css

.success-card {
    width: 450px;
    height: 500px;
    display: flex;
    align-items: center;
    background-color: #F5F5F5;
    border-radius: 10px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
    flex-direction: column
}

.success-card .success-medal {
    margin-top: 10px;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.success-card .success-medal img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.success-card .success-message {
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
}

.success-card .success-message h1 {
    all: unset;
    font-size: 36px;
    font-weight: bold;
}

.success-card .success-message p {
    all: unset;
    margin-top: 15px;
    font-size: 16px;
    color: #7c7c7c;
}

.success-card .success-button {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.success-card .success-button button {
    all: unset;
    padding: 15px 30px;
    border-radius: 25px;
    background-color: #5246CF;
    color: #fff;
    cursor: pointer;
}

.success-card .success-button button:hover {
    background-color: #3f34b9;
}

使用

App.tsx

import './App.css'
import SuccessCard from './components/card/successCard01/SuccessCard';

function App() {

  return (
    <SuccessCard />
  );
}

export default App;

提示词

用于生成徽章，大家可以修改提示词，得到自己想要的一组徽章

这是一枚设计简洁的奖章图标，主体是黄色的八角形，中间有一颗白色的五角星，奖章下方有两条蓝色的飘带。
1. **设计风格**
   - 简洁设计
   - 卡通风格
   - 扁平设计
2. **形状和颜色**
   - 黄色八角形
   - 白色五角星
   - 蓝色飘带
3. **背景元素**
   - 纯色
4. **用途和氛围**
   - 奖励图标
   - 庆祝氛围