From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001
From: gabrhr <73925454+gabrhr@users.noreply.github.com>
Date: Wed, 20 Apr 2022 10:19:29 -0500
Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Base para front
---
 .../app/components/Search/SearchProduct.js         | 84 ++++++++++++++++++++++
 .../odiparpack/app/components/Search/search-jss.js | 48 +++++++++++++
 2 files changed, 132 insertions(+)
 create mode 100644 front/odiparpack/app/components/Search/SearchProduct.js
 create mode 100644 front/odiparpack/app/components/Search/search-jss.js

(limited to 'front/odiparpack/app/components/Search')

diff --git a/front/odiparpack/app/components/Search/SearchProduct.js b/front/odiparpack/app/components/Search/SearchProduct.js
new file mode 100644
index 0000000..b465808
--- /dev/null
+++ b/front/odiparpack/app/components/Search/SearchProduct.js
@@ -0,0 +1,84 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
+import SearchIcon from '@material-ui/icons/Search';
+import { AppBar, Toolbar, IconButton, Badge } from '@material-ui/core';
+import Cart from '../Cart/Cart';
+import styles from './search-jss';
+
+
+class SearchProduct extends React.Component {
+  state = {
+    anchorEl: null,
+  };
+
+  handleClick = event => {
+    this.setState({ anchorEl: event.currentTarget });
+  };
+
+  handleClose = () => {
+    this.setState({ anchorEl: null });
+  };
+
+  render() {
+    const { anchorEl } = this.state;
+    const {
+      classes,
+      dataCart,
+      removeItem,
+      checkout,
+      totalItems,
+      totalPrice,
+      search
+    } = this.props;
+    return (
+      <div className={classes.root}>
+        <AppBar position="static" color="inherit">
+          <Toolbar>
+            <div className={classes.flex}>
+              <div className={classes.wrapper}>
+                <div className={classes.search}>
+                  <SearchIcon />
+                </div>
+                <input className={classes.input} placeholder="Search Product" onChange={(event) => search(event)} />
+              </div>
+            </div>
+            <div>
+              <IconButton
+                color="inherit"
+                aria-owns={anchorEl ? 'simple-menu' : null}
+                aria-haspopup="true"
+                onClick={this.handleClick}
+              >
+                <Badge badgeContent={totalItems} color="secondary">
+                  <ShoppingCartIcon />
+                </Badge>
+              </IconButton>
+              <Cart
+                anchorEl={anchorEl}
+                dataCart={dataCart}
+                close={this.handleClose}
+                removeItem={removeItem}
+                checkout={checkout}
+                totalPrice={totalPrice}
+              />
+            </div>
+          </Toolbar>
+        </AppBar>
+      </div>
+    );
+  }
+}
+
+SearchProduct.propTypes = {
+  classes: PropTypes.object.isRequired,
+  dataCart: PropTypes.object.isRequired,
+  removeItem: PropTypes.func.isRequired,
+  search: PropTypes.func.isRequired,
+  checkout: PropTypes.func.isRequired,
+  totalItems: PropTypes.number.isRequired,
+  totalPrice: PropTypes.number.isRequired,
+};
+
+export default withStyles(styles)(SearchProduct);
diff --git a/front/odiparpack/app/components/Search/search-jss.js b/front/odiparpack/app/components/Search/search-jss.js
new file mode 100644
index 0000000..5ba6ee0
--- /dev/null
+++ b/front/odiparpack/app/components/Search/search-jss.js
@@ -0,0 +1,48 @@
+const styles = theme => ({
+  root: {
+    flexGrow: 1,
+    marginTop: 20,
+    marginBottom: 40
+  },
+  flex: {
+    flex: 1,
+  },
+  menuButton: {
+    marginLeft: -12,
+    marginRight: 20,
+  },
+  wrapper: {
+    fontFamily: theme.typography.fontFamily,
+    position: 'relative',
+    marginRight: theme.spacing(2),
+    marginLeft: theme.spacing(1),
+    borderRadius: 2,
+    display: 'block',
+  },
+  search: {
+    width: 'auto',
+    height: '100%',
+    position: 'absolute',
+    pointerEvents: 'none',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  input: {
+    font: 'inherit',
+    padding: `${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(1)}px ${theme.spacing(4)}px`,
+    border: 0,
+    display: 'block',
+    verticalAlign: 'middle',
+    whiteSpace: 'normal',
+    background: 'none',
+    margin: 0, // Reset for Safari
+    color: 'inherit',
+    width: '100%',
+    '&:focus': {
+      outline: 0,
+    },
+  },
+});
+
+export default styles;
-- 
cgit v1.2.3