here and there

rahulkrishnan98 · Apr 26, 2020 · 21a6b97 · 21a6b97
1 parent ec18418
commit 21a6b97
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "homepage": "http://rahulkrishnan98.github.io/react-ecommerce",
+  "homepage": "http://rahulkrishnan98.github.io/react-ecommerce/index.html",
   "name": "caps",
   "version": "0.1.0",
   "private": true,
@@ -27,6 +27,7 @@
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
     "react-spring": "^8.0.27",
+    "reactjs-popup": "^1.5.0",
     "semantic-ui-react": "^0.88.2",
     "social-media-icons-react": "^1.0.10"
   },
@@ -57,4 +58,4 @@
   "devDependencies": {
     "gh-pages": "^2.2.0"
   }
-}
+}
diff --git a/src/App.js b/src/App.js
@@ -7,7 +7,7 @@ import Navbar from 'react-bootstrap/Navbar';
 import Nav from 'react-bootstrap/Nav';
 import NavbarBrand from 'react-bootstrap/NavbarBrand';
 import { FaIdCard, FaAdobe } from "react-icons/fa";
-
+import { FiShoppingCart } from "react-icons/fi";
 
 import Footer from './components/footer'
 import FlyersPage from './pages/FlyersPage';
@@ -48,7 +48,8 @@ class App extends React.Component {
                 <Link class="nav-link" to="/">Home</Link>
                 <Link class="nav-link" to="/cards">Cards <FaIdCard /></Link>
                 <Link class="nav-link" to="/flyers">Flyers <FaAdobe /></Link>
-                <Link class="nav-link" to="/cart">Cart</Link>
+                <Link class="nav-link" to="/cart"><FiShoppingCart /></Link>
+
               </Nav>
             </Navbar.Collapse>
           </Navbar>

diff --git a/src/components/Form.js b/src/components/Form.js
@@ -40,22 +40,22 @@ const FormPage = (props) => {
 
             <Form.Row>
                 <Form.Group as={Col} controlId="formGridCity">
-                    <Form.Label>City</Form.Label>
-                    <Form.Control style={{ border: '0', borderBottom: '1px solid lightgray' }} />
+                    <Form.Label></Form.Label>
+                    <Form.Control placeholder="City" 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' }} >
+                    <Form.Label></Form.Label>
+                    <Form.Control placeholder="Special Delivery Instructions" 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.Label></Form.Label>
+                    <Form.Control placeholder="Zip" style={{ border: '0', borderBottom: '1px solid lightgray' }} />
                 </Form.Group>
             </Form.Row>
             <AwesomeButton type="secondary">Proceed to Pay</AwesomeButton>

diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js
@@ -2,25 +2,53 @@ import React from 'react';
 import Container from 'react-bootstrap/Container';
 import Row from 'react-bootstrap/Row';
 import Col from 'react-bootstrap/Col';
-import Form from "../components/Form"
+import Form from "../components/Form";
+import Table from 'react-bootstrap/Table';
+import Options from "../components/Options"
 
-function CartPage(props) {
-    return (
-        <Container >
-            <Row>
-                <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>
+class CartPage extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            headers: ["Items", "   ", 'Cost'],
+            items: ["Item1", "Item2"],
+            placeHolder: ["100USD", "2000 USD"]
 
-                </Col>
-                <Col md="7">
-                    <Form header={"Payment Details"} margin={"10%"} paddingLeft={"15%"} />
-                </Col>
+        }
+    }
+    render() {
+        return (
+            <Container >
+                <Row>
+                    <Col md='5'>
+                        <pre><h3 className="lead font-weight-light" style={{ paddingLeft: "20px", paddingTop: "25px" }}> Cart Items</h3></pre>
+                        <Table responsive>
+                            {/* <thead>
+                                {this.state.headers.map((value, index) => {
+                                    return <th className="lead font-weight-light">{value}</th>
+                                })}
+                            </thead> */}
+                            <tbody>
+                                {this.state.items.map((value, index) => {
+                                    return (<tr>
+                                        <td>{this.state.items[index]}</td>
+                                        <td>&nbsp;</td>
+                                        <td>{this.state.placeHolder[index]}</td></tr>
+                                    );
+                                })}
+                            </tbody>
+                        </Table>
+                        <h3 className="lead font-weight-light">Total:</h3><p>3000USD</p>
+                    </Col>
+                    <Col md="7">
+                        <Form header={"Payment Details"} margin={"10%"} paddingLeft={"15%"} />
+                    </Col>
 
-            </Row>
-        </Container>
+                </Row>
+            </Container >
+
+        );
+    }
 
-    );
 }
 export default CartPage
diff --git a/src/pages/Homepage.js b/src/pages/Homepage.js
@@ -30,9 +30,8 @@ function HomePage(props) {
                     <Col md={{ span: 4 }} style={{ textAlign: "centre" }}>
                         <img style={{ width: "100%" }} src={helper} alt="design" />
                         <h3 className="lead font-weight-light" style={{ paddingLeft: "20px", paddingTop: "25px" }}> Designed to streamline your print needs</h3>
-                        <p className="font-weight-light" style={{ margin: "15px", textAlign: "justify" }}>
-                            We’ve prepared a guide for you to get your artwork print ready with minimum faffing around.
-                            Simply place your order and send your artwork for proof.
+                        <p className="font-weight-light" style={{ margin: "15px", textAlign: "centre" }}>
+                            We’ve prepared a guide for you to get your artwork print ready. Simply place your order and send your artwork for proof.
                             Your order will then be delivered within 4 to 5 days from sign off.
                             <AwesomeButton style={{ marginLeft: "35%", marginTop: "5%" }} type="secondary">Start Printing</AwesomeButton>
                             {' '}
@@ -57,3 +56,4 @@ function HomePage(props) {
     );
 }
 export default HomePage;
+