An app was developed with a component containing signin and signup buttons on the right side. However, there is an issue where the Sign up button is not clickable. Below is the code snippet for the component =>
import React from "react";
export default function Abar() {
const handleClick = () => {
console.log("Eee");
};
const styles = {
body: {
margin: 0,
fontFamily: "Arial, sans-serif"
},
flexContainer: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
padding: "10px 20px",
backgroundColor: "black",
color: "white"
},
skillSphereTitle: {
fontSize: "24px"
},
buttonContainer: {
display: "flex",
gap: "10px"
},
button: {
color: "white",
border: "1px solid transparent",
borderTop: "4px solid #0169AD",
backgroundColor: "black",
cursor: "pointer",
padding: "10px 20px"
}
};
return (
<div style={styles.flexContainer}>
<div>
<h6 style={styles.skillSphereTitle}>
Skill Sphere
</h6>
</div>
<div style={styles.buttonContainer}>
<button
type="button"
style={styles.button}
onClick={() => console.log("Rohan")}
>
Sign Up
</button>
<button
type="button"
style={styles.button}
onClick={() => console.log("Rohan")}
>
Sign In
</button>
</div>
</div>
);
}
Attempted various solutions found online but none resolved the issue.