cart maybe

rahulkrishnan98 · Apr 19, 2020 · ec18418 · ec18418
1 parent 89808c0
commit ec18418
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 33 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -16,6 +16,7 @@
     "bootstrap": "^4.4.1",
     "m-btn": "^1.0.13",
     "material-ui": "^1.0.0-beta.47",
+    "mdbootstrap": "^4.16.0",
     "mdbreact": "^4.25.6",
     "react": "^16.13.1",
     "react-awesome-button": "^6.5.1",
@@ -56,4 +57,4 @@
   "devDependencies": {
     "gh-pages": "^2.2.0"
   }
-}
+}
diff --git a/public/index.html b/public/index.html
@@ -4,6 +4,7 @@
 <head>
   <meta charset="utf-8" />
   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="theme-color" content="#000000" />
   <meta name="description" content="Web site created using create-react-app" />

diff --git a/src/components/Form.js b/src/components/Form.js
@@ -0,0 +1,67 @@
+import React from "react";
+import Form from 'react-bootstrap/Form'
+import FormControl from 'react-bootstrap/FormControl'
+import FormCheck from 'react-bootstrap/FormCheck'
+import FormFile from 'react-bootstrap/FormFile'
+import Container from 'react-bootstrap/Container';
+import Row from 'react-bootstrap/Row';
+import Col from 'react-bootstrap/Col';
+
+import 'react-awesome-button/dist/themes/theme-blue.css';
+import {
+    AwesomeButton,
+} from 'react-awesome-button';
+
+
+const FormPage = (props) => {
+    return (
+        <Form style={{ margin: props.margin }}>
+            <Form.Row>
+                <Form.Group as={Col} controlId="fname" >
+                    <Form.Label></Form.Label>
+                    <Form.Control type="text" placeholder="First Name" style={{ border: '0', borderBottom: '1px solid lightgray' }} />
+                </Form.Group>
+
+                <Form.Group as={Col} controlId="lname">
+                    <Form.Label></Form.Label>
+                    <Form.Control type="text" placeholder="Last Name" style={{ border: '0', borderBottom: '1px solid lightgray' }} />
+                </Form.Group>
+            </Form.Row>
+
+            <Form.Group controlId="formGridAddress1">
+                <Form.Label></Form.Label>
+                <Form.Control placeholder="Address" style={{ border: '0', borderBottom: '1px solid lightgray' }} />
+            </Form.Group>
+
+            <Form.Group controlId="delivery">
+                <Form.Label></Form.Label>
+                <Form.Control placeholder="Special Delivery Instructions" style={{ border: '0', borderBottom: '1px solid lightgray' }} />
+            </Form.Group>
+
+            <Form.Row>
+                <Form.Group as={Col} controlId="formGridCity">
+                    <Form.Label>City</Form.Label>
+                    <Form.Control style={{ border: '0', borderBottom: '1px solid lightgray' }} />
+                </Form.Group>
+
+                <Form.Group as={Col} controlId="formGridState">
+                    <Form.Label>State</Form.Label>
+                    <Form.Control as="select" value="Choose..." style={{ border: '0', borderBottom: '1px solid lightgray' }} >
+                        <option>Tamil Nadu</option>
+                        <option>Kerala</option>
+                        <option>Gujarat</option>
+                    </Form.Control>
+                </Form.Group>
+
+                <Form.Group as={Col} controlId="formGridZip">
+                    <Form.Label>Zip</Form.Label>
+                    <Form.Control style={{ border: '0', borderBottom: '1px solid lightgray' }} />
+                </Form.Group>
+            </Form.Row>
+            <AwesomeButton type="secondary">Proceed to Pay</AwesomeButton>
+            {' '}
+        </Form>
+    );
+};
+
+export default FormPage;
diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js
@@ -2,47 +2,25 @@ import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import Card from 'react-bootstrap/Card'
+import Form from "../components/Form"
 
 function CartPage(props) {
     return (
-        <Container fluid={true}>
+        <Container >
             <Row>
-                <Col md={4} sm={8}>
+                <Col md='5'>
+                    <pre><h3 className="lead font-weight-light" style={{ paddingLeft: "20px", paddingTop: "25px" }}> Cart Items</h3></pre>
+                    <hr />
+                    <h4 className="lead font-weight-light" style={{ align: "left", display: "inline" }}>Items</h4><h4 className="lead font-weight-light" style={{ marginLeft: "45%", align: "right", display: "inline" }}>Cost</h4>
 
                 </Col>
-                <Col md={4} sm={8}>
-                    <Card
-                        bg="dark"
-                        text='white'
-                        style={{ width: '18rem', margin: "10%" }}
-                    >
-                        <Card.Body>
-                            <Card.Title>Address Detils</Card.Title>
-                            <Card.Text>
-                                Some quick example text to build on the card title and make up the
-                                bulk of the card's content.
-                        </Card.Text>
-                        </Card.Body>
-                    </Card>
-                </Col>
-                <Col md={4} sm={8}>
-                    <Card
-                        bg="dark"
-                        text='white'
-                        style={{ width: '18rem', margin: "10%" }}
-                    >
-                        <Card.Body>
-                            <Card.Title>Address Detils</Card.Title>
-                            <Card.Text>
-                                Some quick example text to build on the card title and make up the
-                                bulk of the card's content.
-                        </Card.Text>
-                        </Card.Body>
-                    </Card>
+                <Col md="7">
+                    <Form header={"Payment Details"} margin={"10%"} paddingLeft={"15%"} />
                 </Col>
+
             </Row>
         </Container>
+
     );
 }
 export default CartPage