import React, { useState } from "react";
import Badge from "react-bootstrap/Badge";
import Button from "react-bootstrap/Button";
const App = () => {
const [notcnt, setNotcnt] = useState(5);
const [msgCnt, setMsgcnt] = useState(10);
const [achieveCnt, setAchieveCnt] = useState(3);
const badgeClickFunction = (type) => {
if (type === "notifications") {
setNotcnt(notcnt + 1);
} else if (type === "messages") {
setMsgcnt(msgCnt + 1);
} else if (type === "achievements") {
setAchieveCnt(achieveCnt + 1);
}
};
const resetFunction = () => {
setNotcnt(5);
setMsgcnt(10);
setAchieveCnt(3);
};
return (
<div style={{ textAlign: "center", padding: "30px" }}>
<h1 style={{ color: "green" }}>GeeksforGeeks</h1>
<h3>React-Bootstrap Badges API</h3>
<p>Click on the badges to simulate changes!</p>
<div
style={{
display: "flex",
justifyContent: "center",
marginTop: "20px",
}}
>
<div style={{ marginRight: "30px" }}>
<h4>
Notifications{" "}
<Badge
variant="danger"
text="light"
pill
style={{ fontSize: "1.5em", cursor: "pointer" }}
onClick={() => badgeClickFunction("notifications")}
>
{notcnt}
</Badge>
</h4>
<p>Stay updated with the latest notifications.</p>
</div>
<div style={{ marginRight: "30px" }}>
<h4>
Messages{" "}
<Badge
variant="info"
text="light"
pill
style={{ fontSize: "1.5em", cursor: "pointer" }}
onClick={() => badgeClickFunction("messages")}
>
{msgCnt}
</Badge>
</h4>
<p>Connect with others through messages.</p>
</div>
<div>
<h4>
Achievements{" "}
<Badge
variant="warning"
text="dark"
pill
style={{ fontSize: "1.5em", cursor: "pointer" }}
onClick={() => badgeClickFunction("achievements")}
>
{achieveCnt}
</Badge>
</h4>
<p>Earn badges as you progress.</p>
</div>
</div>
<Button
variant="secondary"
size="lg"
onClick={resetFunction}
style={{ marginTop: "20px" }}
>
Reset Counts
</Button>
</div>
);
};
export default App;