File: //matrixSwot/frontend/src/views/Components/Panels.js
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import Dashboard from "@material-ui/icons/Dashboard";
import Schedule from "@material-ui/icons/Schedule";
import Info from "@material-ui/icons/Info";
import LocationOn from "@material-ui/icons/LocationOn";
import Gavel from "@material-ui/icons/Gavel";
import HelpOutline from "@material-ui/icons/HelpOutline";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Accordion from "components/Accordion/Accordion.js";
import Card from "components/Card/Card.js";
import CardHeader from "components/Card/CardHeader.js";
import CardBody from "components/Card/CardBody.js";
import { cardTitle } from "assets/jss/material-dashboard-pro-react.js";
const styles = {
cardTitle,
pageSubcategoriesTitle: {
color: "#3C4858",
textDecoration: "none",
textAlign: "center"
},
cardCategory: {
margin: "0",
color: "#999999"
}
};
const useStyles = makeStyles(styles);
export default function Panels() {
const classes = useStyles();
return (
<div>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardHeader>
<h4 className={classes.cardTitle}>
Navigation Pills <small> - Horizontal Tabs</small>
</h4>
</CardHeader>
<CardBody>
<NavPills
color="warning"
tabs={[
{
tabButton: "Profile",
tabContent: (
<span>
<p>
Collaboratively administrate empowered markets via
plug-and-play networks. Dynamically procrastinate B2C
users after installed base benefits.
</p>
<br />
<p>
Dramatically visualize customer directed convergence
without revolutionary ROI. Collaboratively
administrate empowered markets via plug-and-play
networks. Dynamically procrastinate B2C users after
installed base benefits.
</p>
<br />
<p>This is very nice.</p>
</span>
)
},
{
tabButton: "Settings",
tabContent: (
<span>
<p>
Efficiently unleash cross-media information without
cross-media value. Quickly maximize timely
deliverables for real-time schemas.
</p>
<br />
<p>
Dramatically maintain clicks-and-mortar solutions
without functional solutions.
</p>
</span>
)
},
{
tabButton: "Options",
tabContent: (
<span>
<p>
Completely synergize resource taxing relationships via
premier niche markets. Professionally cultivate
one-to-one customer service with robust ideas.{" "}
</p>
<br />
<p>
Dynamically innovate resource-leveling customer
service for state of the art customer service.
</p>
</span>
)
}
]}
/>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardHeader>
<h4 className={classes.cardTitle}>
Navigation Pills <small> - Vertical Tabs</small>
</h4>
</CardHeader>
<CardBody>
<NavPills
color="rose"
horizontal={{
tabsGrid: { xs: 12, sm: 12, md: 4 },
contentGrid: { xs: 12, sm: 12, md: 8 }
}}
tabs={[
{
tabButton: "Profile",
tabContent: (
<span>
<p>
Collaboratively administrate empowered markets via
plug-and-play networks. Dynamically procrastinate B2C
users after installed base benefits.
</p>
<br />
<p>
Dramatically visualize customer directed convergence
without revolutionary ROI. Collaboratively
administrate empowered markets via plug-and-play
networks. Dynamically procrastinate B2C users after
installed base benefits.
</p>
<br />
<p>This is very nice.</p>
</span>
)
},
{
tabButton: "Settings",
tabContent: (
<span>
<p>
Efficiently unleash cross-media information without
cross-media value. Quickly maximize timely
deliverables for real-time schemas.
</p>
<br />
<p>
Dramatically maintain clicks-and-mortar solutions
without functional solutions.
</p>
</span>
)
},
{
tabButton: "Options",
tabContent: (
<span>
<p>
Completely synergize resource taxing relationships via
premier niche markets. Professionally cultivate
one-to-one customer service with robust ideas.{" "}
</p>
<br />
<p>
Dynamically innovate resource-leveling customer
service for state of the art customer service.
</p>
</span>
)
}
]}
/>
</CardBody>
</Card>
</GridItem>
</GridContainer>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardHeader>
<h4 className={classes.cardTitle}>Collapsible Accordion</h4>
</CardHeader>
<CardBody>
<Accordion
active={0}
collapses={[
{
title: "Collapsible group Item #1",
content:
"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
},
{
title: "Collapsible group Item #2",
content:
"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
},
{
title: "Collapsible group Item #3",
content:
"Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS."
}
]}
/>
</CardBody>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Card>
<CardHeader>
<h4 className={classes.cardTitle}>
Navigation Pills Icons <small> - Vertical Tabs</small>
</h4>
</CardHeader>
<CardBody>
<NavPills
color="rose"
horizontal={{
tabsGrid: { xs: 12, sm: 12, md: 4 },
contentGrid: { xs: 12, sm: 12, md: 8 }
}}
tabs={[
{
tabButton: "Dashboard",
tabIcon: Dashboard,
tabContent: (
<span>
<p>
Collaboratively administrate empowered markets via
plug-and-play networks. Dynamically procrastinate B2C
users after installed base benefits.
</p>
<br />
<p>
Dramatically visualize customer directed convergence
without revolutionary ROI. Collaboratively
administrate empowered markets via plug-and-play
networks. Dynamically procrastinate B2C users after
installed base benefits.
</p>
<br />
<p>
Dramatically visualize customer directed convergence
without revolutionary ROI. Collaboratively
administrate empowered markets via plug-and-play
networks. Dynamically procrastinate B2C users after
installed base benefits.
</p>
</span>
)
},
{
tabButton: "Schedule",
tabIcon: Schedule,
tabContent: (
<span>
<p>
Efficiently unleash cross-media information without
cross-media value. Quickly maximize timely
deliverables for real-time schemas.
</p>
<br />
<p>
Dramatically maintain clicks-and-mortar solutions
without functional solutions. Dramatically visualize
customer directed convergence without revolutionary
ROI. Collaboratively administrate empowered markets
via plug-and-play networks. Dynamically procrastinate
B2C users after installed base benefits.
</p>
</span>
)
}
]}
/>
</CardBody>
</Card>
</GridItem>
</GridContainer>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={8}>
<h3 className={classes.pageSubcategoriesTitle}>Page Subcategories</h3>
<br />
<NavPills
color="warning"
alignCenter
tabs={[
{
tabButton: "Description",
tabIcon: Info,
tabContent: (
<Card>
<CardHeader>
<h4 className={classes.cardTitle}>
Description about product
</h4>
<p className={classes.cardCategory}>
More information here
</p>
</CardHeader>
<CardBody>
Collaboratively administrate empowered markets via
plug-and-play networks. Dynamically procrastinate B2C
users after installed base benefits.
<br />
<br />
Dramatically visualize customer directed convergence
without revolutionary ROI.
</CardBody>
</Card>
)
},
{
tabButton: "Location",
tabIcon: LocationOn,
tabContent: (
<Card>
<CardHeader>
<h4 className={classes.cardTitle}>
Location of the product
</h4>
<p className={classes.cardCategory}>
More information here
</p>
</CardHeader>
<CardBody>
Efficiently unleash cross-media information without
cross-media value. Quickly maximize timely deliverables
for real-time schemas.
<br />
<br />
Dramatically maintain clicks-and-mortar solutions without
functional solutions.
</CardBody>
</Card>
)
},
{
tabButton: "Legal Info",
tabIcon: Gavel,
tabContent: (
<Card>
<CardHeader>
<h4 className={classes.cardTitle}>
Legal info of the product
</h4>
<p className={classes.cardCategory}>
More information here
</p>
</CardHeader>
<CardBody>
Completely synergize resource taxing relationships via
premier niche markets. Professionally cultivate one-to-one
customer service with robust ideas.
<br />
<br />
Dynamically innovate resource-leveling customer service
for state of the art customer service.
</CardBody>
</Card>
)
},
{
tabButton: "Help Center",
tabIcon: HelpOutline,
tabContent: (
<Card>
<CardHeader>
<h4 className={classes.cardTitle}>Help center</h4>
<p className={classes.cardCategory}>
More information here
</p>
</CardHeader>
<CardBody>
From the seamless transition of glass and metal to the
streamlined profile, every detail was carefully considered
to enhance your experience. So while its display is
larger, the phone feels just right.
<br />
<br />
Another Text. The first thing you notice when you hold the
phone is how great it feels in your hand. The cover glass
curves down around the sides to meet the anodized aluminum
enclosure in a remarkable, simplified design.
</CardBody>
</Card>
)
}
]}
/>
</GridItem>
</GridContainer>
</div>
);
}