yusmar
/
tbg-ecomm-nextjs
1
0
Форкнуть 0
Код Задачи 0 Pull Request'ы 0 Релизы 0 Вики Активность
Просмотр исходного кода

add api

master
Yusmardianto 4 лет назад
Родитель
657abc4c68
Сommit
15a4297b56
46 измененных файлов: 743 добавлений и 2780 удалений
Единый вид
Опции Diff
Показать статистику Скачать Patch файл Скачать Diff файл
  1. +2
    -0
      .env-sample
  2. +0
    -20
      api/home.js
  3. +23
    -0
      api/home/businessPartner.js
  4. +22
    -0
      api/home/carousel.js
  5. +23
    -0
      api/home/service.js
  6. +24
    -0
      api/latest_news/news.js
  7. +23
    -0
      api/product/product.js
  8. +2
    -0
      lib/apollo.js
  9. +5
    -4
      package.json
  10. +0
    -613
      pages-sections/Components-Sections/SectionBasics.js
  11. +0
    -46
      pages-sections/Components-Sections/SectionChart.js
  12. +0
    -33
      pages-sections/Components-Sections/SectionCompletedExamples.js
  13. +0
    -250
      pages-sections/Components-Sections/SectionContent.js
  14. +0
    -95
      pages-sections/Components-Sections/SectionDownload.js
  15. +0
    -70
      pages-sections/Components-Sections/SectionExamples.js
  16. +0
    -288
      pages-sections/Components-Sections/SectionJavascript.js
  17. +0
    -436
      pages-sections/Components-Sections/SectionNavbars.js
  18. +0
    -71
      pages-sections/Components-Sections/SectionNotifications.js
  19. +0
    -188
      pages-sections/Components-Sections/SectionPills.js
  20. +0
    -145
      pages-sections/Components-Sections/SectionTabs.js
  21. +0
    -202
      pages-sections/Components-Sections/SectionTypography.js
  22. +0
    -67
      pages-sections/LandingPage-Sections/ProductSection.js
  23. +0
    -163
      pages-sections/LandingPage-Sections/TeamSection.js
  24. +0
    -71
      pages-sections/LandingPage-Sections/WorkSection.js
  25. +0
    -0
      pages-sections/SectionAboutUs.js
  26. +0
    -0
      pages-sections/SectionCarousel.js
  27. +0
    -0
      pages-sections/SectionCarrer.js
  28. +0
    -0
      pages-sections/SectionLogin.js
  29. +3
    -1
      pages-sections/SectionProduct.js
  30. +0
    -0
      pages-sections/SectionProductDetail.js
  31. +0
    -0
      pages-sections/SectionService.js
  32. +0
    -0
      pages-sections/SectionSimulasiCicilan.js
  33. +0
    -0
      pages-sections/SectionTestDrive.js
  34. +270
    -0
      pages-sections/home/SectionContent.js
  35. +54
    -0
      pages-sections/home/business_partner.js
  36. +53
    -0
      pages-sections/home/carousel.js
  37. +45
    -0
      pages-sections/home/service.js
  38. +4
    -2
      pages-sections/latest_news/SectionLatestNews.js
  39. +77
    -0
      pages-sections/latest_news/news.js
  40. +31
    -0
      pages-sections/snackbar.js
  41. +1
    -1
      pages/aboutus.js
  42. +1
    -1
      pages/carrer.js
  43. +40
    -8
      pages/components.js
  44. +23
    -3
      pages/latestnews.js
  45. +16
    -1
      pages/product.js
  46. +1
    -1
      yarn.lock

+ 2
- 0
.env-sample Просмотреть файл

@@ -0,0 +1,2 @@
API_URL=http://127.0.0.1:1337
graphql_uri=http://127.0.0.1:1337/graphql

+ 0
- 20
api/home.js Просмотреть файл

@@ -1,20 +0,0 @@
import apollo from "../lib/apollo.js";

async function GET(token="") {
var res = await apollo.query(
`
query{
businessPartners
{
name
}
}
`,
token
);
return res;
}

module.exports = {
GET: GET,
};

+ 23
- 0
api/home/businessPartner.js Просмотреть файл

@@ -0,0 +1,23 @@
import apollo from "../../lib/apollo.js";

async function GetbusinessPartners(token = "") {
var res = await apollo.query(
`
query{
businessPartners
{
name
img{
url
}
}
}
`,
token
);
return res;
}

module.exports = {
GetbusinessPartners: GetbusinessPartners,
};

+ 22
- 0
api/home/carousel.js Просмотреть файл

@@ -0,0 +1,22 @@
import apollo from "../../lib/apollo.js";

async function GetCarousels(token="") {
var res = await apollo.query(
`
query{
carousels
{
img{
url
}
}
}
`,
token
);
return res;
}

module.exports = {
GetCarousels: GetCarousels,
};

+ 23
- 0
api/home/service.js Просмотреть файл

@@ -0,0 +1,23 @@
import apollo from "../../lib/apollo.js";

async function Getservices(token="") {
var res = await apollo.query(
`
query{
services
{
name
img{
url
}
}
}
`,
token
);
return res;
}

module.exports = {
Getservices: Getservices,
};

+ 24
- 0
api/latest_news/news.js Просмотреть файл

@@ -0,0 +1,24 @@
import apollo from "../../lib/apollo.js";

async function GetNews(token="") {
var res = await apollo.query(
`
query{
latestNews
{
title
description
img{
url
}
}
}
`,
token
);
return res;
}

module.exports = {
GetNews: GetNews,
};

+ 23
- 0
api/product/product.js Просмотреть файл

@@ -0,0 +1,23 @@
import apollo from "../../lib/apollo.js";

async function GetProduct(token="") {
var res = await apollo.query(
`
query{
products
{
name
description
img{
id
}
}
} `,
token
);
return res;
}

module.exports = {
GetProduct: GetProduct,
};

+ 2
- 0
lib/apollo.js Просмотреть файл

@@ -7,10 +7,12 @@ import {
} from "@apollo/client"; } from "@apollo/client";
import { createUploadLink } from "apollo-upload-client"; import { createUploadLink } from "apollo-upload-client";
import ApolloConfig from "../config/apollo-config"; import ApolloConfig from "../config/apollo-config";
import fetch from "cross-fetch";


