success

containers/react/src/components/Header.tsx

@@ -4,16 +4,22 @@ import {Link} from 'react-router-dom';
 import DefaultPicture from '../assets/profile.jpg'
 import { motion, AnimatePresence } from 'framer-motion'
 import Modal from './Sidebar/Modal.tsx';
+import YellowAlert from './Alert/YellowAlert.tsx';
 import '../styles/Header.css';
 
 import api from '../script/axiosApi.tsx';
 
+import { MdQrCodeScanner } from 'react-icons/md';
+import { GiWingedSword, GiCrownedSkull } from 'react-icons/gi';
+
 function Header() {
 	// const [sidebar, setSidebar] = useState(false);
 	// const showSidebar = () => setSidebar(!sidebar);
 	const [modalOpen, setModalOpen] = useState(false);
 	const close = () => setModalOpen(false);
 	const open = () => setModalOpen(true);
+
+	const [success, setSuccess] = useState([]);
 	
 	const [profilePicture, setProfilePicture] = useState('');
 
@@ -23,6 +29,8 @@ function Header() {
 			const user = await api.get("/profile");
 			const pic = await api.post("/getPicture", {username: user.data.username})
         	setProfilePicture(pic.data);
+			// console.log("test ===", user.data)
+			setSuccess(user.data);
 			// console.log(`profile pic222= ${pic.data}`)
 		  } catch (error) {
 			console.error('Error fetching profile picture:', error);
@@ -45,6 +53,18 @@ function Header() {
 				</Link>
 		</motion.div>
 		<div className='end'>
+
+			{success.otp_verified ? (
+					<MdQrCodeScanner className='success' />
+			):("")}
+			{success.win >= 2 ? (
+				<GiWingedSword className="success" />
+			):("")}
+
+			{success.win >= 5 ? (
+				<GiCrownedSkull className="success" />
+			):("")}
+			
 			<Link to="/profile" className='menu-bars'>
 			<div>
 				

containers/react/src/styles/Header.css

@@ -89,6 +89,16 @@ span {
 	border-radius: 50%;
 }
 
+.success {
+	height: 25px;
+	width: 25px;
+	/* border: solid; */
+	margin-top: 2.5vh;
+	margin-left: 1vh;
+	/* border-color: black; */
+	/* border-radius: 50%; */
+}
+
 .header-pic{
 	text-align: end;
 	/* id: right; */