add web

b_beauty_project/package-lock.json

@@ -3297,6 +3297,11 @@
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
       "integrity": "sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA=="
     },
+    "charenc": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/charenc/-/charenc-0.0.2.tgz",
+      "integrity": "sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc="
+    },
     "chokidar": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-2.1.8.tgz",
@@ -4314,6 +4319,11 @@
         }
       }
     },
+    "crypt": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/crypt/-/crypt-0.0.2.tgz",
+      "integrity": "sha1-iNf/fsDfuG9xPch7u0LQRNPmxBs="
+    },
     "crypto-browserify": {
       "version": "3.12.0",
       "resolved": "https://registry.npmjs.org/crypto-browserify/-/crypto-browserify-3.12.0.tgz",
@@ -7352,6 +7362,11 @@
       "resolved": "https://registry.npmjs.org/is-resolvable/-/is-resolvable-1.1.0.tgz",
       "integrity": "sha512-qgDYXFSR5WvEfuS5dMj6oTMEbrrSaM0CrFk2Yiq/gXnBvD9pMa2jGXxyhGLfvhZpuMZe18CJpFxAt3CRs42NMg=="
     },
+    "is-retina": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-retina/-/is-retina-1.0.3.tgz",
+      "integrity": "sha1-10AbKGvqKuN/Ykd1iN5QTQuGR+M="
+    },
     "is-root": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-root/-/is-root-2.1.0.tgz",
@@ -9023,6 +9038,16 @@
         }
       }
     },
