Done Alert With Close Button Listener

README.md

@@ -26,3 +26,8 @@ Will use to demo each feature of React that is offering.
 * **Event** - Events can be passed as parameters from App.tsx to other components.
 * **Props** - Interfaces (like custom types) that hold various data types, making data passing between components easier
 * **Children** - Props can include ```ReactNode```, which can consist of multiple ```HTML``` elements
+
+<!-- 
+Futher paid course can found here
+https://codewithmosh.com/p/ultimate-react-part1 
+-->

src/Alert.tsx

@@ -2,13 +2,24 @@ import React, { ReactNode } from "react";
 
 interface Props {
     children: ReactNode;
+    onClose: () => void;
 }
 
-const Alert = ({ children }: Props) => {
+const Alert = ({ children, onClose }: Props) => {
     return (
         <>
-            <div className="alert alert-danger" role="alert">
+            <div
+                className="alert alert-warning alert-dismissible fade show"
+                role="alert"
+            >
                 {children}
+                <button
+                    type="button"
+                    className="btn-close"
+                    data-bs-dismiss="alert"
+                    aria-label="Close"
+                    onClick={onClose}
+                ></button>
             </div>
         </>
     );

src/App.tsx

@@ -2,8 +2,11 @@ import Alert from "./Alert";
 import Message from "./Message";
 import Button from "./Button";
 import ListGroup from "./components/ListGroup";
+import { useState } from "react";
 
 function App() {
+    const [alertVisible, setAlertVisibility] = useState(false);
+
     let items = ["Orange", "Apple", "Watermelon", "Banana", "Durian"];
 
     const handleSelectItem = (item: string) => {
@@ -13,9 +16,14 @@ function App() {
     return (
         <>
             <div>
-                <Alert>
-                    <b>HTML</b> Pass in from <span>App</span>
-                </Alert>
+                <Message />
+            </div>
+            <div>
+                {alertVisible && (
+                    <Alert onClose={() => setAlertVisibility(false)}>
+                        <b>HTML</b> Pass in from <span>App</span>
+                    </Alert>
+                )}
             </div>
             <div>
                 <ListGroup
@@ -25,10 +33,15 @@ function App() {
                 />
             </div>
             <div>
-                <Button />
-            </div>
-            <div>
-                <Message />
+                <Button
+                    onClick={() => {
+                        console.log("Clicked");
+                        setAlertVisibility(true);
+                    }}
+                    color="danger"
+                >
+                    My Button
+                </Button>
             </div>
         </>
     );

src/Button.tsx

@@ -1,10 +1,20 @@
 import React from "react";
 
-const Button = () => {
+interface Props {
+    children: string;
+    color?: "primary" | "secondary" | "danger" | "success"; // Optional OR either any of 4 string
+    onClick: () => void;
+}
+
+const Button = ({ children, color = "primary", onClick }: Props) => {
     return (
         <>
-            <button type="button" className="btn btn-primary">
-                Primary
+            <button
+                type="button"
+                className={"btn btn-" + color}
+                onClick={onClick}
+            >
+                {children}
             </button>
         </>
     );