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;