next-material-kit
Version:
NextJS Version of Material Kit React by Creative Tim (https://creative-tim.com)
207 lines (203 loc) • 8.27 kB
JavaScript
import React from "react";
// nodejs library that concatenates classes
import classNames from "classnames";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import Camera from "@material-ui/icons/Camera";
import Palette from "@material-ui/icons/Palette";
import Favorite from "@material-ui/icons/Favorite";
// core components
import Header from "components/Header/Header.js";
import Footer from "components/Footer/Footer.js";
import Button from "components/CustomButtons/Button.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import NavPills from "components/NavPills/NavPills.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "styles/jss/nextjs-material-kit/pages/profilePage.js";
const useStyles = makeStyles(styles);
export default function ProfilePage(props) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
return (
<div>
<Header
color="transparent"
brand="NextJS Material Kit"
rightLinks={<HeaderLinks />}
fixed
changeColorOnScroll={{
height: 200,
color: "white",
}}
{...rest}
/>
<Parallax small filter image="/img/profile-bg.jpg" />
<div className={classNames(classes.main, classes.mainRaised)}>
<div>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={6}>
<div className={classes.profile}>
<div>
<img
src="/img/faces/christian.jpg"
alt="..."
className={imageClasses}
/>
</div>
<div className={classes.name}>
<h3 className={classes.title}>Christian Louboutin</h3>
<h6>DESIGNER</h6>
<Button justIcon link className={classes.margin5}>
<i className={"fab fa-twitter"} />
</Button>
<Button justIcon link className={classes.margin5}>
<i className={"fab fa-instagram"} />
</Button>
<Button justIcon link className={classes.margin5}>
<i className={"fab fa-facebook"} />
</Button>
</div>
</div>
</GridItem>
</GridContainer>
<div className={classes.description}>
<p>
An artist of considerable range, Chet Faker — the name taken by
Melbourne-raised, Brooklyn-based Nick Murphy — writes, performs
and records all of his own music, giving it a warm, intimate
feel with a solid groove structure.{" "}
</p>
</div>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={8} className={classes.navWrapper}>
<NavPills
alignCenter
color="primary"
tabs={[
{
tabButton: "Studio",
tabIcon: Camera,
tabContent: (
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
src="/img/examples/studio-1.jpg"
className={navImageClasses}
/>
<img
alt="..."
src="/img/examples/studio-2.jpg"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
src="/img/examples/studio-5.jpg"
className={navImageClasses}
/>
<img
alt="..."
src="/img/examples/studio-4.jpg"
className={navImageClasses}
/>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Work",
tabIcon: Palette,
tabContent: (
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
src="/img/examples/olu-eletu.jpg"
className={navImageClasses}
/>
<img
alt="..."
src="/img/examples/clem-onojeghuo.jpg"
className={navImageClasses}
/>
<img
alt="..."
src="/img/examples/cynthia-del-rio.jpg"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
src="/img/examples/mariya-georgieva.jpg"
className={navImageClasses}
/>
<img
alt="..."
src="/img/examples/clem-onojegaw.jpg"
className={navImageClasses}
/>
</GridItem>
</GridContainer>
),
},
{
tabButton: "Favorite",
tabIcon: Favorite,
tabContent: (
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
src="/img/examples/mariya-georgieva.jpg"
className={navImageClasses}
/>
<img
alt="..."
src="/img/examples/studio-3.jpg"
className={navImageClasses}
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<img
alt="..."
src="/img/examples/clem-onojeghuo.jpg"
className={navImageClasses}
/>
<img
alt="..."
src="/img/examples/olu-eletu.jpg"
className={navImageClasses}
/>
<img
alt="..."
src="/img/examples/studio-1.jpg"
className={navImageClasses}
/>
</GridItem>
</GridContainer>
),
},
]}
/>
</GridItem>
</GridContainer>
</div>
</div>
</div>
<Footer />
</div>
);
}