function initApollo(token) { function initApollo(token) {
const httpLink = createUploadLink({ const httpLink = createUploadLink({
uri: ApolloConfig.graphql_uri, uri: ApolloConfig.graphql_uri,
fetch: fetch,
headers: headers:
token != "" token != ""
? { ? {


+ 5
- 4
package.json Просмотреть файл

@@ -5,7 +5,7 @@
"main": "index.js", "main": "index.js",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1", "test": "echo \"Error: no test specified\" && exit 1",
"dev": "next",
"dev": "next dev",
"build": "next build", "build": "next build",
"start": "next start", "start": "next start",
"install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm run dev" "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm run dev"
@@ -37,8 +37,11 @@
"@material-ui/icons": "4.9.1", "@material-ui/icons": "4.9.1",
"@zeit/next-sass": "1.0.1", "@zeit/next-sass": "1.0.1",
"apollo": "^2.32.1", "apollo": "^2.32.1",
"apollo-upload-client": "^14.1.3",
"classnames": "2.2.6", "classnames": "2.2.6",
"cross-fetch": "^3.0.6",
"dotenv": "^8.2.0", "dotenv": "^8.2.0",
"graphql": "^15.3.0",
"mdbreact": "^5.0.1", "mdbreact": "^5.0.1",
"moment": "2.25.3", "moment": "2.25.3",
"next": "9.3.6", "next": "9.3.6",
@@ -56,8 +59,6 @@
"react-swipeable-views": "0.13.9", "react-swipeable-views": "0.13.9",
"rsuite": "^4.8.6", "rsuite": "^4.8.6",
"styled-components": "5.1.0", "styled-components": "5.1.0",
"webpack": "4.43.0",
"apollo-upload-client": "^14.1.3",
"graphql": "^15.3.0"
"webpack": "4.43.0"
} }
} }

+ 0
- 613
pages-sections/Components-Sections/SectionBasics.js Просмотреть файл

@@ -1,613 +0,0 @@
import React from "react";
// plugin that creates slider
import Slider from "nouislider";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import InputAdornment from "@material-ui/core/InputAdornment";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import Radio from "@material-ui/core/Radio";
import Switch from "@material-ui/core/Switch";
// @material-ui/icons
import Favorite from "@material-ui/icons/Favorite";
import People from "@material-ui/icons/People";
import Check from "@material-ui/icons/Check";
import FiberManualRecord from "@material-ui/icons/FiberManualRecord";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import CustomLinearProgress from "components/CustomLinearProgress/CustomLinearProgress.js";
import Paginations from "components/Pagination/Pagination.js";
import Badge from "components/Badge/Badge.js";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/basicsStyle.js";

const useStyles = makeStyles(styles);

export default function SectionBasics() {
const classes = useStyles();
const [checked, setChecked] = React.useState([24, 22]);
const [selectedEnabled, setSelectedEnabled] = React.useState("b");
const [checkedA, setCheckedA] = React.useState(true);
const [checkedB, setCheckedB] = React.useState(false);
React.useEffect(() => {
if (
!document
.getElementById("sliderRegular")
.classList.contains("noUi-target")
) {
Slider.create(document.getElementById("sliderRegular"), {
start: [40],
connect: [true, false],
step: 1,
range: { min: 0, max: 100 }
});
}
if (
!document.getElementById("sliderDouble").classList.contains("noUi-target")
) {
Slider.create(document.getElementById("sliderDouble"), {
start: [20, 60],
connect: [false, true, false],
step: 1,
range: { min: 0, max: 100 }
});
}
return function cleanup() {};
});
const handleToggle = value => {
const currentIndex = checked.indexOf(value);
const newChecked = [...checked];

if (currentIndex === -1) {
newChecked.push(value);
} else {
newChecked.splice(currentIndex, 1);
}
setChecked(newChecked);
};
return (
<div className={classes.sections}>
<div className={classes.container}>
<div className={classes.title}>
<h2>Basic Elements</h2>
</div>
<div id="buttons">
<div className={classes.title}>
<h3>
Buttons
<br />
<small>Pick your style</small>
</h3>
</div>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={8}>
<Button color="primary">Default</Button>
<Button color="primary" round>
round
</Button>
<Button color="primary" round>
<Favorite className={classes.icons} /> with icon
</Button>
<Button justIcon round color="primary">
<Favorite className={classes.icons} />
</Button>
<Button color="primary" simple>
simple
</Button>
</GridItem>
</GridContainer>
<div className={classes.title}>
<h3>
<small>Pick your size</small>
</h3>
</div>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={8}>
<Button color="primary" size="sm">
Small
</Button>
<Button color="primary">Regular</Button>
<Button color="primary" size="lg">
Large
</Button>
</GridItem>
</GridContainer>
<div className={classes.title}>
<h3>
<small>Pick your color</small>
</h3>
</div>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={8}>
<Button>Default</Button>
<Button color="primary">Primary</Button>
<Button color="info">Info</Button>
<Button color="success">Success</Button>
<Button color="warning">Warning</Button>
<Button color="danger">Danger</Button>
<Button color="rose">Rose</Button>
</GridItem>
</GridContainer>
</div>
<div className={classes.space50} />
<div id="inputs">
<div className={classes.title}>
<h3>Inputs</h3>
</div>
<GridContainer>
<GridItem xs={12} sm={4} md={4} lg={3}>
<CustomInput
id="regular"
inputProps={{
placeholder: "Regular"
}}
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={4} md={4} lg={3}>
<CustomInput
labelText="With floating label"
id="float"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={4} md={4} lg={3}>
<CustomInput
labelText="Success input"
id="success"
success
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={4} md={4} lg={3}>
<CustomInput
labelText="Error input"
id="error"
error
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={4} md={4} lg={3}>
<CustomInput
labelText="With material Icons"
id="material"
formControlProps={{
fullWidth: true
}}
inputProps={{
endAdornment: (
<InputAdornment position="end">
<People />
</InputAdornment>
)
}}
/>
</GridItem>
<GridItem xs={12} sm={4} md={4} lg={3}>
<CustomInput
labelText="With Font Awesome Icons"
id="font-awesome"
formControlProps={{
fullWidth: true
}}
inputProps={{
endAdornment: (
<InputAdornment position="end">
<i className="fas fa-users" />
</InputAdornment>
)
}}
/>
</GridItem>
</GridContainer>
</div>
<div className={classes.space70} />
<div id="checkRadios">
<GridContainer>
<GridItem xs={12} sm={6} md={4} lg={3}>
<div className={classes.title}>
<h3>Checkboxes</h3>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(21)}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{ label: classes.label, root: classes.labelRoot }}
label="Unchecked"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Checkbox
tabIndex={-1}
onClick={() => handleToggle(22)}
checked={checked.indexOf(22) !== -1 ? true : false}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{ label: classes.label, root: classes.labelRoot }}
label="Checked"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Checkbox
tabIndex={-1}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
disabled: classes.disabledCheckboxAndRadio,
root: classes.labelRoot
}}
label="Disabled Unchecked"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Checkbox
tabIndex={-1}
checked={checked.indexOf(24) !== -1 ? true : false}
checkedIcon={<Check className={classes.checkedIcon} />}
icon={<Check className={classes.uncheckedIcon} />}
classes={{
checked: classes.checked,
root: classes.checkRoot
}}
/>
}
classes={{
label: classes.label,
disabled: classes.disabledCheckboxAndRadio,
root: classes.labelRoot
}}
label="Disabled Checked"
/>
</div>
</GridItem>
<GridItem xs={12} sm={6} md={4} lg={3}>
<div className={classes.title}>
<h3>Radio Buttons</h3>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Radio
checked={selectedEnabled === "a"}
onChange={() => setSelectedEnabled("a")}
value="a"
name="radio button enabled"
aria-label="A"
icon={
<FiberManualRecord className={classes.radioUnchecked} />
}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="First Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
control={
<Radio
checked={selectedEnabled === "b"}
onChange={() => setSelectedEnabled("b")}
value="b"
name="radio button enabled"
aria-label="B"
icon={
<FiberManualRecord className={classes.radioUnchecked} />
}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Second Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Radio
checked={false}
value="a"
name="radio button disabled"
aria-label="B"
icon={
<FiberManualRecord className={classes.radioUnchecked} />
}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
disabled: classes.disabledCheckboxAndRadio,
root: classes.radioRoot
}}
/>
}
classes={{
label: classes.label,
root: classes.labelRoot
}}
label="Disabled Unchecked Radio"
/>
</div>
<div
className={
classes.checkboxAndRadio +
" " +
classes.checkboxAndRadioHorizontal
}
>
<FormControlLabel
disabled
control={
<Radio
checked={true}
value="b"
name="radio button disabled"
aria-label="B"
icon={
<FiberManualRecord className={classes.radioUnchecked} />
}
checkedIcon={
<FiberManualRecord className={classes.radioChecked} />
}
classes={{
checked: classes.radio,
disabled: classes.disabledCheckboxAndRadio,
root: classes.radioRoot
}}
/>
}
classes={{ label: classes.label, root: classes.labelRoot }}
label="Disabled Checked Radio"
/>
</div>
</GridItem>
<GridItem xs={12} sm={6} md={4} lg={3}>
<div className={classes.title}>
<h3>Toggle Buttons</h3>
</div>
<div>
<FormControlLabel
control={
<Switch
checked={checkedA}
onChange={event => setCheckedA(event.target.checked)}
value="checkedA"
classes={{
switchBase: classes.switchBase,
checked: classes.switchChecked,
thumb: classes.switchIcon,
track: classes.switchBar
}}
/>
}
classes={{
label: classes.label
}}
label="Toggle is on"
/>
</div>
<div>
<FormControlLabel
control={
<Switch
checked={checkedB}
onChange={event => setCheckedB(event.target.checked)}
value="checkedB"
classes={{
switchBase: classes.switchBase,
checked: classes.switchChecked,
thumb: classes.switchIcon,
track: classes.switchBar
}}
/>
}
classes={{
label: classes.label
}}
label="Toggle is off"
/>
</div>
</GridItem>
</GridContainer>
</div>
<div className={classes.space70} />
<div id="progress">
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h3>Progress Bars</h3>
</div>
<CustomLinearProgress
variant="determinate"
color="primary"
value={30}
/>
<CustomLinearProgress
variant="determinate"
color="info"
value={60}
/>
<CustomLinearProgress
variant="determinate"
color="success"
value={100}
style={{ width: "35%", display: "inline-block" }}
/>
<CustomLinearProgress
variant="determinate"
color="warning"
value={100}
style={{ width: "20%", display: "inline-block" }}
/>
<CustomLinearProgress
variant="determinate"
color="danger"
value={25}
style={{ width: "45%", display: "inline-block" }}
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h3>Pagination</h3>
</div>
<Paginations
pages={[
{ text: 1 },
{ text: "..." },
{ text: 5 },
{ text: 6 },
{ active: true, text: 7 },
{ text: 8 },
{ text: 9 },
{ text: "..." },
{ text: 12 }
]}
/>
<Paginations
pages={[
{ text: "PREV" },
{ text: 1 },
{ text: 2 },
{ active: true, text: 3 },
{ text: 4 },
{ text: 5 },
{ text: "NEXT" }
]}
color="info"
/>
</GridItem>
</GridContainer>
</div>
<div id="sliders">
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h3>Sliders</h3>
</div>
<div id="sliderRegular" className="slider-primary" />
<br />
<div id="sliderDouble" className="slider-info" />
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h3>Badges</h3>
</div>
<Badge>default</Badge>
<Badge color="primary">primary</Badge>
<Badge color="info">info</Badge>
<Badge color="success">success</Badge>
<Badge color="warning">warning</Badge>
<Badge color="danger">danger</Badge>
<Badge color="rose">rose</Badge>
</GridItem>
</GridContainer>
</div>
</div>
</div>
);
}

+ 0
- 46
pages-sections/Components-Sections/SectionChart.js Просмотреть файл

@@ -1,46 +0,0 @@
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 Dashboard from "@material-ui/icons/Dashboard";
import LocalGroceryStoreIcon from "@material-ui/icons/LocalGroceryStore";

import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import CardFooter from "components/Card/CardFooter.js";

