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="container">
                                <Grid item="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="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            Username
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs={6}>
                                        <div align="left">
                                            : {data.username}
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs="xs"></Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            Nama
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs={6}>
                                        <div align="left">
                                            : {data.firstName}
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs="xs"></Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            Email
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs={6}>
                                        <div align="left">
                                            : {data.email}
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs="xs"></Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            Nomer Telpon
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs={6}>
                                        <div align="left">
                                            : {data.telp}
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs="xs"></Grid>
                                </Grid>
                                <Button color="info" round="round" href={"/yamaha/profile/edit-profile?s="+data.id}>
                                    <Icon className={classes.icons}>open_in_new</Icon>Edit Profile
                                </Button>
                            </Grid>
                        )
                    }, {
                        tabButton: "Alamat",
                        tabIcon: LocationOn,
                        tabContent: (
                            <Grid container="container">
                                <Grid item="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="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            Nama
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs={6}>
                                        <div align="left">
                                            : {data.firstName}
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs="xs"></Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            Telpon
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs={6}>
                                        <div align="left">
                                            : {data.telp}
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs="xs"></Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            Alamat
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs={6}>
                                        <div align="left">
                                            : {data.address}
                                        </div>
                                    </Grid>
                                    <Grid item="item" xs="xs"></Grid>
                                </Grid>
                                <Button color="info" round="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="container">
                                <Grid item="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="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            <br></br>
                                            Password Saat Ini
                                        </div>
                                    </Grid>
                                    <Grid item="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="item" xs="xs"></Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            <br></br>
                                            Password Baru
                                        </div>
                                    </Grid>
                                    <Grid item="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="item" xs="xs"></Grid>
                                </Grid>
                                <Grid
                                    container="container"
                                    style={{
                                        padding: "10px"
                                    }}>
                                    <Grid item="item" xs="xs">
                                        <div align="left">
                                            <br></br>
                                            Konfirmasi Password
                                        </div>
                                    </Grid>
                                    <Grid item="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="item" xs="xs"></Grid>
                                </Grid>
                                <Button color="info" round="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;