Button exercise: adding props

src/App.tsx

@@ -1,11 +1,16 @@
 import { Button } from "./components/Button";
 
-
+function handleOnClick() {
+  console.log("Clicked");
+}
 
 function App() {
+
+
+
   return (
     <div>
-      <Button/>
+      <Button onClick={handleOnClick} color="secondary">My Button</Button>
     </div>
   );
 }

src/components/Button.tsx

@@ -1,6 +1,13 @@
 
-export const Button = () => {
+interface Props {
+    children: string;
+    color: string;
+    onClick: () => void;
+}
+
+export const Button = ({ children, color, onClick }: Props) => {
+    //const buttonType = "btn " + "btn"+"-"+{type};
   return (
-    <button type="button" className="btn btn-primary">Primary</button>
+    <button type="button" className={'btn btn-'+color} onClick={onClick}>{children}</button>
   )
 }