import styles from "assets/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 (
<Card className={classes.textCenter}>
<div align="center">
<CardHeader color="info">Home</CardHeader>
</div>
<CardBody>
<div align="center">
<h2>Dashboard</h2>
</div>
</CardBody>
<CardFooter className={classes.textMuted} textAlign="center">
© 2020 , All Right Reserved by @Thamrin Brother Company
</CardFooter>
</Card>
);
}

+ 0
- 33
pages-sections/Components-Sections/SectionCompletedExamples.js Просмотреть файл

@@ -1,33 +0,0 @@
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons

// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/completedStyle.js";

const useStyles = makeStyles(styles);

export default function SectionCompletedExamples() {
const classes = useStyles();
return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={8}>
<h2>Completed with examples</h2>
<h4>
The kit comes with three pre-built pages to help you get started
faster. You can change the text and images and you{"'"}re good to
go. More importantly, looking at them will give you a picture of
what you can build with this powerful kit.
</h4>
</GridItem>
</GridContainer>
</div>
</div>
);
}

+ 0
- 250
pages-sections/Components-Sections/SectionContent.js Просмотреть файл

@@ -1,250 +0,0 @@
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// Component
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import Clearfix from "components/Clearfix/Clearfix.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import CardBody from "components/Card/CardBody.js";
import Card from "components/Card/Card.js";
import Button from "components/CustomButtons/Button.js";

// react component for creating beautiful carousel
import Carousel from "react-slick";

// @material-ui/icons
import LocationOn from "@material-ui/icons/LocationOn";

import image1 from "assets/img/bg.jpg";
import image2 from "assets/img/bg2.png";
import image3 from "assets/img/bg3.jpg";
// import "assets/css/hover.css";

// import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/carouselStyle.js";


const useStyles = makeStyles(styles);

function SectionNotifications(props) {
const classes = useStyles();
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false
};
return (
<div className={classes.section} id="notifications">
<SnackbarContent
message={
<span>
<b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini.
</span>
}
align="center"
color="danger"
icon="info_outline"
/>
<Clearfix />
<div className={classes.section}>
<div className={classes.container}>
<GridContainer>
<GridItem className={classes.marginAuto}>
<Card carousel>
<Carousel {...settings}>
<div>
<img src={image1} alt="First slide" className="slick-image" />
</div>
<div>
<img src={image2} alt="Second slide" className="slick-image"/>
</div>
<div>
<img src={image3} alt="Third slide" className="slick-image" />
</div>
</Carousel>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
<div align="center">
<h2>Our Service</h2>
</div>
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<img
style={{height: "180px", width: "100%", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://www.odtap.com/wp-content/uploads/2019/03/delivery.png"
/>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<img
style={{height: "180px", width: "100%", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://i.pinimg.com/736x/fa/22/a1/fa22a1196ecc812fa57366ccf6e1596b.jpg"
alt="Card-img-cap"
/>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<img
style={{height: "180px", width: "100%", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://cdn-ds.com/media/3402/shopper-assurance-logo.png"
alt="Card-img-cap"
/>
</Card>
</Paper>
</Grid>
</GridContainer>
<div align="center">
<h2>Our Business Partner</h2>
</div>
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "300px", display: "block"}}
className={classes.imgCardTop}
src="https://imgx.gridoto.com/crop/31x4:629x377/750x500/photo/2020/06/28/829813812.jpg"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "270px", display: "block"}}
className={classes.imgCardTop}
src="https://i.pinimg.com/originals/64/e7/73/64e773194975e702677c5089fc6c8ae2.png"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "270px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://upload.wikimedia.org/wikipedia/id/d/d5/Honda-logo.png"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "200px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://i.pinimg.com/originals/1e/12/a3/1e12a32f6f4838188f71eeb6d48ccc55.png"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "200px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://3.bp.blogspot.com/-hUQJabKTGCg/WfcN66wVQCI/AAAAAAAAAxU/OW8hrgMH6nA-XyYkg6Pt6fNYmbpzY4noACLcBGAs/s1600/softskill.png"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "300px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="http://bprberkatsejati.com/wp-content/uploads/2019/03/cover1.jpg"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "250px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://d5b1dwptmw1mf.cloudfront.net/uploads/malls/logo/L1_w_dvWvn_1lsCh-palembang-indah-mall-1479113878_1.jpg"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "330px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://lh3.googleusercontent.com/proxy/5AktadKOHE-SrymxW0Ffgw4P_eKgXjNsuSs9mpTHAfYbm5UMfdbT3vefgtxA8NnbJEUdMYdj5kpQolEu5r-938-T9sHM6ApF1M_k1DgloSP0d7kL5Qeoi_-e6lIuwYa2XR8"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "330px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://3.bp.blogspot.com/-NFjgD_eGwy8/Wn70CKGh5QI/AAAAAAAACRg/7fAzLraWggwc5HJU-KVJUrKYAnKQ52VWgCLcBGAs/s1600/Thamrin%2BHomes.png"
/>
</div>
</Card>
</Paper>
</Grid>
</GridContainer>
</div>
);
}

export default SectionNotifications;

+ 0
- 95
pages-sections/Components-Sections/SectionDownload.js Просмотреть файл

@@ -1,95 +0,0 @@
/*eslint-disable*/
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
// core components
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/downloadStyle.js";

const useStyles = makeStyles(styles);

export default function SectionDownload() {
const classes = useStyles();
return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer className={classes.textCenter} justify="center">
<GridItem xs={12} sm={12} md={8}>
<h2>Our Service</h2>
{/* <h4>
Cause if you do, it can be yours for FREE. Hit the buttons below
to navigate to our website where you can find the kit. We also
have the Bootstrap 4 version on plain HTML. Start a new project or
give an old Bootstrap project a new look!
</h4> */}
</GridItem>
<GridItem xs={12} sm={8} md={6}>
<Button
color="primary"
size="lg"
href="https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-download-section"
target="_blank"
>
Service
</Button>
</GridItem>
</GridContainer>
<br />
<br />
{/* <GridContainer className={classes.textCenter} justify="center">
<GridItem xs={12} sm={12} md={8}>
<h2>Want more?</h2>
<h4>
We've just launched{" "}
<a href="#pablo" onClick={e => e.preventDefault()}>
NextJS Material Kit PRO{" "}
</a>
.It has a huge number of components, sections and example pages.
Start Your Development With A Badass Material-UI and NexJS Kit
inspired by Material Design.
</h4>
</GridItem>
<GridItem xs={12} sm={8} md={10}>
<Button
color="rose"
size="lg"
href="https://www.creative-tim.com/product/nextjs-material-kit-pro?ref=njsmk-download-section"
target="_blank"
>
NextJS Material Kit PRO
</Button>
<Button
color="rose"
size="lg"
href="https://www.creative-tim.com/product/material-kit-pro-react?ref=njsmk-download-section"
target="_blank"
>
Material Kit PRO React
</Button>
</GridItem>
</GridContainer>
<div className={classes.textCenter + " " + classes.sharingArea}>
<GridContainer justify="center">
<h3>Thank you for supporting us!</h3>
</GridContainer>
<Button color="twitter">
<i className={classes.socials + " fab fa-twitter"} /> Tweet
</Button>
<Button color="facebook">
<i className={classes.socials + " fab fa-facebook-square"} /> Share
</Button>
<Button color="google">
<i className={classes.socials + " fab fa-google-plus-g"} />
Share
</Button>
<Button color="github">
<i className={classes.socials + " fab fa-github"} /> Star
</Button>
</div> */}
</div>
</div>
);
}

+ 0
- 70
pages-sections/Components-Sections/SectionExamples.js Просмотреть файл

@@ -1,70 +0,0 @@
import React from "react";
// react components for routing our app without refresh
import Link from "next/link";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons

// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";

import landing from "assets/img/landing.jpg";
import profile from "assets/img/profile.jpg";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/exampleStyle.js";

const useStyles = makeStyles(styles);

export default function SectionExamples() {
const classes = useStyles();
return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={6}>
<Link href="/landing">
<a className={classes.link}>
<img
src={landing}
alt="..."
className={
classes.imgRaised +
" " +
classes.imgRounded +
" " +
classes.imgFluid
}
/>
<Button color="primary" size="lg" simple>
View landing page
</Button>
</a>
</Link>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<Link href="/profile">
<a className={classes.link}>
<img
src={profile}
alt="..."
className={
classes.imgRaised +
" " +
classes.imgRounded +
" " +
classes.imgFluid
}
/>
<Button color="primary" size="lg" simple>
View profile page
</Button>
</a>
</Link>
</GridItem>
</GridContainer>
</div>
</div>
);
}

+ 0
- 288
pages-sections/Components-Sections/SectionJavascript.js Просмотреть файл

@@ -1,288 +0,0 @@
import React from "react";
// react plugin for creating date-time-picker
import Datetime from "react-datetime";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import Slide from "@material-ui/core/Slide";
import IconButton from "@material-ui/core/IconButton";
import Dialog from "@material-ui/core/Dialog";
import DialogTitle from "@material-ui/core/DialogTitle";
import DialogContent from "@material-ui/core/DialogContent";
import DialogActions from "@material-ui/core/DialogActions";
import InputLabel from "@material-ui/core/InputLabel";
import FormControl from "@material-ui/core/FormControl";
import Tooltip from "@material-ui/core/Tooltip";
import Popover from "@material-ui/core/Popover";
// @material-ui/icons
import LibraryBooks from "@material-ui/icons/LibraryBooks";
import Close from "@material-ui/icons/Close";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/javascriptStyles.js";

