buton,tsx
import styles from “./Button.module.css”
interface Props{
children: string;
color?: 'primary'|'secondary'|'danger';
onClick: () => void;
}
const Button =({children,onClick,color= ‘primary’}:Props) =>
{
return(
<button className={[styles.btn,styles['btn-' + color]].join ('')}onClick={onClick}>{children}</button>
)
}
export default Button
button.module.css
.btn{
padding: 10px;
border-radius: 8px;
border: 0;
padding-right: 1000;
}
.btn-primary{
background-color: #05387a;
color: white;
}
app.tsx
//import Alert from “./Components/Alert”;
import ListGroup from “./Components/ListGroup/”;
import Button from “./Components/Button”;
import “./App.css”;
function App() {
// let items =
//[
//‘Pakistan’,
//‘London’,
//‘Pakistan’,
//‘London’,
//‘Pakistan’,
// ‘London’,
//];
//const handleSelectItem= (item:string) =>{
//console.log(item);
//}
//return (
//
//);
return (
//
// Helloworld
<button onClick={() => console.log("clicked")}>My Button</button>
);
//return(
//
// Helloworld
//);
}
export default App;