@@ -0,0 +1,100 @@ | |||
import apollo from "../../lib/apollo.js"; | |||
async function GetCarrerS1(token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
carrers(where: {category: "S1"}) | |||
{ | |||
id | |||
name | |||
description | |||
img{ | |||
url | |||
} | |||
start_regis | |||
until_regis | |||
name_description | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetCarrerD3(token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
carrers(where: {category: "D3"}) | |||
{ | |||
id | |||
name | |||
description | |||
img{ | |||
url | |||
} | |||
start_regis | |||
until_regis | |||
name_description | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetCarrerSMA(token="") { | |||
var res = await apollo.query( | |||
` | |||
query { | |||
carrers(where: {category: "SMA"}) | |||
{ | |||
id | |||
name | |||
description | |||
img{ | |||
url | |||
} | |||
start_regis | |||
until_regis | |||
name_description | |||
} | |||
}`, | |||
token | |||
); | |||
return res; | |||
} | |||
async function GetDetailCarrer(id, token="") { | |||
var res = await apollo.query( | |||
` | |||
query($input: ID!){ | |||
carrers(where:{id:$input}) | |||
{ | |||
name | |||
description | |||
category | |||
img{ | |||
url | |||
} | |||
start_regis | |||
until_regis | |||
name_description | |||
} | |||
} | |||
`, | |||
token, | |||
{ | |||
"input": id | |||
} | |||
); | |||
return res; | |||
} | |||
module.exports = { | |||
GetCarrerS1:GetCarrerS1, | |||
GetCarrerD3:GetCarrerD3, | |||
GetCarrerSMA:GetCarrerSMA, | |||
GetDetailCarrer:GetDetailCarrer, | |||
}; |
@@ -12,6 +12,7 @@ async function GetNews(token="", start = 0) { | |||
img{ | |||
url | |||
} | |||
published_at | |||
} | |||
} | |||
`, | |||
@@ -35,6 +36,7 @@ async function GetDetailNews(id, token="") { | |||
img{ | |||
url | |||
} | |||
published_at | |||
} | |||
} | |||
`, | |||
@@ -0,0 +1,370 @@ | |||
.page-wrapper | |||
{ | |||
position: absolute; | |||
bottom: 0; | |||
width: 100%; | |||
z-index: 11111; | |||
top: 35px; | |||
} | |||
footer p, footer strong, footer b, footer { | |||
color: #b0b0b0; | |||
} | |||
.footer-top { | |||
background: #303030; | |||
background-size: cover; | |||
background-position: center; | |||
padding: 0 0 20px; | |||
font-family: rubik; | |||
padding-top:30px; | |||
} | |||
.footer-top, .footer-bottom { | |||
background-color: #1c1f2f; | |||
} | |||
.footer-bottom { | |||
padding: 15px 0; | |||
border-top: 1px solid #313646; | |||
background-color: #181828 !important; | |||
color: #b0b0b0; | |||
font-family: rubik; | |||
} | |||
.footer-site-info { | |||
font-size: 92.86%; | |||
} | |||
#footer-navigation, #footer-navigation li a:hover, .custom-footer, .custom-footer li a:hover { | |||
color: white; | |||
} | |||
#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a { | |||
color: #99a9b5; | |||
padding-top: 15px; | |||
} | |||
.footer-bottom ul { | |||
margin: 0; | |||
} | |||
.inline-inside { | |||
font-size: 0; | |||
line-height: 0; | |||
} | |||
.clearfix:after, .clearfix:before { | |||
content: ""; | |||
display: table; | |||
} | |||
#footer-menu li { | |||
display: inline-block; | |||
padding: 0 21px; | |||
position: relative; | |||
line-height: 1; | |||
} | |||
#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a { | |||
color: #99a9b5; | |||
padding-top: 15px; | |||
} | |||
#footer-navigation, #footer-navigation li a, .custom-footer, .custom-footer li a { | |||
color: #99a9b5; | |||
padding-top: 15px; | |||
} | |||
#footer-menu li+li:before { | |||
content: ''; | |||
width: 0; | |||
height: 100%; | |||
position: absolute; | |||
left: -1px; | |||
top: 0; | |||
font-size: 0; | |||
border-left: 1px solid #232234; | |||
border-right: 1px solid #333146; | |||
} | |||
navigation li a, .custom-footer, .custom-footer li a { | |||
color: #99a9b5; | |||
padding-top: 15px; | |||
} | |||
#footer-socials { | |||
text-align: right; | |||
} | |||
#footer-socials .socials { | |||
text-align: right; | |||
margin: 0 -7px; | |||
display: inline-block; | |||
vertical-align: middle; | |||
} | |||
a.socials-item { | |||
display: inline-block; | |||
vertical-align: top; | |||
text-align: center; | |||
-o-transition: all 0.3s; | |||
-webkit-transition: all 0.3s; | |||
transition: all 0.3s; | |||
margin: 0 5px; | |||
line-height: 16px; | |||
padding: 10px; | |||
border-radius: 50%; | |||
background-color: #141421; | |||
border: 1px solid #2e2e4c; | |||
box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05); | |||
} | |||
.socials-item i { | |||
display: inline-block; | |||
font-weight: normal; | |||
width: 1em; | |||
height: 1em; | |||
line-height: 1; | |||
font-size: 16px; | |||
text-align: center; | |||
vertical-align: top; | |||
font-feature-settings: normal; | |||
font-kerning: auto; | |||
font-language-override: normal; | |||
font-size-adjust: none; | |||
font-stretch: normal; | |||
font-style: normal; | |||
font-synthesis: weight style; | |||
font-variant: normal; | |||
font-weight: normal; | |||
text-rendering: auto; | |||
} | |||
.facebook { | |||
color: #4e64b5; | |||
} | |||
.twitter { | |||
color: #00aced; | |||
} | |||
.instagram { | |||
color: #9a8f62; | |||
} | |||
.youtube { | |||
color: #c82929; | |||
} | |||
.telegram { | |||
color: #2ca5e0; | |||
} | |||
a.socials-item:hover { | |||
box-shadow: 0 0px 20px rgba(84, 1, 74, 0.7); | |||
border-color: rgba(255, 6, 224, 0.61); | |||
background: linear-gradient(to right, rgba(255, 9, 9, 0.12941176470588237), #c000ffb5, rgba(255, 0, 94, 0.14)); | |||
} | |||
.footer-bottom a:hover { | |||
color: white; | |||
} | |||
footer p, footer li { | |||
font-size: 15px; | |||
line-height: 22px; | |||
} | |||
.widget { | |||
margin-bottom: 50px; | |||
} | |||
.footer-title { | |||
margin-bottom: 40px; | |||
color: #fff; | |||
font-weight: 500; | |||
text-transform: capitalize; | |||
padding-bottom: 15px; | |||
font-size: 16px; | |||
position: relative; | |||
} | |||
.footer-title:after { | |||
width: 50px; | |||
background: #fff; | |||
opacity: 0.2; | |||
height: 1px; | |||
content: ""; | |||
position: absolute; | |||
bottom: 0; | |||
left: 0; | |||
} | |||
.gem-contacts-item { | |||
padding-top: 10px; | |||
font-size: 15px; | |||
} | |||
.gem-contacts-item i { | |||
padding-right: 10px; | |||
} | |||
footer .widget ul { | |||
list-style: none; | |||
margin-top: 5px; | |||
} | |||
.posts li { | |||
border-bottom: 1px solid #393d50; | |||
padding-bottom: 12px; | |||
padding-top: 6px; | |||
} | |||
footer p, footer li { | |||
font-size: 15px; | |||
line-height: 22px; | |||
} | |||
.gem-pp-posts-date { | |||
color: #00bcd4; | |||
font-size: 89.5%; | |||
} | |||
footer p { | |||
line-height: 24px; | |||
margin-bottom: 10px;font-size: 15px; | |||
} | |||
.wpcf7-form-control-wrap .wpcf7-form-control { | |||
padding: 7px!important; | |||
width: 100%; | |||
} | |||
.wpcf7-form-control-wrap input { | |||
background: #1c1f2f; | |||
overflow: hidden; | |||
border: 1px solid #2e344d; | |||
background-color: #1c1f2f; | |||
box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03); | |||
border-radius: 5px; | |||
transition: all 0.3s ease-in-out 0s; | |||
} | |||
.wpcf7-form-control-wrap input:hover { | |||
background-color: transparent; | |||
box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04); | |||
border-color: rgba(255, 255, 255, 0.2); | |||
color: white; | |||
} | |||
.wpcf7 .wpcf7-form .contact-form-footer textarea { | |||
height: 160px; | |||
width: 100%; | |||
} | |||
.wpcf7-form-control-wrap textarea:hover { | |||
background-color: transparent; | |||
box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04); | |||
border-color: rgba(255, 255, 255, 0.2); | |||
color: white; | |||
} | |||
.wpcf7-form-control-wrap textarea { | |||
background: #1c1f2f; | |||
overflow: hidden; | |||
border: 1px solid #2e344d; | |||
background-color: #1c1f2f; | |||
box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03); | |||
border-radius: 5px; | |||
transition: all 0.3s ease-in-out 0s; | |||
} | |||
textarea { | |||
overflow: auto; | |||
resize: vertical; | |||
} | |||
.wpcf7 .wpcf7-form .contact-form-footer .wpcf7-submit { | |||
width: 100%; | |||
padding: 11px; | |||
margin: 0; | |||
line-height: 0; | |||
} | |||
.wpcf7-form .contact-form-footer .wpcf7-submit { | |||
background-color: #394050; | |||
color: #99a9b5; | |||
border: none; | |||
cursor: pointer; | |||
padding: 15px 40px; | |||
font-size: 14px; | |||
font-weight: 400; | |||
transition: all 0.5s; | |||
letter-spacing: 2px; | |||
color: rgba(255,255,255,.5); | |||
box-shadow: none; | |||
text-transform: uppercase; | |||
outline: none !important; | |||
background-color: #1c1f2f; | |||
border-radius: 5px; | |||
min-width: 140px; | |||
/* box-shadow: 10px 10px 36px rgb(0,0,0,0.5), -13px -13px 23px rgba(255,255,255, 0.03), inset 14px 14px 70px rgb(0,0,0,0.2), inset -15px -15px 30px rgba(255,255,255, 0.04); */ | |||
box-shadow: 3px 9px 16px rgb(0,0,0,0.4), -3px -3px 10px rgba(255,255,255, 0.06), inset 14px 14px 26px rgb(0,0,0,0.3), inset -3px -3px 15px rgba(255,255,255, 0.05); | |||
border-width: 1px 0px 0px 1px; | |||
border-style: solid; | |||
border-color: #2e344d; | |||
transition: all 0.3s ease-in-out 0s; | |||
} | |||
.wpcf7-form input[type=submit] { | |||
height: 40px; | |||
line-height: 21px; | |||
padding: 10px 40px; | |||
font-size: 14px; | |||
} | |||
.posts li a { | |||
color: #99a9b5; | |||
} | |||
.wpcf7-form .contact-form-footer .wpcf7-submit:hover { | |||
box-shadow: 0 0px 20px rgba(84, 1, 74, 0.7); | |||
border-color: rgba(255, 6, 224, 0.61); | |||
background: linear-gradient(to right, rgba(255, 9, 9, 0.12941176470588237), #c000ffb5, rgba(255, 0, 94, 0.14)); | |||
color: white; | |||
} | |||
img { | |||
border-style: none; | |||
height: auto; | |||
max-width: 100%; | |||
vertical-align: middle; | |||
} | |||
.widget_gallery a { | |||
display: inline-block; | |||
} | |||
footer .widget ul { | |||
list-style: none; | |||
margin-top: 5px; | |||
} | |||
.widget_gallery ul { | |||
padding-left: 0; | |||
display: table; | |||
} | |||
.widget_gallery li { | |||
display: inline-block; | |||
width: 33.33%; | |||
transition: all 0.5s; | |||
-webkit-transition: all 0.5s; | |||
-moz-transition: all 0.5s; | |||
-o-transition: all 0.5s; | |||
padding: 2px; | |||
} | |||
.widget_gallery.gallery-grid-4 li { | |||
width: 30%; | |||
} | |||
.footer-site-info | |||
{ | |||
padding-top: 10px; | |||
} |
@@ -1,104 +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"; | |||
// Component | |||
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 Button from "components/CustomButtons/Button.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">Thamrin Group Carrer</CardHeader> | |||
</div> | |||
<CardBody> | |||
<div align="center"> | |||
<h2>Carrer & Job Vacancies</h2> | |||
</div> | |||
<GridContainer justify="center"> | |||
<GridItem> | |||
<NavPills | |||
alignCenter | |||
color="primary" | |||
tabs={[ | |||
{ | |||
tabButton: "S1 & D3", | |||
tabIcon: Dashboard, | |||
tabContent: ( | |||
<GridContainer justify="center"> | |||
</GridContainer> | |||
), | |||
}, | |||
{ | |||
tabButton: "SMA / SMK / MA", | |||
tabIcon: Dashboard, | |||
tabContent: ( | |||
<GridContainer justify="center"> | |||
</GridContainer> | |||
), | |||
}, | |||
{ | |||
tabButton: "Information", | |||
tabIcon: Dashboard, | |||
tabContent: ( | |||
<GridContainer justify="center"> | |||
</GridContainer> | |||
), | |||
}, | |||
{ | |||
tabButton: "Reqruitment Process", | |||
tabIcon: Dashboard, | |||
tabContent: ( | |||
<GridContainer justify="center"> | |||
<GridItem> | |||
<div align="center"> | |||
<img | |||
alt="..." | |||
style={{ width: "1000px", height: "800px", display: "block" }} | |||
src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg" | |||
className={navImageClasses} | |||
/> | |||
</div> | |||
</GridItem> | |||
</GridContainer> | |||
), | |||
}, | |||
]} | |||
/> | |||
</GridItem> | |||
</GridContainer> | |||
</CardBody> | |||
<CardFooter className={classes.textMuted} textAlign="center"> | |||
© 2020 , All Right Reserved by @Thamrin Brother Company | |||
</CardFooter> | |||
</Card> | |||
); | |||
} |
@@ -0,0 +1,163 @@ | |||
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"; | |||
// Component | |||
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 Quote from "components/Typography/Quote.js" | |||
import Grid from '@material-ui/core/Grid'; | |||
import Button from "components/CustomButtons/Button.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/profilePage.js"; | |||
import Icon from "@material-ui/core/Icon"; | |||
const useStyles = makeStyles(styles); | |||
const DataCarrers = function ({ backend, s1, d3, sma, ...props }) { | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
const imageClasses = classNames( | |||
classes.imgRaised, | |||
classes.imgRoundedCircle, | |||
classes.imgFluid | |||
); | |||
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery); | |||
const CarrerS1 = s1.map((data) => { | |||
return ( | |||
<Grid style={{width:"600px", padding:"30px"}}> | |||
<Card> | |||
<CardHeader color="danger"><div align="center">{data.name}</div></CardHeader> | |||
<CardBody> | |||
<Quote | |||
text={data.name_description} | |||
author="Post By Thamrin Group" | |||
/> | |||
Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | |||
<Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | |||
</Button> | |||
</CardBody> | |||
</Card> | |||
</Grid> | |||
); | |||
}) | |||
const CarrerD3 = d3.map((data) => { | |||
return ( | |||
<Grid style={{width:"600px", padding:"30px"}}> | |||
<Card> | |||
<CardHeader color="danger">{data.name}</CardHeader> | |||
<CardBody> | |||
<Quote | |||
text={data.name_description} | |||
author="Post By Thamrin Group" | |||
/> | |||
Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | |||
<Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | |||
</Button> | |||
</CardBody> | |||
</Card> | |||
</Grid> | |||
); | |||
}) | |||
const CarrerSMA = sma.map((data) => { | |||
return ( | |||
<Grid style={{width:"600px", padding:"30px"}}> | |||
<Card> | |||
<CardHeader justify="center" color="danger">{data.name}</CardHeader> | |||
<CardBody> | |||
<Quote | |||
text={data.name_description} | |||
author="Post By Thamrin Group" | |||
/> | |||
Masa Pendaftaran : {data.start_regis} s/d {data.until_regis} | |||
<Button color="danger" style={{marginLeft:"20px"}} round href={"/carrer_details?s="+data.id}> | |||
<Icon className={classes.icons}>open_in_new</Icon>Detail Carrer | |||
</Button> | |||
</CardBody> | |||
</Card> | |||
</Grid> | |||
); | |||
}) | |||
return ( | |||
<Card className={classes.textCenter}> | |||
<div align="center"> | |||
<CardHeader color="info">Product</CardHeader> | |||
</div> | |||
<CardBody> | |||
<div align="center"> | |||
<h2>Carrer & Job Vacancies</h2> | |||
</div> | |||
<GridContainer justify="center"> | |||
<GridItem> | |||
<NavPills | |||
alignCenter | |||
color="primary" | |||
tabs={[ | |||
{ | |||
tabButton: "S1", | |||
tabIcon: Dashboard, | |||
tabContent: ( | |||
<GridContainer justify="center"> | |||
{CarrerS1}{CarrerS1}{CarrerS1} | |||
</GridContainer> | |||
), | |||
}, | |||
{ | |||
tabButton: "D3", | |||
tabIcon: Dashboard, | |||
tabContent: ( | |||
<GridContainer justify="center"> | |||
{CarrerD3} | |||
{CarrerD3} | |||
</GridContainer> | |||
), | |||
}, | |||
{ | |||
tabButton: "SMA / SMK ", | |||
tabIcon: Dashboard, | |||
tabContent: ( | |||
<GridContainer justify="center"> | |||
{CarrerSMA} | |||
</GridContainer> | |||
), | |||
}, | |||
{ | |||
tabButton: "Recruitment Process", | |||
tabIcon: Dashboard, | |||
tabContent: ( | |||
<GridContainer justify="center"> | |||
<GridItem> | |||
<div align="center"> | |||
<img | |||
alt="..." | |||
style={{ width: "1000px", height: "800px", display: "block" }} | |||
src=" https://www.yamaha-motor.co.id/uploads/career/big_img/5d305eca19dfb8171.jpg" | |||
className={navImageClasses} | |||
/> | |||
</div> | |||
</GridItem> | |||
</GridContainer> | |||
), | |||
}, | |||
]} | |||
/> | |||
</GridItem> | |||
</GridContainer> | |||
</CardBody> | |||
</Card> | |||
); | |||
} | |||
export default DataCarrers; |
@@ -0,0 +1,40 @@ | |||
import React, { useState, useEffect } 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 Card from "components/Card/Card.js"; | |||
import CardBody from "components/Card/CardBody.js"; | |||
import CardHeader from "components/Card/CardHeader.js"; | |||
const useStyles = makeStyles(styles); | |||
const DataCarrer = function ({ backend, detailcarrer, ...props }) { | |||
const classes = useStyles(); | |||
const carrer = detailcarrer.map((data) => { | |||
return ( | |||
<Card> | |||
<CardHeader color="info"><h3><div align="center">{data.name}</div></h3></CardHeader> | |||
<CardBody> | |||
<div align="center"> | |||
<img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" /> | |||
</div> | |||
<h5 align="center">Masa Pendaftaran : {data.start_regis} s/d {data.until_regis}</h5> | |||
<h5 align="center">Syarat & Tata Cara Pendaftaran :</h5> | |||
<h5 align="center" align="justify"> | |||
{data.description} | |||
</h5> | |||
</CardBody> | |||
</Card> | |||
); | |||
}) | |||
return ( | |||
<div> | |||
{carrer} | |||
</div> | |||
); | |||
} | |||
export default DataCarrer; |
@@ -75,18 +75,16 @@ const DataLatestNews = function ({ backend, news, ...props }) { | |||
</div> | |||
<div align="center"> | |||
<Paginations | |||
color="info" | |||
pages={[ | |||
{ text: "PREV" }, | |||
{ text: 1 }, | |||
{ text: "..." }, | |||
{ text: 2 }, | |||
{ active: true, text: 3 }, | |||
{ text: 4 }, | |||
{ text: 5 }, | |||
{ text: 6 }, | |||
{ active: true, text: 7 }, | |||
{ text: 8 }, | |||
{ text: 9 }, | |||
{ text: "..." }, | |||
{ text: 12 } | |||
{ text: "NEXT" } | |||
]} | |||
color="info" | |||
/> | |||
</div> | |||
</div> | |||
@@ -44,7 +44,10 @@ const DataLatestNews = function ({ backend, news, ...props }) { | |||
</div><br></br><br></br> | |||
<div align="center"> | |||
<img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" /> | |||
</div><br></br><br></br> | |||
<div><br></br> | |||
{data.published_at} | |||
</div> | |||
</div><br></br> | |||
<h5 align="justify"> | |||
{data.description} | |||
</h5> | |||
@@ -41,7 +41,7 @@ const DataProduct = function ({ backend, detailproduct, ...props }) { | |||
<Grid> | |||
<div className={classes.section}> | |||
<div className={classes.container}> | |||
<Card style={{width:"500px", height:"400px"}}> | |||
<Card style={{width:"700px", height:"400px"}}> | |||
<div> | |||
<img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | |||
</div> | |||
@@ -61,6 +61,7 @@ const DataProduct = function ({ backend, detailproduct, ...props }) { | |||
<NavPills | |||
color="primary" | |||
align="center" | |||
alignCenter | |||
tabs={[ | |||
{ | |||
tabButton: "Overview", | |||
@@ -12,13 +12,14 @@ import HeaderLinks from "components/Header/HeaderLinks.js"; | |||
import Footer from "components/Footer/Footer.js"; | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import GridItem from "components/Grid/GridItem.js"; | |||
import SectionCarrer from "pages-sections/SectionCarrer.js"; | |||
import SectionCarrer from "pages-sections/carrer/carrer.js"; | |||
import Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
import Getcarrer from "../api/carrer/carrer.js" | |||
const useStyles = makeStyles(styles); | |||
export default function Components(props) { | |||
const Carrer = function ({ backend, s1, d3, sma, ...props }) { | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
return ( | |||
@@ -33,7 +34,7 @@ export default function Components(props) { | |||
}} | |||
{...rest} | |||
/> | |||
<Parallax image={require("assets/img/carrer.jpg")} width="100px"> | |||
<Parallax image={require("assets/img/carrer.png")} height="50px"> | |||
<div className={classes.container}> | |||
<GridContainer> | |||
<GridItem> | |||
@@ -48,9 +49,37 @@ export default function Components(props) { | |||
</div> | |||
</Parallax> | |||
<div className={classNames(classes.main, classes.mainRaised)}> | |||
<SectionCarrer /> | |||
<SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/> | |||
</div> | |||
<Footer /> | |||
</div> | |||
); | |||
} | |||
export default Carrer; | |||
export async function getServerSideProps(context) { | |||
var s1 = []; | |||
var d3 = []; | |||
var sma = []; | |||
const backend = process.env.BACKEND_SERVER_URI; | |||
var res = await Getcarrer.GetCarrerS1(); | |||
if (res["STATUS"] === 1) { | |||
s1 = res["DATA"]["carrers"]; | |||
} | |||
var res = await Getcarrer.GetCarrerD3(); | |||
if (res["STATUS"] === 1) { | |||
d3 = res["DATA"]["carrers"]; | |||
} | |||
var res = await Getcarrer.GetCarrerSMA(); | |||
if (res["STATUS"] === 1) { | |||
sma = res["DATA"]["carrers"]; | |||
} | |||
return { | |||
props: { s1, d3, sma, backend }, // will be passed to the page component as props | |||
}; | |||
} |
@@ -0,0 +1,76 @@ | |||
import React from "react"; | |||
// nodejs library that concatenates classes | |||
import classNames from "classnames"; | |||
// 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 Header from "components/Header/Header.js"; | |||
import HeaderLinks from "components/Header/HeaderLinks.js"; | |||
import Footer from "components/Footer/Footer.js"; | |||
import GridContainer from "components/Grid/GridContainer.js"; | |||
import GridItem from "components/Grid/GridItem.js"; | |||
import CarrerDetail from "pages-sections/carrer/carrer_details.js"; | |||
import Parallax from "components/Parallax/Parallax.js"; | |||
import styles from "assets/jss/nextjs-material-kit/pages/components.js"; | |||
import GetDetailcarrer from "../api/carrer/carrer.js" | |||
const useStyles = makeStyles(styles); | |||
const CarrerDetails = function ({ backend, detailcarrer, ...props }) { | |||
const classes = useStyles(); | |||
const { ...rest } = props; | |||
return ( | |||
<div> | |||
<Header | |||
rightLinks={<HeaderLinks/>} | |||
fixed | |||
color="info" | |||
changeColorOnScroll={{ | |||
height: 400, | |||
color: "white" | |||
}} | |||
{...rest} | |||
/> | |||
<Parallax image={require("assets/img/carrer.png")} height="50px"> | |||
<div className={classes.container}> | |||
<GridContainer> | |||
<GridItem> | |||
{/* <div className={classes.brand}> | |||
<h1 className={classes.title}>NextJS Material Kit.</h1> | |||
<h3 className={classes.subtitle}> | |||
A Badass Material Kit based on Material-UI and NextJS. | |||
</h3> | |||
</div> */} | |||
</GridItem> | |||
</GridContainer> | |||
</div> | |||
</Parallax> | |||
<div className={classNames(classes.main, classes.mainRaised)}> | |||
<CarrerDetail detailcarrer={detailcarrer} backend={backend}/> | |||
</div> | |||
<Footer /> | |||
</div> | |||
); | |||
} | |||
export default CarrerDetails; | |||
export async function getServerSideProps(context) { | |||
var {query} = context; | |||
var detailcarrer = []; | |||
const backend = process.env.BACKEND_SERVER_URI; | |||
var res = await GetDetailcarrer.GetDetailCarrer(query.s||0); | |||
if (res["STATUS"] === 1) { | |||
detailcarrer = res["DATA"]["carrers"]; | |||
} | |||
console.log(res); | |||
return { | |||
props: { detailcarrer, backend }, // will be passed to the page component as props | |||
}; | |||
} |
@@ -36,8 +36,7 @@ export default function LoginPage(props) { | |||
<div> | |||
<Header | |||
absolute | |||
color="transparent" | |||
brand="Thamrin Brothers" | |||
color="info" | |||
rightLinks={<HeaderLinks />} | |||
{...rest} | |||
/> | |||