const useStyles = makeStyles(styles);

const Transition = React.forwardRef(function Transition(props, ref) {
return <Slide direction="down" ref={ref} {...props} />;
});

Transition.displayName = "Transition";

export default function SectionJavascript() {
const classes = useStyles();
const [anchorElLeft, setAnchorElLeft] = React.useState(null);
const [anchorElTop, setAnchorElTop] = React.useState(null);
const [anchorElBottom, setAnchorElBottom] = React.useState(null);
const [anchorElRight, setAnchorElRight] = React.useState(null);
const [classicModal, setClassicModal] = React.useState(false);
return (
<div className={classes.section}>
<div className={classes.container}>
<div className={classes.title}>
<h2>Javascript components</h2>
</div>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h3>Modal</h3>
</div>
<GridContainer>
<GridItem xs={12} sm={12} md={6} lg={4}>
<Button
color="primary"
block
onClick={() => setClassicModal(true)}
>
<LibraryBooks className={classes.icon} />
Classic
</Button>
<Dialog
classes={{
root: classes.center,
paper: classes.modal
}}
open={classicModal}
TransitionComponent={Transition}
keepMounted
onClose={() => setClassicModal(false)}
aria-labelledby="classic-modal-slide-title"
aria-describedby="classic-modal-slide-description"
>
<DialogTitle
id="classic-modal-slide-title"
disableTypography
className={classes.modalHeader}
>
<IconButton
className={classes.modalCloseButton}
key="close"
aria-label="Close"
color="inherit"
onClick={() => setClassicModal(false)}
>
<Close className={classes.modalClose} />
</IconButton>
<h4 className={classes.modalTitle}>Modal title</h4>
</DialogTitle>
<DialogContent
id="classic-modal-slide-description"
className={classes.modalBody}
>
<p>
Far far away, behind the word mountains, far from the
countries Vokalia and Consonantia, there live the blind
texts. Separated they live in Bookmarksgrove right at the
coast of the Semantics, a large language ocean. A small
river named Duden flows by their place and supplies it
with the necessary regelialia. It is a paradisematic
country, in which roasted parts of sentences fly into your
mouth. Even the all-powerful Pointing has no control about
the blind texts it is an almost unorthographic life One
day however a small line of blind text by the name of
Lorem Ipsum decided to leave for the far World of Grammar.
</p>
</DialogContent>
<DialogActions className={classes.modalFooter}>
<Button color="transparent" simple>
Nice Button
</Button>
<Button
onClick={() => setClassicModal(false)}
color="danger"
simple
>
Close
</Button>
</DialogActions>
</Dialog>
</GridItem>
</GridContainer>
<GridItem xs={12} sm={12} md={12}>
<div className={classes.title}>
<h3>Datetime Picker</h3>
</div>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<InputLabel className={classes.label}>
Datetime Picker
</InputLabel>
<br />
<FormControl fullWidth>
<Datetime
inputProps={{ placeholder: "Datetime Picker Here" }}
/>
</FormControl>
</GridItem>
</GridContainer>
</GridItem>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h3>Popovers</h3>
</div>
<Button onClick={event => setAnchorElLeft(event.currentTarget)}>
On left
</Button>
<Popover
classes={{
paper: classes.popover
}}
open={Boolean(anchorElLeft)}
anchorEl={anchorElLeft}
onClose={() => setAnchorElLeft(null)}
anchorOrigin={{
vertical: "center",
horizontal: "left"
}}
transformOrigin={{
vertical: "center",
horizontal: "right"
}}
>
<h3 className={classes.popoverHeader}>Popover on left</h3>
<div className={classes.popoverBody}>
Here will be some very useful information about his popover.
Here will be some very useful information about his popover.
</div>
</Popover>
<Button onClick={event => setAnchorElTop(event.currentTarget)}>
On top
</Button>
<Popover
classes={{
paper: classes.popover
}}
open={Boolean(anchorElTop)}
anchorEl={anchorElTop}
onClose={() => setAnchorElTop(null)}
anchorOrigin={{
vertical: "top",
horizontal: "center"
}}
transformOrigin={{
vertical: "bottom",
horizontal: "center"
}}
>
<h3 className={classes.popoverHeader}>Popover on top</h3>
<div className={classes.popoverBody}>
Here will be some very useful information about his popover.
</div>
</Popover>
<Button onClick={event => setAnchorElBottom(event.currentTarget)}>
On bottom
</Button>
<Popover
classes={{
paper: classes.popover
}}
open={Boolean(anchorElBottom)}
anchorEl={anchorElBottom}
onClose={() => setAnchorElBottom(null)}
anchorOrigin={{
vertical: "bottom",
horizontal: "center"
}}
transformOrigin={{
vertical: "top",
horizontal: "center"
}}
>
<h3 className={classes.popoverHeader}>Popover on bottom</h3>
<div className={classes.popoverBody}>
Here will be some very useful information about his popover.
</div>
</Popover>
<Button onClick={event => setAnchorElRight(event.currentTarget)}>
On right
</Button>
<Popover
classes={{
paper: classes.popover
}}
open={Boolean(anchorElRight)}
anchorEl={anchorElRight}
onClose={() => setAnchorElRight(null)}
anchorOrigin={{
vertical: "center",
horizontal: "right"
}}
transformOrigin={{
vertical: "center",
horizontal: "left"
}}
>
<h3 className={classes.popoverHeader}>Popover on right</h3>
<div className={classes.popoverBody}>
Here will be some very useful information about his popover.
</div>
</Popover>
<br />
<br />
<div className={classes.title}>
<h3>Tooltips</h3>
</div>
<Tooltip
id="tooltip-left"
title="Tooltip on left"
placement="left"
classes={{ tooltip: classes.tooltip }}
>
<Button>On left</Button>
</Tooltip>
<Tooltip
id="tooltip-top"
title="Tooltip on top"
placement="top"
classes={{ tooltip: classes.tooltip }}
>
<Button>On top</Button>
</Tooltip>
<Tooltip
id="tooltip-bottom"
title="Tooltip on bottom"
placement="bottom"
classes={{ tooltip: classes.tooltip }}
>
<Button>On bottom</Button>
</Tooltip>
<Tooltip
id="tooltip-right"
title="Tooltip on right"
placement="right"
classes={{ tooltip: classes.tooltip }}
>
<Button>On right</Button>
</Tooltip>
</GridItem>
</GridContainer>
<div className={classes.title}>
<h3>Carousel</h3>
</div>
</div>
</div>
);
}

+ 0
- 436
pages-sections/Components-Sections/SectionNavbars.js Просмотреть файл

@@ -1,436 +0,0 @@
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Icon from "@material-ui/core/Icon";
// @material-ui/icons
import Search from "@material-ui/icons/Search";
import Email from "@material-ui/icons/Email";
import Face from "@material-ui/icons/Face";
import AccountCircle from "@material-ui/icons/AccountCircle";
import Explore from "@material-ui/icons/Explore";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Header from "components/Header/Header.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
import Button from "components/CustomButtons/Button.js";

import image from "assets/img/bg.jpg";
import profileImage from "assets/img/faces/avatar.jpg";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/navbarsStyle.js";

const useStyles = makeStyles(styles);

