eliribble
/
drishti
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Show an alert when we click the "login" button. 

Yay, user interactivity.
This commit is contained in:
Eli Ribble 2024-08-27 10:09:41 -07:00
parent 302cbdd43d
commit 9ff63d96fd
2 changed files with 41 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@ -40,7 +40,7 @@ const App = () => {
return (
<div className="App">
{state ? <p>{state.username}</p> : <AuthModal></AuthModal>}
{state ? <p>{state.username}</p> : <AuthModal doLogin={() => alert("login")}></AuthModal>}
</div>
);
};

17
src/AuthModal.tsx
View File

@ -1,8 +1,14 @@
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import Modal from "react-bootstrap/Modal";
import Button from "react-bootstrap/Button"
import Form from "react-bootstrap/Form"
import Modal from "react-bootstrap/Modal"
function AuthModal() {
import React from "react"
type AuthProps = {
doLogin: () => void;
}
const AuthModal: React.FC<AuthProps> = ({ doLogin }) => {
return (
<div
className="modal show"
@ -31,8 +37,7 @@ function AuthModal() {
</Modal.Body>
<Modal.Footer>
<Button variant="secondary">Close</Button>
<Button variant="primary">Save changes</Button>
<Button variant="primary" onClick={doLogin}>Login</Button>
</Modal.Footer>
</Modal.Dialog>
</div>