const menu = props.menu ?? { value: "live" }; return ( <div className="d-flex" style={{ gap: 25, paddingLeft: 30, marginTop: -52 }}> <div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" > <path fill={menu.value === "live" ? "#4886fe" : "#139499"} d="M9.043 5.793L2.836 12l6.207 6.207l1.414-1.414L5.664 12l4.793-4.793l-1.414-1.414Zm5.914 12.414L21.164 12l-6.207-6.207l-1.414 1.414L18.336 12l-4.793 4.793l1.414 1.414Z" /> </svg> {menu.value === "live" ? `You haven’t participated yet` : `You Won this Campaign`} </div> {menu.value !== "live" && ( <div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" > <path fill={"#be3105"} d="M9.043 5.793L2.836 12l6.207 6.207l1.414-1.414L5.664 12l4.793-4.793l-1.414-1.414Zm5.914 12.414L21.164 12l-6.207-6.207l-1.414 1.414L18.336 12l-4.793 4.793l1.414 1.414Z" /> </svg> {`You lost this Campaign`} </div> )} <div> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" > <path fill="currentColor" d="M9.043 5.793L2.836 12l6.207 6.207l1.414-1.414L5.664 12l4.793-4.793l-1.414-1.414Zm5.914 12.414L21.164 12l-6.207-6.207l-1.414 1.414L18.336 12l-4.793 4.793l1.414 1.414Z" /> </svg> {menu.value === "live" ? `You have already entered` : `You haven’t participated`} </div> </div> );