export default function SectionNavbars() {
const classes = useStyles();
return (
<div className={classes.section}>
<div className={classes.container}>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h3>Menu</h3>
</div>
<Header
brand="Menu"
color="primary"
leftLinks={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Link
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Link
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<CustomDropdown
navDropdown
buttonText="Dropdown"
dropdownHeader="Dropdown Header"
buttonProps={{
className: classes.navLink,
color: "transparent"
}}
dropdownList={[
"Action",
"Another action",
"Something else here",
{ divider: true },
"Separated link",
{ divider: true },
"One more separated link"
]}
/>
</ListItem>
</List>
}
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<div className={classes.title}>
<h3>Menu with Icons</h3>
</div>
<Header
brand="Icons"
color="info"
rightLinks={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button color="transparent" className={classes.navLink}>
<Email className={classes.icons} />
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button color="transparent" className={classes.navLink}>
<Face className={classes.icons} />
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<CustomDropdown
left
navDropdown
hoverColor="info"
dropdownHeader="Dropdown Header"
buttonIcon="settings"
buttonProps={{
className: classes.navLink,
color: "transparent"
}}
dropdownList={[
"Action",
"Another action",
"Something else here",
{ divider: true },
"Separated link",
{ divider: true },
"One more separated link"
]}
/>
</ListItem>
</List>
}
/>
</GridItem>
</GridContainer>
<div className={classes.title}>
<h3>Navigation</h3>
</div>
</div>
<div id="navbar" className={classes.navbar}>
<div
className={classes.navigation}
style={{ backgroundImage: "url(" + image + ")" }}
>
<Header
brand="Brand"
color="rose"
leftLinks={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Link
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Link
</Button>
</ListItem>
</List>
}
rightLinks={
<div>
<CustomInput
white
inputRootCustomClasses={classes.inputRootCustomClasses}
formControlProps={{
className: classes.formControl
}}
inputProps={{
placeholder: "Search",
inputProps: {
"aria-label": "Search",
className: classes.searchInput
}
}}
/>
<Button justIcon round color="white">
<Search className={classes.searchIcon} />
</Button>
</div>
}
/>
<Header
brand="Info Color"
color="info"
rightLinks={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink + " " + classes.navLinkActive}
onClick={e => e.preventDefault()}
color="transparent"
>
Discover
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Profile
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Settings
</Button>
</ListItem>
</List>
}
/>
<Header
brand="Primary Color"
color="primary"
rightLinks={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink + " " + classes.navLinkActive}
onClick={e => e.preventDefault()}
color="transparent"
>
<Explore className={classes.icons} /> Discover
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
<AccountCircle className={classes.icons} /> Profile
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
<Icon className={classes.icons}>settings</Icon> Settings
</Button>
</ListItem>
</List>
}
/>
<Header
brand="Navbar with notifications"
color="dark"
rightLinks={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Discover
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Wishlist
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
justIcon
round
href="#pablo"
className={classes.notificationNavLink}
onClick={e => e.preventDefault()}
color="rose"
>
<Email className={classes.icons} />
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<CustomDropdown
left
caret={false}
hoverColor="black"
dropdownHeader="Dropdown Header"
buttonText={
<img
src={profileImage}
className={classes.img}
alt="profile"
/>
}
buttonProps={{
className:
classes.navLink + " " + classes.imageDropdownButton,
color: "transparent"
}}
dropdownList={[
"Me",
"Settings and other stuff",
"Sign out"
]}
/>
</ListItem>
</List>
}
/>
<Header
brand="Navbar with profile"
rightLinks={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Discover
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Wishlist
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.registerNavLink}
onClick={e => e.preventDefault()}
color="rose"
round
>
Register
</Button>
</ListItem>
</List>
}
/>
<Header
brand="Transparent"
color="transparent"
rightLinks={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={
classes.navLink + " " + classes.socialIconsButton
}
>
<i
className={
classes.socialIcons +
" " +
classes.marginRight5 +
" fab fa-twitter"
}
/>{" "}
Twitter
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={
classes.navLink + " " + classes.socialIconsButton
}
>
<i
className={
classes.socialIcons +
" " +
classes.marginRight5 +
" fab fa-facebook"
}
/>{" "}
Facebook
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={
classes.navLink + " " + classes.socialIconsButton
}
>
<i
className={
classes.socialIcons +
" " +
classes.marginRight5 +
" fab fa-instagram"
}
/>{" "}
Instagram
</Button>
</ListItem>
</List>
}
/>
</div>
</div>
</div>
);
}

+ 0
- 71
pages-sections/Components-Sections/SectionNotifications.js Просмотреть файл

@@ -1,71 +0,0 @@
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import Check from "@material-ui/icons/Check";
import Warning from "@material-ui/icons/Warning";
// core components
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import Clearfix from "components/Clearfix/Clearfix.js";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);

export default function SectionNotifications() {
const classes = useStyles();
return (
<div className={classes.section} id="notifications">
<div className={classes.container}>
<div className={classes.title}>
<h3>Notifications</h3>
</div>
</div>
<SnackbarContent
message={
<span>
<b>INFO ALERT:</b> You{"'"}ve got some friends nearby, stop looking
at your phone and find them...
</span>
}
close
color="info"
icon="info_outline"
/>
<SnackbarContent
message={
<span>
<b>SUCCESS ALERT:</b> You{"'"}ve got some friends nearby, stop
looking at your phone and find them...
</span>
}
close
color="success"
icon={Check}
/>
<SnackbarContent
message={
<span>
<b>WARNING ALERT:</b> You{"'"}ve got some friends nearby, stop
looking at your phone and find them...
</span>
}
close
color="warning"
icon={Warning}
/>
<SnackbarContent
message={
<span>
<b>DANGER ALERT:</b> You{"'"}ve got some friends nearby, stop
looking at your phone and find them...
</span>
}
close
color="danger"
icon="info_outline"
/>
<Clearfix />
</div>
);
}

+ 0
- 188
pages-sections/Components-Sections/SectionPills.js Просмотреть файл

@@ -1,188 +0,0 @@
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 List from "@material-ui/icons/List";

// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import NavPills from "components/NavPills/NavPills.js";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/pillsStyle.js";

const useStyles = makeStyles(styles);

export default function SectionPills() {
const classes = useStyles();
return (
<div className={classes.section}>
<div className={classes.container}>
<div id="navigation-pills">
<div className={classes.title}>
<h3>Navigation Pills</h3>
</div>
<div className={classes.title}>
<h3>
<small>With Icons</small>
</h3>
</div>
<GridContainer>
<GridItem xs={12} sm={12} md={8} lg={6}>
<NavPills
color="primary"
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>
)
},
{
tabButton: "Tasks",
tabIcon: List,
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>
)
}
]}
/>
</GridItem>
<GridItem xs={12} sm={12} md={12} lg={6}>
<NavPills
color="rose"
horizontal={{
tabsGrid: { xs: 12, sm: 4, md: 4 },
contentGrid: { xs: 12, sm: 8, 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>
)
}
]}
/>
</GridItem>
</GridContainer>
</div>
</div>
</div>
);
}

+ 0
- 145
pages-sections/Components-Sections/SectionTabs.js Просмотреть файл

@@ -1,145 +0,0 @@
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Face from "@material-ui/icons/Face";
import Chat from "@material-ui/icons/Chat";
import Build from "@material-ui/icons/Build";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import CustomTabs from "components/CustomTabs/CustomTabs.js";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/tabsStyle.js";

const useStyles = makeStyles(styles);

export default function SectionTabs() {
const classes = useStyles();
return (
<div className={classes.section}>
<div className={classes.container}>
<div id="nav-tabs">
<h3>Navigation Tabs</h3>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<h3>
<small>Tabs with Icons on Card</small>
</h3>
<CustomTabs
headerColor="primary"
tabs={[
{
tabName: "Profile",
tabIcon: Face,
tabContent: (
<p className={classes.textCenter}>
I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. So when you get something that has
the name Kanye West on it, it’s supposed to be pushing
the furthest possibilities. I will be the leader of a
company that ends up being worth billions of dollars,
because I got the answers. I understand culture. I am
the nucleus.
</p>
)
},
{
tabName: "Messages",
tabIcon: Chat,
tabContent: (
<p className={classes.textCenter}>
I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. I will be the leader of a company
that ends up being worth billions of dollars, because I
got the answers. I understand culture. I am the nucleus.
I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at.
</p>
)
},
{
tabName: "Settings",
tabIcon: Build,
tabContent: (
<p className={classes.textCenter}>
think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. So when you get something that has
the name Kanye West on it, it’s supposed to be pushing
the furthest possibilities. I will be the leader of a
company that ends up being worth billions of dollars,
because I got the answers. I understand culture. I am
the nucleus.
</p>
)
}
]}
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<h3>
<small>Tabs on Plain Card</small>
</h3>
<CustomTabs
plainTabs
headerColor="danger"
tabs={[
{
tabName: "Home",
tabContent: (
<p className={classes.textCenter}>
I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. So when you get something that has
the name Kanye West on it, it’s supposed to be pushing
the furthest possibilities. I will be the leader of a
company that ends up being worth billions of dollars,
because I got the answers. I understand culture. I am
the nucleus.
</p>
)
},
{
tabName: "Updates",
tabContent: (
<p className={classes.textCenter}>
I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. I will be the leader of a company
that ends up being worth billions of dollars, because I
got the answers. I understand culture. I am the nucleus.
I think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at.
</p>
)
},
{
tabName: "History",
tabContent: (
<p className={classes.textCenter}>
think that’s a responsibility that I have, to push
possibilities, to show people, this is the level that
things could be at. So when you get something that has
the name Kanye West on it, it’s supposed to be pushing
the furthest possibilities. I will be the leader of a
company that ends up being worth billions of dollars,
because I got the answers. I understand culture. I am
the nucleus.
</p>
)
}
]}
/>
</GridItem>
</GridContainer>
</div>
</div>
</div>
);
}

+ 0
- 202
pages-sections/Components-Sections/SectionTypography.js Просмотреть файл

@@ -1,202 +0,0 @@
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons

// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Small from "components/Typography/Small.js";
import Danger from "components/Typography/Danger.js";
import Warning from "components/Typography/Warning.js";
import Success from "components/Typography/Success.js";
import Info from "components/Typography/Info.js";
import Primary from "components/Typography/Primary.js";
import Muted from "components/Typography/Muted.js";
import Quote from "components/Typography/Quote.js";

import image from "assets/img/faces/avatar.jpg";

import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/typographyStyle.js";

const useStyles = makeStyles(styles);

