tbg-ecomm-nextjs/pages-sections/yamaha/profile/profile.js

import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import Select from 'react-select';

import People from "@material-ui/icons/People";
import LocationOn from "@material-ui/icons/LocationOn";
import Lock from "@material-ui/icons/Lock";
import image1 from "../../../assets/img/mail.png"

import CustomInput from "components/CustomInput/CustomInput.js";
import InputAdornment from "@material-ui/core/InputAdornment";
import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import GridContainer from "components/Grid/GridContainer.js";
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import NavPills from "components/NavPills/NavPills.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/pillsStyle.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
    },
    paper: {
        padding: theme.spacing(2),
        textAlign: 'center',
        color: theme.palette.text.secondary,
    },
}));

const DataApparel = function ({ profile, user, ...props }) {
    const [pass, setPass] = React.useState("");
    const classes = useStyles();
    const { ...rest } = props;
    const imageClasses = classNames(
        classes.imgRaised,
        classes.imgRoundedCircle,
        classes.imgFluid
    );
    const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
    const Profile = profile.map((data) => {
        return (
            <NavPills
                color="info"
                horizontal={{
                    tabsGrid: { xs: 4, sm: 3, md: 3 },
                    contentGrid: { xs: 14, sm: 9, md: 9 }
                }}
                tabs={[
                    {
                        tabButton: "Profile",
                        tabIcon: People,
                        tabContent: (
                            <Grid container>
                                            <Grid item xs={12}>
                                                <div align="left">
                                                    <h3>Profile Saya</h3>
                                                    <span>Kelola informasi profil Anda untuk mengontrol, melindungi dan mengamankan akun</span><hr></hr>
                                                </div>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                        Username
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                        : {data.username}
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                        Nama
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                        : {data.first_name}
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                        Email
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                        : {data.email}
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                        Nomer Telpon
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                        : {data.telp}
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Button 
                                            color="info" round
                                            href={"/yamaha/product/product_detail?s="}
                                            >
                                                <Icon className={classes.icons}>open_in_new</Icon>Edit Profile
                                            </Button>
                                        </Grid>
                        )
                    },
                    {
                        tabButton: "Alamat",
                        tabIcon: LocationOn,
                        tabContent: (
                            <Grid container>
                                            <Grid item xs={12}>
                                                <div align="left">
                                                    <h3>Alamat Saya</h3>
                                                    <span>Kelola informasi Alamat Anda untuk Proses Pengirim Barang</span>
                                                </div><hr></hr>
                                            </Grid>
                                            <img src={image1} style={{width:"920px"}}/><br></br>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                        Nama
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                        : {data.first_name}
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                        Telpon
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                        : {data.telp}
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                        Alamat
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                        : {data.address}
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Button 
                                            color="info" round
                                            href={"/yamaha/product/product_detail?s="}
                                            >
                                                <Icon className={classes.icons}>open_in_new</Icon>Edit Alamat
                                            </Button>
                                        </Grid>
                        )
                    },
                    {
                        tabButton: "Ubah Password",
                        tabIcon: Lock,
                        tabContent: (
                            <Grid container>
                                            <Grid item xs={12}>
                                                <div align="left">
                                                    <h3>Ubah Password</h3>
                                                    <span>Untuk keamanan akun Anda, mohon untuk tidak menyebarkan password Anda ke orang lain</span>
                                                </div><hr></hr>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                        <br></br>
                                                        Password Saat Ini
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                    <CustomInput
                                                        labelText="Password Saat Ini"
                                                        id="pass"
                                                        value={pass}
                                                        formControlProps={{
                                                            fullWidth: true,
                                                        }}
                                                        inputProps={{
                                                            onChange: (event) => setPass(event.target.value),
                                                            type: "password",
                                                            endAdornment: (
                                                            <InputAdornment position="end">
                                                                <Icon className={classes.inputIconsColor}>
                                                                lock_outline
                                                                </Icon>
                                                            </InputAdornment>
                                                            ),
                                                            autoComplete: "off",
                                                        }}
                                                    />
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                    <br></br>
                                                        Password Baru
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                    <CustomInput
                                                        labelText="Password Baru"
                                                        id="pass"
                                                        value={pass}
                                                        formControlProps={{
                                                            fullWidth: true,
                                                        }}
                                                        inputProps={{
                                                            onChange: (event) => setPass(event.target.value),
                                                            type: "password",
                                                            endAdornment: (
                                                            <InputAdornment position="end">
                                                                <Icon className={classes.inputIconsColor}>
                                                                lock_outline
                                                                </Icon>
                                                            </InputAdornment>
                                                            ),
                                                            autoComplete: "off",
                                                        }}
                                                    />
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Grid container style={{padding:"10px"}}>
                                                <Grid item xs>
                                                    <div align="left">
                                                    <br></br>
                                                        Konfirmasi Password
                                                    </div>
                                                </Grid>
                                                <Grid item xs={6}>
                                                    <div align="left">
                                                    <CustomInput
                                                        labelText="Konfirmasi Password"
                                                        id="pass"
                                                        value={pass}
                                                        formControlProps={{
                                                            fullWidth: true,
                                                        }}
                                                        inputProps={{
                                                            onChange: (event) => setPass(event.target.value),
                                                            type: "password",
                                                            endAdornment: (
                                                            <InputAdornment position="end">
                                                                <Icon className={classes.inputIconsColor}>
                                                                lock_outline
                                                                </Icon>
                                                            </InputAdornment>
                                                            ),
                                                            autoComplete: "off",
                                                        }}
                                                    />
                                                    </div>
                                                </Grid>
                                                <Grid item xs>
                                                </Grid>
                                            </Grid>
                                            <Button 
                                            color="info" round
                                            href={"/yamaha/product/product_detail?s="}
                                            >
                                                <Icon className={classes.icons}>open_in_new</Icon> Simpan
                                            </Button>
                                        </Grid>
                        )
                    }
                ]}
            />
        );
    })
    return (
        <div>
        <Card className={classes.textCenter} align="center">
            <CardBody>
                <div align="center">
                    <div align="center" className={classes.section} id="notifications" style={{marginTop:"-50px"}}>
                        <SnackbarContent
                        message={
                            <h4>Profile</h4>
                        }
                        align="center"
                        color="info"
                        />
                    </div>
                    <GridContainer justify="center" style={{padding: "10px"}}>
                        {Profile}
                    </GridContainer>
                </div><br></br><br></br>
            </CardBody>
        </Card>
        </div>
    );
}

export default DataApparel;