Card

apps/frontend/src/App.js

@@ -3,14 +3,15 @@ import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import Login from './components/Login';
 import Appointments from './components/Appointments';
+import Doctors from './components/Doctors';
 
 import NavbarComponent from './components/NavbarComponent';
 import HomePage from './components/HomePage';
 import { useState } from 'react';
 
 function App() {
 
-  const [active, setActive] = useState("HomePage");
+  const [active, setActive] = useState("Doctors");
 
 
   return (
@@ -25,6 +26,9 @@ function App() {
       {active === "Appointments" && 
       <Appointments />
       }
+      {active === "Doctors" &&
+            <Doctors />
+            }
     </div>
   );
 }

apps/frontend/src/components/Appointments.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import AppointmentsCard from './AppointmentsCard';
-//import {Button, Row, Col, Container} from 'react-bootstrap';
+import {Card, Row, Col, Container} from 'react-bootstrap';
 
 class Appointments extends React.Component{
     constructor(props){
         super(props)
-        this.state = { 
+        this.state = {
         };
     }
 
@@ -14,12 +14,42 @@ class Appointments extends React.Component{
 
 
     render(){
+
+        const divStyle = {
+            marginLeft: '50px',
+            maginTop: '250px',
+            marginRight: '50px',
+            marginBotton: 'auto',
+            borderRadius: '1rem',
+            width: '20rem',
+            height: 'auto',
+            align: 'flex'
+        };
+
+
         return(
             <div>
-                <AppointmentsCard name="Dr. Phil" />
-                <AppointmentsCard name="Dr. Myers"/>
-                <AppointmentsCard name="Dr. Oz" />
-                <AppointmentsCard name="Josh" />
+                <Container>
+                <Row className="d-flex py-5 align-items-center align-middle align-items-center">
+                    <Col className="col col-lg-12 col-md-12 text-center fixed align-middle align-items-center">
+                        <h3 className='mb-3'>Your appointments</h3>
+                    </Col>
+                </Row>
+                <Row className="d-flex py-2 align-items-center align-middle align-items-center">
+                    <Col className="col col-lg-12 col-md-12 text-center fixed align-middle align-items-center">
+                        <div style={divStyle} className= ' justify-content-center'>
+                        <AppointmentsCard doctorName="Dr. Phil" aptDate="4/20/2022 at 11:00 AM" />
+                        <AppointmentsCard doctorName="Dr. Myers" aptDate="4/15/2022 at 9:30 AM"/>
+                        <AppointmentsCard doctorName="Dr. Oz" aptDate="4/11/2022 at 1:45 PM"/>
+                        <AppointmentsCard doctorName="Josh" aptDate="4/5/2022 at 2:45 PM" />
+                        </div>
+                    </Col>
+                </Row>
+
+                </Container>
+
+
+
             </div>
         )
     }

apps/frontend/src/components/AppointmentsCard.js

@@ -1,10 +1,10 @@
 import React from 'react';
-//import {Button, Row, Col, Container} from 'react-bootstrap';
+import {Card, Button, Row, Col, Container} from 'react-bootstrap';
 
 class AppointmentsCard extends React.Component{
     constructor(props){
         super(props)
-        this.state = { 
+        this.state = {
         };
     }
 
@@ -13,9 +13,72 @@ class AppointmentsCard extends React.Component{
 
 
     render(){
+
+        const cardStyle = {
+            marginLeft: '50px',
+            maginTop: '100px',
+            marginRight: '50px',
+            marginBotton: 'auto',
+            borderRadius: '1rem',
+            width: '20rem',
+            height: 'auto'
+        };
+
+        const buttonConfirmStyle = {
+            marginLeft: '25px',
+            maginTop: '250px',
+            marginRight: '25px',
+            marginBotton: 'auto',
+            borderRadius: '1rem',
+            magin: '50px',
+            width: 'auto',
+            height: 'auto',
+            backgroundColor: 'rgb(40, 150, 20)'
+        };
+
+        const buttonCancelStyle = {
+            marginLeft: '25px',
+            maginTop: '250px',
+            marginRight: '25px',
+            marginBotton: 'auto',
+            borderRadius: '1rem',
+            magin: '50px',
+            width: 'auto',
+            height: 'auto',
+            backgroundColor: 'rgb(170, 10, 10)'
+        };
+
+
+        // `onClick` should be updated
         return(
             <div>
-                name is {this.props.name}
+                <Row className="d-flex py-5 align-items-center align-middle align-items-center">
+                    <Card style={cardStyle}>
+                        <Card.Body>
+                            <Card.Title>Upcoming Appointment</Card.Title>
+                            <Card.Text>
+                                You have an appointment at the Health Center with {this.props.doctorName}
+                                , on {this.props.aptDate}.
+                                Please complete any necessary pre-visit forms by logging in to your patient <Card.Link href="#">health portal</Card.Link>.
+                            </Card.Text>
+                                <Row>
+                                    <div>
+                                        <Button onClick={this.toggleModal} style={buttonConfirmStyle}  className="center-btn">
+                                        Confirm
+                                        </Button>
+                                        <Button onClick={this.toggleModal} style={buttonCancelStyle} className="center-btn">
+                                        Cancel
+                                        </Button>
+                                    </div>
+                                </Row>
+                        </Card.Body>
+                    </Card>
+                </Row>
+
+
+
+
+
             </div>
         )
     }

apps/frontend/src/components/Doctors.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import DoctorsCard from './DoctorsCard';
+//import {Button, Row, Col, Container} from 'react-bootstrap';
+
+class Doctors extends React.Component{
+    constructor(props){
+        super(props)
+        this.state = {
+        };
+    }
+
+    componentDidMount(){
+    }
+
+
+    render(){
+        return(
+            <div>
+                <DoctorsCard name="Dr. Phil" drSpecialty='Generalist' address='CLT' />
+                <DoctorsCard name="Dr. Myers" drSpecialty='Cardiologists' address='CLT'/>
+                <DoctorsCard name="Dr. Oz" drSpecialty='Dermatologists' address='CLT'/>
+                <DoctorsCard name="Josh" drSpecialty='Family Physicians' address='CLT'/>
+            </div>
+        )
+    }
+}
+export default Doctors;

apps/frontend/src/components/DoctorsCard.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import Card from "react-bootstrap/Card";
+import {Button, Row, Col, Container} from 'react-bootstrap';
+
+class DoctorsCard extends React.Component{
+    constructor(props){
+        super(props)
+        this.state = {
+        };
+    }
+
+    componentDidMount(){
+    }
+
+
+    render(){
+
+    const buttonSelectStyle = {
+                marginLeft: '25px',
+                maginTop: '250px',
+                marginRight: '25px',
+                marginBotton: 'auto',
+                borderRadius: '1rem',
+                magin: '50px',
+                width: 'auto',
+                height: 'auto',
+                backgroundColor: 'rgb(40, 150, 20)'
+            };
+        return(
+           <Card >
+
+                           <Card.Body>
+                             <Card.Title style={{ color: "green" }}>{this.props.name}</Card.Title>
+                             <Card.Subtitle className="mb-2 text-muted">
+                               {this.props.drSpecialty}
+                             </Card.Subtitle>
+                             <Card.Text>
+                               {this.props.address}
+                             </Card.Text>
+                             <Row>
+                                 <div>
+                                  <Button onClick={this.toggleModal} style={buttonSelectStyle}  className="center-btn">
+                                 Select
+                                 </Button>
+
+                                    </div>
+                                   </Row>
+                           </Card.Body>
+                         </Card>
+        )
+    }
+}
+export default DoctorsCard;

apps/frontend/src/components/NavbarComponent.js

@@ -1,5 +1,9 @@
 import {Navbar,Container, Nav, Form, Button, FormControl} from 'react-bootstrap'
 import React from 'react'
+import ReactDOM from 'react-dom'
+import {BrowserRouter as Router, Route, Link} from "react-router-dom";
+
+
 
 class NavbarComponent extends React.Component{
     constructor(props){
@@ -18,6 +22,8 @@ class NavbarComponent extends React.Component{
                 <Nav className="me-auto">
                   <Nav.Link href="#">Appointment</Nav.Link>
                   <Nav.Link href="#">Doctors</Nav.Link>
+
+
                 </Nav>
               </Navbar.Collapse>
               <Form className="d-flex">