export default function SectionTypography() {
const classes = useStyles();
return (
<div className={classes.section}>
<div className={classes.container}>
<div id="typography">
<div className={classes.title}>
<h2>Typography</h2>
</div>
<GridContainer>
<div className={classes.typo}>
<div className={classes.note}>Header 1</div>
<h1>The Life of Material Kit</h1>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 2</div>
<h2>The Life of Material Kit</h2>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 3</div>
<h3>The Life of Material Kit</h3>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 4</div>
<h4>The Life of Material Kit</h4>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 5</div>
<h5>The Life of Material Kit</h5>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 6</div>
<h6>The Life of Material Kit</h6>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 1</div>
<h1 className={classes.title}>The Life of Material Kit</h1>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 2</div>
<h2 className={classes.title}>The Life of Material Kit</h2>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 3</div>
<h3 className={classes.title}>The Life of Material Kit</h3>
</div>
<div className={classes.typo}>
<div className={classes.note}>Header 4</div>
<h4 className={classes.title}>The Life of Material Kit</h4>
</div>
<div className={classes.typo}>
<div className={classes.note}>Paragraph</div>
<p>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers. I understand
culture. I am the nucleus. I think that’s a responsibility that
I have, to push possibilities, to show people, this is the level
that things could be at.
</p>
</div>
<div className={classes.typo}>
<div className={classes.note}>Quote</div>
<Quote
text="I will be the leader of a company that ends up being worth billions of dollars, because I got the answers. I understand culture. I am the nucleus. I think that’s a responsibility that I have, to push possibilities, to show people, this is the level that things could be at."
author=" Kanye West, Musician"
/>
</div>
<div className={classes.typo}>
<div className={classes.note}>Muted Text</div>
<Muted>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Muted>
</div>
<div className={classes.typo}>
<div className={classes.note}>Primary Text</div>
<Primary>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Primary>
</div>
<div className={classes.typo}>
<div className={classes.note}>Info Text</div>
<Info>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Info>
</div>
<div className={classes.typo}>
<div className={classes.note}>Success Text</div>
<Success>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Success>
</div>
<div className={classes.typo}>
<div className={classes.note}>Warning Text</div>
<Warning>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Warning>
</div>
<div className={classes.typo}>
<div className={classes.note}>Danger Text</div>
<Danger>
I will be the leader of a company that ends up being worth
billions of dollars, because I got the answers...
</Danger>
</div>
<div className={classes.typo}>
<div className={classes.note}>Small Tag</div>
<h2>
Header with small subtitle
<br />
<Small>Use {'"Small"'} tag for the headers</Small>
</h2>
</div>
</GridContainer>
</div>
<div className={classes.space50} />
<div id="images">
<div className={classes.title}>
<h2>Images</h2>
</div>
<br />
<GridContainer>
<GridItem xs={12} sm={2}>
<h4>Rounded Image</h4>
<img
src={image}
alt="..."
className={classes.imgRounded + " " + classes.imgFluid}
/>
</GridItem>
<GridItem xs={12} sm={2} className={classes.marginLeft}>
<h4>Circle Image</h4>
<img
src={image}
alt="..."
className={classes.imgRoundedCircle + " " + classes.imgFluid}
/>
</GridItem>
<GridItem xs={12} sm={2} className={classes.marginLeft}>
<h4>Rounded Raised</h4>
<img
src={image}
alt="..."
className={
classes.imgRaised +
" " +
classes.imgRounded +
" " +
classes.imgFluid
}
/>
</GridItem>
<GridItem xs={12} sm={2} className={classes.marginLeft}>
<h4>Circle Raised</h4>
<img
src={image}
alt="..."
className={
classes.imgRaised +
" " +
classes.imgRoundedCircle +
" " +
classes.imgFluid
}
/>
</GridItem>
</GridContainer>
<GridContainer />
</div>
<div className={classes.space50} />
</div>
</div>
);
}

+ 0
- 67
pages-sections/LandingPage-Sections/ProductSection.js Просмотреть файл

@@ -1,67 +0,0 @@
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons
import Chat from "@material-ui/icons/Chat";
import VerifiedUser from "@material-ui/icons/VerifiedUser";
import Fingerprint from "@material-ui/icons/Fingerprint";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import InfoArea from "components/InfoArea/InfoArea.js";

import styles from "assets/jss/nextjs-material-kit/pages/landingPageSections/productStyle.js";

const useStyles = makeStyles(styles);

export default function ProductSection() {
const classes = useStyles();
return (
<div className={classes.section}>
<GridContainer justify="center">
<GridItem xs={12} sm={12} md={8}>
<h2 className={classes.title}>Let{"'"}s talk product</h2>
<h5 className={classes.description}>
This is the paragraph where you can write more details about your
product. Keep you user engaged by providing meaningful information.
Remember that by this time, the user is curious, otherwise he wouldn
{"'"}t scroll to get here. Add a button if you want the user to see
more.
</h5>
</GridItem>
</GridContainer>
<div>
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<InfoArea
title="Free Chat"
description="Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough."
icon={Chat}
iconColor="info"
vertical
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<InfoArea
title="Verified Users"
description="Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough."
icon={VerifiedUser}
iconColor="success"
vertical
/>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<InfoArea
title="Fingerprint"
description="Divide details about your product or agency work into parts. Write a few lines about each one. A paragraph describing a feature will be enough."
icon={Fingerprint}
iconColor="danger"
vertical
/>
</GridItem>
</GridContainer>
</div>
</div>
);
}

+ 0
- 163
pages-sections/LandingPage-Sections/TeamSection.js Просмотреть файл

@@ -1,163 +0,0 @@
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

// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardFooter from "components/Card/CardFooter.js";

import styles from "assets/jss/nextjs-material-kit/pages/landingPageSections/teamStyle.js";

import team1 from "assets/img/faces/avatar.jpg";
import team2 from "assets/img/faces/christian.jpg";
import team3 from "assets/img/faces/kendall.jpg";

const useStyles = makeStyles(styles);

export default function TeamSection() {
const classes = useStyles();
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
return (
<div className={classes.section}>
<h2 className={classes.title}>Here is our team</h2>
<div>
<GridContainer>
<GridItem xs={12} sm={12} md={4}>
<Card plain>
<GridItem xs={12} sm={12} md={6} className={classes.itemGrid}>
<img src={team1} alt="..." className={imageClasses} />
</GridItem>
<h4 className={classes.cardTitle}>
Gigi Hadid
<br />
<small className={classes.smallTitle}>Model</small>
</h4>
<CardBody>
<p className={classes.description}>
You can write here details about one of your team members. You
can give more details about what they do. Feel free to add
some <a href="#pablo">links</a> for people to be able to
follow them outside the site.
</p>
</CardBody>
<CardFooter className={classes.justifyCenter}>
<Button
justIcon
color="transparent"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-twitter"} />
</Button>
<Button
justIcon
color="transparent"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-instagram"} />
</Button>
<Button
justIcon
color="transparent"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-facebook"} />
</Button>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card plain>
<GridItem xs={12} sm={12} md={6} className={classes.itemGrid}>
<img src={team2} alt="..." className={imageClasses} />
</GridItem>
<h4 className={classes.cardTitle}>
Christian Louboutin
<br />
<small className={classes.smallTitle}>Designer</small>
</h4>
<CardBody>
<p className={classes.description}>
You can write here details about one of your team members. You
can give more details about what they do. Feel free to add
some <a href="#pablo">links</a> for people to be able to
follow them outside the site.
</p>
</CardBody>
<CardFooter className={classes.justifyCenter}>
<Button
justIcon
color="transparent"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-twitter"} />
</Button>
<Button
justIcon
color="transparent"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-linkedin"} />
</Button>
</CardFooter>
</Card>
</GridItem>
<GridItem xs={12} sm={12} md={4}>
<Card plain>
<GridItem xs={12} sm={12} md={6} className={classes.itemGrid}>
<img src={team3} alt="..." className={imageClasses} />
</GridItem>
<h4 className={classes.cardTitle}>
Kendall Jenner
<br />
<small className={classes.smallTitle}>Model</small>
</h4>
<CardBody>
<p className={classes.description}>
You can write here details about one of your team members. You
can give more details about what they do. Feel free to add
some <a href="#pablo">links</a> for people to be able to
follow them outside the site.
</p>
</CardBody>
<CardFooter className={classes.justifyCenter}>
<Button
justIcon
color="transparent"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-twitter"} />
</Button>
<Button
justIcon
color="transparent"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-instagram"} />
</Button>
<Button
justIcon
color="transparent"
className={classes.margin5}
>
<i className={classes.socials + " fab fa-facebook"} />
</Button>
</CardFooter>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
);
}

+ 0
- 71
pages-sections/LandingPage-Sections/WorkSection.js Просмотреть файл

@@ -1,71 +0,0 @@
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// @material-ui/icons

// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import Button from "components/CustomButtons/Button.js";

import styles from "assets/jss/nextjs-material-kit/pages/landingPageSections/workStyle.js";

const useStyles = makeStyles(styles);

export default function WorkSection() {
const classes = useStyles();
return (
<div className={classes.section}>
<GridContainer justify="center">
<GridItem cs={12} sm={12} md={8}>
<h2 className={classes.title}>Work with us</h2>
<h4 className={classes.description}>
Divide details about your product or agency work into parts. Write a
few lines about each one and contact us about any further
collaboration. We will responde get back to you in a couple of
hours.
</h4>
<form>
<GridContainer>
<GridItem xs={12} sm={12} md={6}>
<CustomInput
labelText="Your Name"
id="name"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<GridItem xs={12} sm={12} md={6}>
<CustomInput
labelText="Your Email"
id="email"
formControlProps={{
fullWidth: true
}}
/>
</GridItem>
<CustomInput
labelText="Your Message"
id="message"
formControlProps={{
fullWidth: true,
className: classes.textArea
}}
inputProps={{
multiline: true,
rows: 5
}}
/>
<GridItem xs={12} sm={12} md={4} className={classes.textCenter}>
<Button color="primary">Send Message</Button>
</GridItem>
</GridContainer>
</form>
</GridItem>
</GridContainer>
</div>
);
}

