@@ -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{ | img{ | ||||
url | url | ||||
} | } | ||||
published_at | |||||
} | } | ||||
} | } | ||||
`, | `, | ||||
@@ -35,6 +36,7 @@ async function GetDetailNews(id, token="") { | |||||
img{ | img{ | ||||
url | 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> | ||||
<div align="center"> | <div align="center"> | ||||
<Paginations | <Paginations | ||||
color="info" | |||||
pages={[ | pages={[ | ||||
{ text: "PREV" }, | |||||
{ text: 1 }, | { text: 1 }, | ||||
{ text: "..." }, | |||||
{ text: 2 }, | |||||
{ active: true, text: 3 }, | |||||
{ text: 4 }, | |||||
{ text: 5 }, | { text: 5 }, | ||||
{ text: 6 }, | |||||
{ active: true, text: 7 }, | |||||
{ text: 8 }, | |||||
{ text: 9 }, | |||||
{ text: "..." }, | |||||
{ text: 12 } | |||||
{ text: "NEXT" } | |||||
]} | ]} | ||||
color="info" | |||||
/> | /> | ||||
</div> | </div> | ||||
</div> | </div> | ||||
@@ -44,7 +44,10 @@ const DataLatestNews = function ({ backend, news, ...props }) { | |||||
</div><br></br><br></br> | </div><br></br><br></br> | ||||
<div align="center"> | <div align="center"> | ||||
<img src={`${backend}${data.img[0]["url"]}`} alt="First slide" className="slick-image" /> | <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"> | <h5 align="justify"> | ||||
{data.description} | {data.description} | ||||
</h5> | </h5> | ||||
@@ -41,7 +41,7 @@ const DataProduct = function ({ backend, detailproduct, ...props }) { | |||||
<Grid> | <Grid> | ||||
<div className={classes.section}> | <div className={classes.section}> | ||||
<div className={classes.container}> | <div className={classes.container}> | ||||
<Card style={{width:"500px", height:"400px"}}> | |||||
<Card style={{width:"700px", height:"400px"}}> | |||||
<div> | <div> | ||||
<img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | <img className={navImageClasses} width="300px" height="400px" alt="First slide" src={`${backend}${data.img[0]["url"]}`} /> | ||||
</div> | </div> | ||||
@@ -61,6 +61,7 @@ const DataProduct = function ({ backend, detailproduct, ...props }) { | |||||
<NavPills | <NavPills | ||||
color="primary" | color="primary" | ||||
align="center" | align="center" | ||||
alignCenter | |||||
tabs={[ | tabs={[ | ||||
{ | { | ||||
tabButton: "Overview", | tabButton: "Overview", | ||||
@@ -12,13 +12,14 @@ 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/SectionCarrer.js"; | |||||
import SectionCarrer from "pages-sections/carrer/carrer.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 Getcarrer from "../api/carrer/carrer.js" | |||||
const useStyles = makeStyles(styles); | const useStyles = makeStyles(styles); | ||||
export default function Components(props) { | |||||
const Carrer = function ({ backend, s1, d3, sma, ...props }) { | |||||
const classes = useStyles(); | const classes = useStyles(); | ||||
const { ...rest } = props; | const { ...rest } = props; | ||||
return ( | return ( | ||||
@@ -33,7 +34,7 @@ export default function Components(props) { | |||||
}} | }} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||
<Parallax image={require("assets/img/carrer.jpg")} width="100px"> | |||||
<Parallax image={require("assets/img/carrer.png")} height="50px"> | |||||
<div className={classes.container}> | <div className={classes.container}> | ||||
<GridContainer> | <GridContainer> | ||||
<GridItem> | <GridItem> | ||||
@@ -48,9 +49,37 @@ export default function Components(props) { | |||||
</div> | </div> | ||||
</Parallax> | </Parallax> | ||||
<div className={classNames(classes.main, classes.mainRaised)}> | <div className={classNames(classes.main, classes.mainRaised)}> | ||||
<SectionCarrer /> | |||||
<SectionCarrer s1={s1} d3={d3} sma={sma} backend={backend}/> | |||||
</div> | </div> | ||||
<Footer /> | <Footer /> | ||||
</div> | </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> | <div> | ||||
<Header | <Header | ||||
absolute | absolute | ||||
color="transparent" | |||||
brand="Thamrin Brothers" | |||||
color="info" | |||||
rightLinks={<HeaderLinks />} | rightLinks={<HeaderLinks />} | ||||
{...rest} | {...rest} | ||||
/> | /> | ||||