Excercise Alert

src/App.tsx

@@ -1,16 +1,22 @@
+import { useState } from "react";
+import Alert from "./components/Alert";
 import { Button } from "./components/Button";
 
-function handleOnClick() {
-  console.log("Clicked");
-}
+
+// function handleOnClick() {
+//   //console.log("Clicked");
+// }
 
 function App() {
 
+  const [alertVisible, setAlertVisibility] = useState(false);
 
 
   return (
     <div>
-      <Button onClick={handleOnClick} color="success">My Button</Button>
+      {alertVisible && <Alert onClose={()=>setAlertVisibility(false)}>Holly wacamole!</Alert>}
+      <Button onClick={()=>setAlertVisibility(true)} color="success">My Button</Button>
+      
     </div>
   );
 }

src/components/Alert.tsx

@@ -2,11 +2,14 @@ import type { ReactNode } from "react";
 
 interface Props{
     children: ReactNode;
+    onClose:()=>void;
 }
 
-function Alert({children} : Props) {
+function Alert({children, onClose} : Props) {
   return (
-    <div className="alert alert-primary">{children}</div>
+    <div className="alert alert-primary alert-dissmisable fade show">{children}
+    <button type="button" className="btn-close" onClick={onClose} data-bs-dismiss="alert" aria-label="Close"></button>
+    </div>
   )
 }