pages-sections/Components-Sections/SectionAboutUs.js → pages-sections/SectionAboutUs.js Просмотреть файл


pages-sections/Components-Sections/SectionCarousel.js → pages-sections/SectionCarousel.js Просмотреть файл


pages-sections/Components-Sections/SectionCarrer.js → pages-sections/SectionCarrer.js Просмотреть файл


pages-sections/Components-Sections/SectionLogin.js → pages-sections/SectionLogin.js Просмотреть файл


pages-sections/Components-Sections/SectionProduct.js → pages-sections/SectionProduct.js Просмотреть файл

@@ -23,7 +23,7 @@ import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js";


const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);


export default function ProfilePage(props) {
const Product = function ({ product, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props; const { ...rest } = props;
const imageClasses = classNames( const imageClasses = classNames(
@@ -489,3 +489,5 @@ export default function ProfilePage(props) {
</Card> </Card>
); );
} }

export default Product;

pages-sections/Components-Sections/SectionProductDetail.js → pages-sections/SectionProductDetail.js Просмотреть файл


pages-sections/Components-Sections/SectionService.js → pages-sections/SectionService.js Просмотреть файл


pages-sections/Components-Sections/SectionSimulasiCicilan.js → pages-sections/SectionSimulasiCicilan.js Просмотреть файл


pages-sections/Components-Sections/SectionTestDrive.js → pages-sections/SectionTestDrive.js Просмотреть файл


+ 270
- 0
pages-sections/home/SectionContent.js Просмотреть файл

@@ -0,0 +1,270 @@
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// Component
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import Clearfix from "components/Clearfix/Clearfix.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import CardBody from "components/Card/CardBody.js";
import Card from "components/Card/Card.js";
import Button from "components/CustomButtons/Button.js";

// react component for creating beautiful carousel
import Carousel from "react-slick";

// @material-ui/icons
import LocationOn from "@material-ui/icons/LocationOn";

import image1 from "assets/img/bg.jpg";
import image2 from "assets/img/bg2.png";
import image3 from "assets/img/bg3.jpg";
// import "assets/css/hover.css";

// import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/carouselStyle.js";


const useStyles = makeStyles(styles);

const DataSnackbarContent = function() {
const classes = useStyles();
return (
<div className={classes.section} id="notifications">
<SnackbarContent
message={
<span>
<b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini.
</span>
}
align="center"
color="danger"
icon="info_outline"
/>
</div>
);
}

const DataCarousel = function ({ carousel, ...props }) {
const classes = useStyles();
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
time: 5
};
return (
<div className={classes.section} id="notifications">
<div className={classes.section}>
<div className={classes.container}>
<GridContainer>
<GridItem className={classes.marginAuto}>
<Card carousel>
<Carousel {...settings}>
<div>
<img src={image1} alt="First slide" className="slick-image" />
</div>
<div>
<img src={image2} alt="Second slide" className="slick-image"/>
</div>
<div>
<img src={image3} alt="Third slide" className="slick-image" />
</div>
</Carousel>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
</div>
);
}

const DataService = function ({ service, ...props }) {
const classes = useStyles();

const services = service.map((data) => (
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<img
style={{height: "180px", width: "100%", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src={data.img}
/>
</Card>
</Paper>
</Grid>
</GridContainer>
));
return (
<div className={classes.section} id="notifications">
<div align="center">
<h2>Our Service</h2>
</div>
<div>
{services}
</div>
</div>
);
}

const DataBusinessPartner = function ({ businessPartners, ...props }) {
const classes = useStyles();
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
time: 5
};
return (
<div className={classes.section} id="notifications">
<div align="center">
<h2>Our Business Partner</h2>
</div>
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "300px", display: "block"}}
className={classes.imgCardTop}
src="https://imgx.gridoto.com/crop/31x4:629x377/750x500/photo/2020/06/28/829813812.jpg"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "270px", display: "block"}}
className={classes.imgCardTop}
src="https://i.pinimg.com/originals/64/e7/73/64e773194975e702677c5089fc6c8ae2.png"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "270px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://upload.wikimedia.org/wikipedia/id/d/d5/Honda-logo.png"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "200px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://i.pinimg.com/originals/1e/12/a3/1e12a32f6f4838188f71eeb6d48ccc55.png"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "200px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://3.bp.blogspot.com/-hUQJabKTGCg/WfcN66wVQCI/AAAAAAAAAxU/OW8hrgMH6nA-XyYkg6Pt6fNYmbpzY4noACLcBGAs/s1600/softskill.png"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "300px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="http://bprberkatsejati.com/wp-content/uploads/2019/03/cover1.jpg"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "250px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://d5b1dwptmw1mf.cloudfront.net/uploads/malls/logo/L1_w_dvWvn_1lsCh-palembang-indah-mall-1479113878_1.jpg"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "330px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://lh3.googleusercontent.com/proxy/5AktadKOHE-SrymxW0Ffgw4P_eKgXjNsuSs9mpTHAfYbm5UMfdbT3vefgtxA8NnbJEUdMYdj5kpQolEu5r-938-T9sHM6ApF1M_k1DgloSP0d7kL5Qeoi_-e6lIuwYa2XR8"
alt="Card-img-cap"
/>
</div>
</Card>
</Paper>
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
<Paper className={classes.paper}>
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "330px", padding:"20px", display: "block"}}
className={classes.imgCardTop}
src="https://3.bp.blogspot.com/-NFjgD_eGwy8/Wn70CKGh5QI/AAAAAAAACRg/7fAzLraWggwc5HJU-KVJUrKYAnKQ52VWgCLcBGAs/s1600/Thamrin%2BHomes.png"
/>
</div>
</Card>
</Paper>
</Grid>
</GridContainer>
</div>
);
}

module.exports = {
DataSnackbarContent: DataSnackbarContent,
DataCarousel: DataCarousel,
DataService: DataService,
DataBusinessPartner: DataBusinessPartner,
};

+ 54
- 0
pages-sections/home/business_partner.js Просмотреть файл