+    "md5": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/md5/-/md5-2.2.1.tgz",
+      "integrity": "sha1-U6s41f48iJG6RlMp6iP6wFQBJvk=",
+      "requires": {
+        "charenc": "~0.0.1",
+        "crypt": "~0.0.1",
+        "is-buffer": "~1.1.1"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
@@ -11507,6 +11532,16 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-avatar": {
+      "version": "3.9.0",
+      "resolved": "https://registry.npmjs.org/react-avatar/-/react-avatar-3.9.0.tgz",
+      "integrity": "sha512-i9UR3z/Y4JhAb6WH0yaAr6noLwLVgUyp7kOMu48Plc9ch6OQ3k4aDqp+m0TrCbHAn8YfRv2BevK9gA0nIqwVbA==",
+      "requires": {
+        "core-js": "^3.6.1",
+        "is-retina": "^1.0.3",
+        "md5": "^2.0.0"
+      }
+    },
     "react-beautiful-dnd": {
       "version": "11.0.3",
       "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-11.0.3.tgz",

b_beauty_project/package.json

@@ -15,7 +15,9 @@
     "date-fns": "^2.9.0",
     "material-table": "^1.56.1",
     "mysql": "^2.18.1",
+    "prop-types": "^15.7.2",
     "react": "^16.12.0",
+    "react-avatar": "^3.9.0",
     "react-dom": "^16.12.0",
     "react-intl": "^3.11.0",
     "react-router-dom": "^5.1.2",

b_beauty_project/src/views/DataShopPage/Datashop/index.js

 import React, { Component } from "react";
 import { withStyles } from "@material-ui/core/styles";
-import { Button, TextField } from "@material-ui/core";
-import { withRouter } from "react-router-dom";
 import compose from "recompose/compose";
+import { withRouter } from "react-router-dom";
+import Input from "@material-ui/core/Input";
+import InputLabel from "@material-ui/core/InputLabel";
+import InputAdornment from "@material-ui/core/InputAdornment";
+import FormControl from "@material-ui/core/FormControl";
+import TextField from "@material-ui/core/TextField";
+import Grid from "@material-ui/core/Grid";
+import AccountCircle from "@material-ui/icons/AccountCircle";
+import AddPhotoAlternateIcon from "@material-ui/icons/AddPhotoAlternate";
+import MailOutlineIcon from "@material-ui/icons/MailOutline";
+import VpnKeyIcon from "@material-ui/icons/VpnKey";
+import Button from "@material-ui/core/Button";
+import TextareaAutosize from "@material-ui/core/TextareaAutosize";
+import ContactPhoneIcon from "@material-ui/icons/ContactPhone";
+import BusinessIcon from "@material-ui/icons/Business";
+import Fab from "@material-ui/core/Fab";
+import EditIcon from "@material-ui/icons/Edit";
+import Paper from "@material-ui/core/Paper";
+import CardMedia from "@material-ui/core/CardMedia";
+import MenuItem from "@material-ui/core/MenuItem";
+import PhotoCameraIcon from "@material-ui/icons/PhotoCamera";
+import Avatar from "react-avatar";
 
 const styles = theme => ({
+  margin: {
+    margin: theme.spacing(1)
+  },
   root: {
-    height: 150
+    "& .MuiTextField-root": {
+      margin: theme.spacing(1),
+      width: 200
+    }
   }
 });
 
-class DataShop extends Component {
-  state = {};
+const currencies = [
+  {
+    value: "1",
+    label: "    กรุณาเลือกประเภท     "
+  },
+  {
+    value: "2",
+    label: "สปาและนวด"
+  },
+  {
+    value: "3",
+    label: "ผิวหน้า"
+  },
+  {
+    value: "4",
+    label: "ขนตาและคิ้ว"
+  },
+  {
+    value: "5",
+    label: "ทำเล็บ"
+  },
+  {
+    value: "6",
+    label: "ชาลอน"
+  },
+  {
+    value: "7",
+    label: "แต่งหน้าทำผม"
+  }
+];
+
+class Datashop extends Component {
+  state = {
+    currency: "1"
+  };
+
+  handleChange = event => {
+    this.setState({
+      currency: event.target.value
+    });
+  };
 
   render() {
     const { classes } = this.props;
+    const { currency } = this.state;
     return (
+      <div className="row center">
+        <div className="row mt-2 mb-2">
+          <h2>ข้อมูลร้าน</h2>
+        </div>
+        <br />
+        <div className="row mt-2 mb-2">
+          <div className="col s12 m6 l12">
+            <div className="row center">
+              <h4>ข้อมูทั่วไป</h4>
+            </div>
+            <div className="row center">
+              <br />
+
+              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRGzUPvW-KAdZI6KiIyh-HHSKtqKRGSWcP3vDqHUd2Sn2F3SHwr" />
+            </div>
+            <div className="row center">
+              <Button variant="outlined" color="primary">
+                <PhotoCameraIcon />
+                แก้ไขรูปภาพร้าน
+              </Button>
+            </div>
+          </div>
+          <div className="col s12 m6 l12">
+            <div ClassName="row">
+              <TextField
+                className={classes.margin}
+                id="outlined-uncontrolled"
+                label="ชื่อร้าน"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AccountCircle />
+                    </InputAdornment>
+                  )
+                }}
+              />
+
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="เวลาเปิดร้าน"
+                autoComplete="Phone number"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <ContactPhoneIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="เวลาปิดร้าน"
+                autoComplete="Phone number"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <ContactPhoneIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <br />
+            <div>
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="เบอร์โทรร้าน"
+                autoComplete="address"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="ที่อยู่ร้าน"
+                autoComplete="Phone number"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <ContactPhoneIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="รายละเอียดร้าน"
+                autoComplete="address"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+            </div>
+            <br />
             <div>
-        <TextField id="standard-basic" label="Standard" />
-        <Button>login</Button>
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="GoogleMap"
+                autoComplete="address"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                label="Facebook"
+                autoComplete="address"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon />
+                    </InputAdornment>
+                  )
+                }}
+              />
+              <TextField
+                className={classes.margin}
+                id="outlined-password-input"
+                select
+                label="ประเภทของร้าน"
+                value={currency}
+                onChange={this.handleChange}
+                SelectProps={{
+                  native: true
+                }}
+                variant="outlined"
+                
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <BusinessIcon />
+                    </InputAdornment>
+                  )
+                }}
+              >{currencies.map(option => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}</TextField>
+             
+            </div>
+            <br></br>
+
+            <div className="row">
+              <div className={classes.root}>
+                <Button variant="contained" color="secondary">
+                  ยกเลิก
+                </Button>{" "}
+                &nbsp; &nbsp; &nbsp;
+                <Button variant="contained" color="primary">
+                  ตกลง
+                </Button>
+                &nbsp; &nbsp; &nbsp;
+                <Fab color="secondary" aria-label="edit">
+                  <EditIcon />
+                </Fab>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     );
   }
 }
-
-export default compose(withStyles(styles), withRouter)(DataShop);
+export default compose(withStyles(styles), withRouter)(Datashop);

b_beauty_project/src/views/DataShopPage/Home/index.js

@@ -25,8 +25,13 @@ import compose from "recompose/compose";
 import Profile from "../Profile";
 import Lists from "../List";
 import Managequeue from "../Managequeue";
