Add alert component

heyyfurqan · Jul 18, 2023 · 818ebf7 · 818ebf7
1 parent 04a6315
commit 818ebf7
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,12 +1,18 @@
 import Alert from './components/Alert';
 import ListGroup from './components/ListGroup';
 import Button from './components/Button';
+import { useState } from 'react';
 
 function app() {
+  const [alertVisible, setAlertVisibility] = useState(false)
+
   return (
-    <Button /*color='secondary'*/ onClick={() => console.log('Clicked !')}>
-      Click Me
-    </Button>
+    <div>
+      {alertVisible && <Alert onClose={() => setAlertVisibility(false)}>You clicked</Alert>}
+      <Button /*color='secondary'*/ onClick={() => setAlertVisibility(true)}>
+        Click Me
+      </Button>
+    </div>
   );
 }
 

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -2,11 +2,17 @@ import { ReactNode } from "react";
 
 interface Props{
     children:ReactNode;
+    onClose : () => void;
 }
 
-const Alert = ({children}:Props) => {
+const Alert = ({children, onClose} : Props) => {
   return (
-    <div>{children}</div>
+    <div className="alert alert-primary alert-dismissible">
+      {children}
+      <button type="button" className="close" onClick={onClose} data-dismiss="alert" aria-label="Close">
+        <span aria-hidden="true">&times;</span>
+      </button>
+    </div>
   )
 }