@@ -0,0 +1,54 @@
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);
const DataBusinessPartner = function ({ backend, businessPartners, ...props }) {
const classes = useStyles();
const BusinessPartners = businessPartners.map((data) => {
return (
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{padding:"20px", height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
</div>
{/* src={`${variablebackenduri}/${data.img[0]["url"]}`} */}
</Card>
);
})
return (
<div className={classes.section} id="notifications">
<div align="center">
<h2>Our Business Partner</h2>
</div>
<div>
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{BusinessPartners[0]}
{BusinessPartners[3]}
{BusinessPartners[6]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{BusinessPartners[1]}
{BusinessPartners[4]}
{BusinessPartners[7]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{BusinessPartners[2]}
{BusinessPartners[5]}
{BusinessPartners[8]}
</Grid>
</GridContainer>
</div>
</div>
);
}

export default DataBusinessPartner;

+ 53
- 0
pages-sections/home/carousel.js Просмотреть файл

@@ -0,0 +1,53 @@
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// Component
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

// react component for creating beautiful carousel
import Carousel from "react-slick";

const useStyles = makeStyles(styles);
const DataCarousel = function ({ backend, carousel, ...props }) {
const classes = useStyles();
const settings = {
dots: true,
infinite: true,
speed: 500,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
time: 5
};
const Carousels = carousel.map((data) => {
return (
<div>
<img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" />
</div>
);
})
return (
<div className={classes.section} id="notifications">
<div className={classes.section}>
<div className={classes.container}>
<GridContainer>
<GridItem className={classes.marginAuto}>
<Card carousel>
<Carousel {...settings}>
{Carousels}
</Carousel>
</Card>
</GridItem>
</GridContainer>
</div>
</div>
</div>
);
}

export default DataCarousel;

+ 45
- 0
pages-sections/home/service.js Просмотреть файл

@@ -0,0 +1,45 @@
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

import GridContainer from "components/Grid/GridContainer.js";
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';
import Card from "components/Card/Card.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);
const DataService = function ({ backend, service, ...props }) {
const classes = useStyles();
const services = service.map((data, index) => (
<Card style={{width: "20rem"}}>
<div align="center">
<img
style={{height: "180px", width: "300px", display: "block"}} className={classes.imgCardTop} src={`${backend}${data.img[0]["url"]}`}/>
</div>
</Card>
));
return (
<div className={classes.section} id="notifications">
<div align="center">
<h2>Our Service</h2>
</div>
<div>
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{services[0]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{services[1]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{services[2]}
</Grid>
</GridContainer>
</div>
</div>
);
}

export default DataService;

pages-sections/Components-Sections/SectionLatestNews.js → pages-sections/latest_news/SectionLatestNews.js Просмотреть файл

@@ -17,14 +17,14 @@ import Paginations from "components/Pagination/Pagination.js";


const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);


export default function SectionNotifications() {
const LatestNews = function ({ news, ...props }) {
const classes = useStyles(); const classes = useStyles();
return ( return (
<div className={classes.section} id="notifications"> <div className={classes.section} id="notifications">
<SnackbarContent <SnackbarContent
message={ message={
<span> <span>
<b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini.
<b>Thamrin Group</b> bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini.
</span> </span>
} }
align="center" align="center"
@@ -157,3 +157,5 @@ export default function SectionNotifications() {
</div> </div>
); );
} }

export default LatestNews;

+ 77
- 0
pages-sections/latest_news/news.js Просмотреть файл

@@ -0,0 +1,77 @@
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// component
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Paper from '@material-ui/core/Paper';
import Grid from '@material-ui/core/Grid';
import GridContainer from "components/Grid/GridContainer.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import Button from "components/CustomButtons/Button.js";
import Paginations from "components/Pagination/Pagination.js";

const useStyles = makeStyles(styles);

const DataLatestNews = function ({ backend, news, ...props }) {
const classes = useStyles();
const latnews = news.map((data) => {
return (
<Card style={{width: "20rem"}}>
<img
style={{height: "180px", width: "100%", display: "block"}}
className={classes.imgCardTop}
src={`${backend}${data.img[0]["url"]}`}
/>
<CardBody>
{/* <h4 className={classes.cardTitle}>{data.title}</h4> */}
<p>{data.title}</p>
<Button color="info" onclick="myFunction()" id="myBtn">Read More</Button>
</CardBody>
</Card>
);
})
return (
<div className={classes.section} id="notifications">
<div align="center">
<h2>Latest News</h2>
</div>
<div>
<GridContainer justify="center">
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{latnews[0]}
{latnews[1]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{latnews[2]}
{latnews[3]}
</Grid>
<Grid align="center" style={{padding:"40px", marginTop:"-50px"}}>
{latnews[4]}
{latnews[5]}
</Grid>
</GridContainer>
</div>
<div align="center">
<Paginations
color="info"
pages={[
{ text: 1 },
{ text: "..." },
{ text: 5 },
{ text: 6 },
{ active: true, text: 7 },
{ text: 8 },
{ text: 9 },
{ text: "..." },
{ text: 12 }
]}
/>
</div>
</div>
);
}

export default DataLatestNews;

+ 31
- 0
pages-sections/snackbar.js Просмотреть файл

@@ -0,0 +1,31 @@
import React from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";

// Component
import SnackbarContent from "components/Snackbar/SnackbarContent.js";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";

const useStyles = makeStyles(styles);

const DataSnackbarContent = function() {
const classes = useStyles();
return (
<div align="center">
<div align="center" className={classes.section} id="notifications">
<SnackbarContent
message={
<h4>
Thamrin Group bersama Anda melawan COVID-19. Untuk informasi silakan klik di sini.
</h4>
}
align="center"
color="danger"
/>
</div>
</div>
);
}

export default DataSnackbarContent;

+ 1
- 1
pages/aboutus.js Просмотреть файл

@@ -12,7 +12,7 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js"; import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js"; import GridItem from "components/Grid/GridItem.js";
import SectionAboutUs from "pages-sections/Components-Sections/SectionAboutUs.js";
import SectionAboutUs from "pages-sections/SectionAboutUs.js";
import Parallax from "components/Parallax/Parallax.js"; import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.js";




+ 1
- 1
pages/carrer.js Просмотреть файл

@@ -12,7 +12,7 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js"; import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js"; import GridItem from "components/Grid/GridItem.js";
import SectionCarrer from "pages-sections/Components-Sections/SectionCarrer.js";
import SectionCarrer from "pages-sections/SectionCarrer.js";
import Parallax from "components/Parallax/Parallax.js"; import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.js";




+ 40
- 8
pages/components.js Просмотреть файл

@@ -12,17 +12,25 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js"; import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js"; import GridItem from "components/Grid/GridItem.js";
import SectionContent from "pages-sections/Components-Sections/SectionContent.js";
import Parallax from "components/Parallax/Parallax.js"; import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.js";
import Button from "components/CustomButtons/Button.js"; import Button from "components/CustomButtons/Button.js";
import Home from "../api/home.js"


const useStyles = makeStyles(styles);
import GetbusinessPartners from "../api/home/businessPartner.js"
import Getservices from "../api/home/service.js"
import Getcarousels from "../api/home/carousel.js"

import DataSnackbarContent from "../pages-sections/snackbar.js";
import DataCarousel from "../pages-sections/home/carousel.js";
import DataService from "../pages-sections/home/service.js";
import DataBusinessPartner from "../pages-sections/home/business_partner.js";


export default function Components(props) {
const useStyles = makeStyles(styles);
const Home = function ({ backend, businessPartners, service, carousel, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props; const { ...rest } = props;
<DataService service={props.service}/>

return ( return (
<div> <div>
<Header <Header
@@ -58,7 +66,10 @@ export default function Components(props) {
</div> </div>
</Parallax> </Parallax>
<div className={classNames(classes.main, classes.mainRaised)}> <div className={classNames(classes.main, classes.mainRaised)}>
<SectionContent />
<DataSnackbarContent />
<DataCarousel carousel={carousel} backend={backend}/>
<DataService service={service} backend={backend}/>
<DataBusinessPartner businessPartners={businessPartners} backend={backend}/>
</div> </div>
<Footer /> <Footer />
</div> </div>
@@ -66,10 +77,31 @@ export default function Components(props) {
} }


export async function getServerSideProps(context) { export async function getServerSideProps(context) {
var res=await Home.GET();
console.log(res);
var businessPartners = [];
var service = [];
var carousel = [];
const backend = process.env.BACKEND_SERVER_URI;

var res = await GetbusinessPartners.GetbusinessPartners();
if (res["STATUS"] === 1) {
businessPartners = res["DATA"]["businessPartners"];
}

var res = await Getservices.Getservices();
if (res["STATUS"] === 1) {
service = res["DATA"]["services"];
}

var res = await Getcarousels.GetCarousels();
if (res["STATUS"] === 1) {
carousel = res["DATA"]["carousels"];
}

console.log(carousel);


return { return {
props: { }, // will be passed to the page component as props
props: { businessPartners, service, carousel, backend }, // will be passed to the page component as props
}; };
} }

export default Home;

+ 23
- 3
pages/latestnews.js Просмотреть файл

@@ -12,15 +12,19 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js"; import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js"; import GridItem from "components/Grid/GridItem.js";
import SectionLatestNews from "pages-sections/Components-Sections/SectionLatestNews.js";
import Parallax from "components/Parallax/Parallax.js"; import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.js";


import GetLatestNews from "../api/latest_news/news.js"
import DataSnackbarContent from "../pages-sections/snackbar.js";
import DataLatestNews from "../pages-sections/latest_news/news.js";

const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);


export default function Components(props) {
const LatestNews = function ({ backend, news, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props; const { ...rest } = props;
<DataLatestNews news={props.news}/>
return ( return (
<div> <div>
<Header <Header
@@ -48,9 +52,25 @@ export default function Components(props) {
</div> </div>
</Parallax> </Parallax>
<div className={classNames(classes.main, classes.mainRaised)}> <div className={classNames(classes.main, classes.mainRaised)}>
<SectionLatestNews />
<DataSnackbarContent/>
<DataLatestNews news={news} backend={backend}/>
</div> </div>
<Footer /> <Footer />
</div> </div>
); );
} }

export default LatestNews;

export async function getServerSideProps(context) {
var news = [];
const backend = process.env.BACKEND_SERVER_URI;

var res = await GetLatestNews.GetNews();
if (res["STATUS"] === 1) {
news = res["DATA"]["latestNews"];
}
return {
props: { news, backend }, // will be passed to the page component as props
};
}

+ 16
- 1
pages/product.js Просмотреть файл

@@ -12,10 +12,12 @@ import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js"; import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js"; import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js"; import GridItem from "components/Grid/GridItem.js";
import SectionProduct from "pages-sections/Components-Sections/SectionProduct.js";
import SectionProduct from "pages-sections/SectionProduct.js";
import Parallax from "components/Parallax/Parallax.js"; import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; import styles from "assets/jss/nextjs-material-kit/pages/components.js";


import Getproduct from "../api/product/product.js"

const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);


export default function Components(props) { export default function Components(props) {
@@ -54,3 +56,16 @@ export default function Components(props) {
</div> </div>
); );
} }

export async function getServerSideProps(context) {
var product = [];

var res = await Getproduct.GetProduct();
if (res["STATUS"] === 1) {
product = res["DATA"]["products"];
}

return {
props: { product }, // will be passed to the page component as props
};
}

+ 1
- 1
yarn.lock Просмотреть файл

@@ -3150,7 +3150,7 @@ create-react-context@^0.3.0:
gud "^1.0.0" gud "^1.0.0"
warning "^4.0.3" warning "^4.0.3"


cross-fetch@3.0.6:
cross-fetch@3.0.6, cross-fetch@^3.0.6:
version "3.0.6" version "3.0.6"
resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c"
integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ== integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ==


Редактирование Предпросмотр
Загрузка…
Отмена
Сохранить