-
+import AccountBoxIcon from "@material-ui/icons/AccountBox";
+import StorageIcon from "@material-ui/icons/Storage";
 import Addimage from "../Addimage";
+import ListIcon from "@material-ui/icons/List";
+import RecentActorsIcon from "@material-ui/icons/RecentActors";
+import QueryBuilderIcon from "@material-ui/icons/QueryBuilder";
+import AddAPhotoIcon from "@material-ui/icons/AddAPhoto";
 
 const drawerWidth = 240;
 
@@ -115,7 +120,7 @@ class ResponsiveDrawer extends Component {
             selected={path == "profile" ? true : false}
           >
             <ListItemIcon>
-              <InboxIcon />
+              <AccountBoxIcon />
             </ListItemIcon>
             <ListItemText primary="โปรไฟล์ร้าน" />
           </ListItem>
@@ -128,7 +133,7 @@ class ResponsiveDrawer extends Component {
             selected={path == "datashop" ? true : false}
           >
             <ListItemIcon>
-              <MailIcon />
+              <StorageIcon />
             </ListItemIcon>
             <ListItemText primary="ข้อมูลร้าน" />
           </ListItem>
@@ -140,7 +145,7 @@ class ResponsiveDrawer extends Component {
             selected={path == "list" ? true : false}
           >
             <ListItemIcon>
-              <MailIcon />
+              <ListIcon />
             </ListItemIcon>
             <ListItemText primary="รายการ" />
           </ListItem>
@@ -152,7 +157,7 @@ class ResponsiveDrawer extends Component {
             selected={path == "databeautician" ? true : false}
           >
             <ListItemIcon>
-              <MailIcon />
+              <RecentActorsIcon />
             </ListItemIcon>
             <ListItemText primary="ข้อมูลช่าง" />
           </ListItem>
@@ -164,7 +169,7 @@ class ResponsiveDrawer extends Component {
             selected={path == "managequeue" ? true : false}
           >
             <ListItemIcon>
-              <MailIcon />
+              <QueryBuilderIcon />
             </ListItemIcon>
             <ListItemText primary="จัดการคิว" />
           </ListItem>
@@ -176,12 +181,10 @@ class ResponsiveDrawer extends Component {
             selected={path == "addimage" ? true : false}
           >
             <ListItemIcon>
-              <MailIcon />
+              <AddAPhotoIcon />
             </ListItemIcon>
             <ListItemText primary="เพิ่มรูปภาพ" />
           </ListItem>
-         
-         
         </List>
       </div>
     );
@@ -231,7 +234,6 @@ class ResponsiveDrawer extends Component {
           {path == "databeautician" ? <Databeautician /> : null}
           {path == "managequeue" ? <Managequeue /> : null}
           {path == "addimage" ? <Addimage /> : null}
-       
         </main>
       </div>
     );

b_beauty_project/src/views/DataShopPage/List/index.js

@@ -96,14 +96,13 @@ class Databeautician extends Component {
     open: false,
     columns: [
       { title: "Name", field: "name" },
+      { title: "Price", field: "price" },
       { title: "Time", field: "time" }
+      
     ],
     data: [
-      { name: "Mehmet", time: "Baran" },
-      {
-        name: "Zerya Betül",
-        time: "Baran"
-      }
+      { name: "Mehmet", price:"200", time: "Baran"},
+      
     ]
   };
   handleClickOpen = () => {

b_beauty_project/src/views/DataShopPage/Managequeue/index.js

@@ -110,14 +110,12 @@ class Databeautician extends Component {
   state = {
     open: false,
     columns: [
-      { title: "Name", field: "name" },
-      { title: "E-mail", field: "surname" },
-      { title: "Address", field: "birthYear", type: "numeric" },
-      {
-        title: "Phone number",
-        field: "birthCity",
-        lookup: { 34: "İstanbul", 63: "Şanlıurfa" }
-      }
+      { title: "ชื่อคนจอง", field: "name" },
+      { title: "รายการจอง", field: "list" },
+      { title: "วัน/เดือน/ปี ที่จอง", field: "dete" },
+      { title: "เวลาที่จอง", field: "time" },
+
+      { title: "ช่างที่จอง", field: "booking" }
     ],
     data: [
       { name: "Mehmet", surname: "Baran", birthYear: 1987, birthCity: 63 },
@@ -171,7 +169,7 @@ class Databeautician extends Component {
     return (
       <div>
         <MaterialTable
-          title="ข้อมูลช่าง"
+          title="จัดการคิว"
           columns={columns}
           data={data}
           options={{

b_beauty_project/src/views/HomePage/index.js

@@ -21,7 +21,8 @@ import { th } from "date-fns/locale";
 import { format } from "date-fns";
 import { MenuIcon } from "@material-ui/icons/Menu";
 import TextField from "@material-ui/core/TextField";
-
+import SearchIcon from "@material-ui/icons/Search";
+import DirectionsIcon from "@material-ui/icons/Directions";
 
 const styles = theme => ({
   root: {
@@ -32,7 +33,22 @@ const styles = theme => ({
     // Disable this demo to preserve the others.
     "@media all and (-ms-high-contrast: none)": {
       display: "none"
-    }
+    },
+    padding: "2px 4px",
+    display: "flex",
+    alignItems: "center",
+    width: 400
+  },
+  input: {
+    marginLeft: theme.spacing(1),
+    flex: 1
+  },
+  iconButton: {
+    padding: 10
+  },
+  divider: {
+    height: 28,
+    margin: 4
   },
   modal: {
     display: "flex",
@@ -119,6 +135,35 @@ class HomePage extends Component {
       <div>
         <AppBra tab={tab} handleChangeTab={this.handleChangeTab} />
         <div className="row center">
+          <div className="row mt-2 mb-2">
+            <div>
+              <Paper component="form" className={classes.root}>
+                <IconButton className={classes.iconButton} aria-label="menu">
+                  <MenuIcon />
+                </IconButton>
+                <InputBase
+                  className={classes.input}
+                  placeholder="Search Google Maps"
+                  inputProps={{ "aria-label": "search google maps" }}
+                />
+                <IconButton
+                  type="submit"
+                  className={classes.iconButton}
+                  aria-label="search"
+                >
+                  <SearchIcon />
+                </IconButton>
+                <Divider className={classes.divider} orientation="vertical" />
+                <IconButton
+                  color="primary"
+                  className={classes.iconButton}
+                  aria-label="directions"
+                >
+                  <DirectionsIcon />
+                </IconButton>
+              </Paper>
+            </div>
+          </div>
           <div className="row mt-2 mb-2">
             <div className="col s12 m6 l6">
               <h3>ชื่อ</h3>
@@ -135,7 +180,6 @@ class HomePage extends Component {
             <div className="col s12 m6 l6">
               <div className="row">
                 <h4>ที่อยู่ร้าน</h4>
-               
               </div>
 
               <div className="row">

b_beauty_project/src/views/ShopPage/index.js

+import React, { Component } from "react";
+import { withStyles } from "@material-ui/core/styles";
+import compose from "recompose/compose";
+import { withRouter } from "react-router-dom";
+import AppBar from "../../components/AppBra";
+import Button from "@material-ui/core/Button";
+import Card from "@material-ui/core/Card";
+import CardActions from "@material-ui/core/CardActions";
+import CardContent from "@material-ui/core/CardContent";
+
+import Typography from "@material-ui/core/Typography";
+
+const styles = theme => ({
+  root: {
+    minWidth: 275
+  },
+  bullet: {
+    display: "inline-block",
+    margin: "0 2px",
+    transform: "scale(0.8)"
+  },
+  title: {
+    fontSize: 14
+  },
+  pos: {
+    marginBottom: 12
+  }
+});
+class ShopPage extends Component {
+  render() {
+    const { classes } = this.props;
+    const bull = <span className={classes.bullet}>•</span>;
+    return (
+      <div>
+        <AppBar />
+        <div className="row ">
+          <div className="row mt-2 mb-2">
+            <div className="col s12 m6 l6">
+              <center>
+                <h3>ชื่อ</h3>
+              </center>
+            </div>
+          </div>
+          <div className="row mt-2 mb-2">
+            <div className="col s12 m6 l8">
+              <div>
+                <img
+                  src="https://www.smeleader.com/wp-content/uploads/2018/05/%E0%B9%81%E0%B8%9F%E0%B8%A3%E0%B8%99%E0%B9%84%E0%B8%8A%E0%B8%AA%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B9%80%E0%B8%AA%E0%B8%A3%E0%B8%B4%E0%B8%A1%E0%B8%AA%E0%B8%A7%E0%B8%A2-%E0%B8%A3%E0%B8%A7%E0%B8%A1%E0%B9%81%E0%B8%9A%E0%B8%A3%E0%B8%99%E0%B8%94%E0%B9%8C%E0%B8%A3%E0%B9%89%E0%B8%B2%E0%B8%99%E0%B8%8B%E0%B8%B2%E0%B8%A5%E0%B8%AD%E0%B8%99-%E0%B8%AA%E0%B8%B2%E0%B8%99%E0%B8%9D%E0%B8%B1%E0%B8%99%E0%B8%98%E0%B8%B8%E0%B8%A3%E0%B8%81%E0%B8%B4%E0%B8%88%E0%B8%97%E0%B8%A3%E0%B8%87%E0%B8%9C%E0%B8%A1.jpg"
+                  width="90%"
+                ></img>
+              </div>
+              <div className="row center">
+                <Button variant="contained" color="secondary">
+                  รายการ
+                </Button>{" "}
+                &nbsp; &nbsp; &nbsp;
+                <Button variant="contained" color="primary">
+                  จองคิว
+                </Button>
+              </div>
+            </div>
+
+            <div className="col s12 m6 l4">
+              <div className="row">
+                <h4> ที่อยู่ : 85 Sathonlamak Rd, Mueang Si Khai, Warin Chamrap District, Ubon Ratchathani 34190</h4>
+              </div>
+
+              <div className="row">
+                <center>
+                  <img
+                    src="https://lh3.googleusercontent.com/proxy/wF4hP1ITvhgYYaNaiAVTwuKzkAESOzL-PBNcSqC8xoR-cg2m2ztZVOc8B0gvjhF-3b0AXlJ2a_hV1X_XjNHqBGCKR-I-RdzGiMRSw0wVv-uv88ELTATaE4jBpyNILc20PSsLxpgQSpS-etDENw"
+                    width="70%"
+                  ></img>
+                </center>
+              </div>
+              <div className="row">
+                <h4>เบอร์โทร :08xxxxxx</h4>
+                <h4>เวลาเปิด : 08:00 น.</h4>
+                <h4>เวลาปิด : 18:00 น.</h4>
+              </div>
+            </div>
+          </div>
+
+          <div className="row mt-2 mb-2">
+            <div className="col s12 m6 l7">
+              <div className="row center">
+              <Card className={classes.root} variant="outlined">
+                <h4>ผลงานช่าง นาย</h4>
+                <div className="col s12 m6 l4">
+                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAaEt_unwBuDLyqCP_bW3PBawVHkjZrNq-F3u7mAKtSjmBTrHE"></img>
+                </div>
+                <div className="col s12 m6 l4">
+                  <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSAaEt_unwBuDLyqCP_bW3PBawVHkjZrNq-F3u7mAKtSjmBTrHE"></img>
+                </div>
+              </Card>
+              </div>
+            </div>
+            <div className="col s12 m6 l1"></div>
+            <div className="col s12 m6 l4">
+              <div className="row">
+                <center></center>
+              </div>
+              <div className="row">
+                <Card className={classes.root} variant="outlined">
+                  <CardContent>
+                    <Typography
+                      className={classes.title}
+                      color="textSecondary"
+                      gutterBottom
+                    >
+                      โปรโมชั่น
+                    </Typography>
+                    <Typography variant="h5" component="h2">
+                      be{bull}nev{bull}o{bull}lent
+                    </Typography>
+                    <Typography className={classes.pos} color="textSecondary">
+                      adjective
+                    </Typography>
+                    <Typography variant="body2" component="p">
+                      well meaning and kindly.
+                      <br />
+                      {'"a benevolent smile"'}
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button size="small">Learn More</Button>
+                  </CardActions>
+                </Card>
+              </div>
+              <div className="row">
+                <Card className={classes.root} variant="outlined">
+                  <CardContent>
+                    <Typography
+                      className={classes.title}
+                      color="textSecondary"
+                      gutterBottom
+                    >
+                     รีวิว
+                    </Typography>
+                    <Typography variant="h5" component="h2">
+                      be{bull}nev{bull}o{bull}lent
+                    </Typography>
+                    <Typography className={classes.pos} color="textSecondary">
+                      adjective
+                    </Typography>
+                    <Typography variant="body2" component="p">
+                      well meaning and kindly.
+                      <br />
+                      {'"a benevolent smile"'}
+                    </Typography>
+                  </CardContent>
+                  <CardActions>
+                    <Button size="small">Learn More</Button>
+                  </CardActions>
+                </Card>
+              </div>
+              <div className="row right">
+                <Button variant="contained" color="primary">
+                  เขียนรีวิว
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export default compose(withStyles(styles), withRouter)(ShopPage);