Procházet zdrojové kódy

add part & accessories pages

master
Yusmardianto před 4 roky
rodič
revize
4d6267f589
23 změnil soubory, kde provedl 613 přidání a 299 odebrání
  1. +5
    -5
      .env-sample
  2. +0
    -245
      README.md
  3. +63
    -0
      api/product/accessories.js
  4. +9
    -27
      api/product/product.js
  5. binární
      assets/img/yamalube.jpg
  6. binární
      assets/img/ygp.jpg
  7. +5
    -6
      components/Header/HeaderLinks.js
  8. +64
    -0
      pages-sections/product/accessories.js
  9. +0
    -0
      pages-sections/product/accessories_details.js
  10. +64
    -0
      pages-sections/product/apparel.js
  11. +0
    -0
      pages-sections/product/apparel_details.js
  12. +62
    -0
      pages-sections/product/helmet.js
  13. +0
    -0
      pages-sections/product/helmet_details.js
  14. +1
    -1
      pages-sections/product/product.js
  15. +62
    -0
      pages-sections/product/yamalube.js
  16. +0
    -0
      pages-sections/product/yamalube_details.js
  17. +39
    -6
      pages-sections/product/ygp.js
  18. +0
    -0
      pages-sections/product/ygp_details.js
  19. +56
    -0
      pages/product/accessories.js
  20. +56
    -0
      pages/product/apparel.js
  21. +56
    -0
      pages/product/helmet.js
  22. +58
    -0
      pages/product/yamalube.js
  23. +13
    -9
      pages/product/ygp.js

+ 5
- 5
.env-sample Zobrazit soubor

@@ -1,9 +1,9 @@
//local //local
API_URL=http://127.0.0.1:1337
graphql_uri=http://127.0.0.1:1337/graphql
BACKEND_SERVER_URI =http://127.0.0.1:1337
API_URL=http://127.0.0.1:14005
API_GRAPHQL_URI=http://127.0.0.1:14005/graphql
BACKEND_SERVER_URI =http://127.0.0.1:14005


//live //live
API_URL=http://172.16.1.8:14011
API_URL=http://172.16.1.8:14009
API_GRAPHQL_URI=http://172.16.1.8:14009/graphql API_GRAPHQL_URI=http://172.16.1.8:14009/graphql
BACKEND_SERVER_URI = http://172.16.1.8:14011
BACKEND_SERVER_URI=http://172.16.1.8:14009

+ 0
- 245
README.md Zobrazit soubor

@@ -1,245 +0,0 @@
# [NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit?ref=njsmk-readme) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](https://twitter.com/share?url=https%3A%2F%2Fdemos.creative-tim.com%2Fnextjs-material-kit%2Fcomponents&text=NextJS%20Material%20Kit&via=Creative%20Tim&hashtags=nextjs%20%23creativetim%20%23materialdesign)


![version](https://img.shields.io/badge/version-1.1.0-blue.svg) ![license](https://img.shields.io/badge/license-MIT-blue.svg) [![GitHub issues open](https://img.shields.io/github/issues/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aopen+is%3Aissue) [![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/creativetimofficial/nextjs-material-kit.svg?maxAge=2592000)](https://github.com/creativetimofficial/nextjs-material-kit/issues?q=is%3Aissue+is%3Aclosed) [![Join the chat at https://gitter.im/NIT-dgp/General](https://badges.gitter.im/NIT-dgp/General.svg)](https://gitter.im/creative-tim-general/Lobby) [![Chat](https://img.shields.io/badge/chat-on%20discord-7289da.svg)](https://discord.gg/E4aHAQy)


![Product Presentation Image](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/nextjs-material-kit/nextjs-material-kit.jpg)

**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** is a Free Material-UI Kit with a fresh, new design inspired by Google's material design and is was developed using [NextJS](https://nextjs.org/?ref=creativetim), starting from [this starter project](https://github.com/mui-org/material-ui/tree/master/examples/nextjs) by [Material-UI](https://material-ui.com/?ref=creativetim) and [Material Kit React](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme) by Creative Tim. You asked for it, so we built it. It's a great pleasure to introduce to you the material concepts in an easy to use and beautiful set of components. Along with the restyling of the Material-UI elements, you will find three fully-coded example pages, to help you design your NextJS project.

**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** makes use of light, surface and movement. It uses a deliberate color choice, edge-to-edge imagery and large scale typography. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left and the actions on the right.

This new design has elements that have been the result of research regarding ink and paper and the way objects and materials interact in real life. The result is a beautiful and consistent set of elements that can get you started with your next project. NextJS Material Kit is a great tool if you are looking to create a web presence for your web application and need to be consistent, leaving the impression of visually similar elements. It is also a great resource in its own right, looking gorgeous and helping you build your web pages.

**[NextJS Material Kit](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)** was built with the help of [nextjs](https://nextjs.org/?ref=creativetim) and it uses a framework built by our friends from **[Material-UI](https://material-ui.com/?ref=creativetim)**, who did an amazing job creating the backbone for the material effects, animations, ripples and transitions. Big thanks to this team for the effort and forward thinking they put into it.


## Table of Contents

* [Versions](#versions)
* [Demo](#demo)
* [Quick Start](#quick-start)
* [Documentation](#documentation)
* [File Structure](#file-structure)
* [Browser Support](#browser-support)
* [Resources](#resources)
* [Reporting Issues](#reporting-issues)
* [Licensing](#licensing)
* [Useful Links](#useful-links)


## Versions

[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/html-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/nextjs_logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/vue-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/vue-material-kit?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/react-native-logo.jpg?raw=true" width="60" height="60" />](https://www.creative-tim.com/product/material-kit-react-native?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/figma-logo.jpg?raw=true" width="60" height="60" />](https://demos.creative-tim.com/material-kit-figma/presentation.html?ref=njsmk-readme)[<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/wordpress-logo.jpg?raw=true" width="60" height="60" />](https://themeisle.com/themes/hestia/?ref=creativetim)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/photoshop-logo.jpg" width="60" height="60" />](https://github.com/creativetimofficial/material-kit/tree/photoshop)[<img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/sketch-logo.jpg" width="60" height="60" />](https://github.com/creativetimofficial/material-kit/tree/sketch)



| React Native | Figma | WordPress | NextJS |
| --- | --- | --- | --- |
| [![Material Kit React Native](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-react-native/opt_mkrn_thumbnail.jpg?raw=true)](https://www.creative-tim.com/product/material-kit-react-native?ref=njsmk-readme) | [![Material Kit Figma](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-figma/material-kit-figma.jpg?raw=true)](https://demos.creative-tim.com/material-kit-figma/presentation.html?ref=njsmk-readme) | [![Material Kit WordPress](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-wordpress/opt_smd_thumbnail.jpg?raw=true)](https://themeisle.com/themes/hestia/?ref=creativetim) | [![NextJS Material Kit](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/nextjs-material-kit.jpg?raw=true)](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme)


| HTML | React | Vue |
| --- | --- | --- |
| [![Material Kit HTML](https://github.com/creativetimofficial/public-assets/blob/master/material-kit/material-kit.jpeg?raw=true)](https://www.creative-tim.com/product/material-kit?ref=njsmk-readme) | [![Material Kit React](https://github.com/creativetimofficial/public-assets/blob/master/material-kit-react/material-kit-react.jpeg?raw=true)](https://www.creative-tim.com/product/material-kit-react?ref=njsmk-readme) | [![Vue Material Kit](https://github.com/creativetimofficial/public-assets/blob/master/vue-material-kit/vue-material-kit.jpeg?raw=true)](https://www.creative-tim.com/product/vue-material-kit?ref=njsmk-readme)

## Demo

| Buttons | Inputs | Navbars |
| --- | --- | --- |
| [![Buttons](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/buttons.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme) | [![Inputs](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/inputs.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme) | [![Navbar](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/navbars.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)

| Login Page | Landing Page | Profile Page |
| --- | --- | --- |
| [![Login Page](https://raw.githubusercontent.com/creativetimofficial/public-assets/master/nextjs-material-kit/login-page.png)](https://demos.creative-tim.com/nextjs-material-kit/login?ref=njsmk-readme) | [![Landing Page](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/landing-page.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/landing?ref=njsmk-readme) | [![Profile Page](https://github.com/creativetimofficial/public-assets/blob/master/nextjs-material-kit/profile-page.png?raw=true)](https://demos.creative-tim.com/nextjs-material-kit/profile?ref=njsmk-readme)

[View More](https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme)


## Quick start

- [Download from Github](https://github.com/creativetimofficial/nextjs-material-kit/archive/master.zip).
- [Download from Creative Tim](https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme).
- Clone the repo: `git clone https://github.com/creativetimofficial/nextjs-material-kit.git`.
- `npm i nextjs-material-kit`
- Install with [Bower](https://bower.io/?ref=creativetim): ```bower install nextjs-material-kit```.


## Documentation
The documentation for the NextJS Material Kit is hosted at our [website](https://demos.creative-tim.com/nextjs-material-kit/documentation/tutorial?ref=njsmk-readme).


## File Structure
Within the download you'll find the following directories and files:

```
nextjs-material-kit
.
├── CHANGELOG.md
├── ISSUE_TEMPLATE.md
├── LICENSE.md
├── README.md
├── next.config.js
├── package.json
├── Documentation
│   ├── assets
│   └── tutorial-components.html
├── assets
│   ├── css
│   ├── img
│   │   ├── examples
│   │   └── faces
│   ├── jss
│   │   ├── nextjs-material-kit
│   │   │   ├── components
│   │   │   └── pages
│   │   │   ├── componentsSections
│   │   │   └── landingPageSections
│   │   └── nextjs-material-kit.js
│   └── scss
│   ├── core
│   │   ├── mixins
│   │   └── variables
│   ├── plugins
│   └── nextjs-material-kit.scss
├── pages
│   ├── _app.js
│   ├── _document.js
│   ├── _error.js
│   ├── components.js
│   ├── index.js
│   ├── landingpage.js
│   ├── loginpage.js
│   └── profilepage.js
├── components
│   ├── Badge
│   │   └── Badge.js
│   ├── Card
│   │   ├── Card.js
│   │   ├── CardBody.js
│   │   ├── CardFooter.js
│   │   └── CardHeader.js
│   ├── Clearfix
│   │   └── Clearfix.js
│   ├── CustomButtons
│   │   └── Button.js
│   ├── CustomDropdown
│   │   └── CustomDropdown.js
│   ├── CustomInput
│   │   └── CustomInput.js
│   ├── CustomLinearProgress
│   │   └── CustomLinearProgress.js
│   ├── CustomTabs
│   │   └── CustomTabs.js
│   ├── Footer
│   │   └── Footer.js
│   ├── Grid
│   │   ├── GridContainer.js
│   │   └── GridItem.js
│   ├── Header
│   │   ├── Header.js
│   │   └── HeaderLinks.js
│   ├── InfoArea
│   │   └── InfoArea.js
│   ├── NavPills
│   │   └── NavPills.js
│   ├── PageChange
│   │   └── PageChange.js
│   ├── Pagination
│   │   └── Pagination.js
│   ├── Parallax
│   │   └── Parallax.js
│   ├── Snackbar
│   │   └── SnackbarContent.js
│   └── Typography
│   ├── Danger.js
│   ├── Info.js
│   ├── Muted.js
│   ├── Primary.js
│   ├── Quote.js
│   ├── Small.js
│   ├── Success.js
│   └── Warning.js
└── pages-sections
├── Components-Sections
│   ├── SectionBasics.js
│   ├── SectionCarousel.js
│   ├── SectionCompletedExamples.js
│   ├── SectionDownload.js
│   ├── SectionExamples.js
│   ├── SectionJavascript.js
│   ├── SectionLogin.js
│   ├── SectionNavbars.js
│   ├── SectionNotifications.js
│   ├── SectionPills.js
│   ├── SectionTabs.js
│   └── SectionTypography.js
└── LandingPage-Sections
├── ProductSection.js
├── TeamSection.js
└── WorkSection.js
```


## Browser Support

At present, we officially aim to support the last two versions of the following browsers:

<img src="https://github.com/creativetimofficial/public-assets/blob/master/logos/chrome-logo.png?raw=true" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/firefox-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/edge-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/safari-logo.png" width="64" height="64"> <img src="https://raw.githubusercontent.com/creativetimofficial/public-assets/master/logos/opera-logo.png" width="64" height="64">



## Resources
- Demo: <https://demos.creative-tim.com/nextjs-material-kit/?ref=njsmk-readme>
- Download Page: <https://www.creative-tim.com/product/nextjs-material-kit?ref=njsmk-readme>
- Documentation: <https://demos.creative-tim.com/nextjs-material-kit/documentation/tutorial?ref=njsmk-readme>
- License Agreement: <https://www.creative-tim.com/license?ref=njsmk-readme>
- Support: <https://www.creative-tim.com/contact-us?ref=njsmk-readme>
- Issues: [Github Issues Page](https://github.com/creativetimofficial/nextjs-material-kit/issues)
- **Dashboards:**

| HTML | React | Vue | Angular |
| --- | --- | --- | --- |
| [![Material Dashboard HTML](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-html/material-dashboard.jpeg?raw=true)](https://www.creative-tim.com/product/material-dashboard?ref=njsmk-readme) | [![Material Dashboard React](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-react/material-dashboard-react.jpeg?raw=true)](https://www.creative-tim.com/product/material-dashboard-react?ref=njsmk-readme) | [![Vue Material Dashboard](https://github.com/creativetimofficial/public-assets/blob/master/vue-material-dashboard/vue-material-dashboard.jpeg?raw=true)](https://www.creative-tim.com/product/vue-material-dashboard?ref=njsmk-readme) | [![ Material Dashboard Angular](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-angular/material-dashboard-angular.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-angular2?ref=njsmk-readme)

| HTML Dark | Laravel | Vuetify |
| --- | --- | --- |
| [![Material Dashboard Dark](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-dark/material-dashboard-dark.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-dark?ref=njsmk-readme) |[![Material Dashboard Laravel](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-laravel/material-dashboard-laravel.jpg?raw=true)](https://www.creative-tim.com/product/material-dashboard-laravel?ref=njsmk-readme)| [![Material Dashboard Vuetify](https://github.com/creativetimofficial/public-assets/blob/master/material-dashboard-vuetify/material-dashboard-vuetify.jpg?raw=true)](https://www.creative-tim.com/product/vuetify-material-dashboard?ref=njsmk-readme)

## Reporting Issues

We use GitHub Issues as the official bug tracker for the NextJS Material Kit. Here are some advices for our users that want to report an issue:

1. Make sure that you are using the latest version of the Material Kit. Check the CHANGELOG from your dashboard on our [website](https://www.creative-tim.com/?ref=njsmk-readme).
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help.

## Licensing

- Copyright 2020 Creative Tim (https://www.creative-tim.com/?ref=njsmk-readme)

- Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/master/LICENSE.md)

## Useful Links

- [Tutorials](https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w)
- [Affiliate Program](https://www.creative-tim.com/affiliates/new?ref=njsmk-readme) (earn money)
- [Blog Creative Tim](http://blog.creative-tim.com/?ref=njsmk-readme)
- [Free Products](https://www.creative-tim.com/templates/free?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
- [Premium Products](https://www.creative-tim.com/templates/premium?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
- [React Products](https://www.creative-tim.com/templates/react?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
- [Angular Products](https://www.creative-tim.com/templates/angular?direction=desc&sort=created_at&ref=njsmk-readme) from Creative Tim
- [VueJS Products](https://www.creative-tim.com/templates/vuejs?direction=desc&sort=created_atref=njsmk-readme) from Creative Tim
- [More products](https://www.creative-tim.com/templates?ref=njsmk-readme) from Creative Tim
- Check our Bundles [here](https://www.creative-tim.com/bundles?ref=njsmk-readme)

### Social Media

Twitter: <https://twitter.com/CreativeTim>

Facebook: <https://www.facebook.com/CreativeTim>

Dribbble: <https://dribbble.com/creativetim>

Instagram: <https://www.instagram.com/CreativeTimOfficial>

+ 63
- 0
api/product/accessories.js Zobrazit soubor

@@ -40,7 +40,70 @@ async function GetYamalube(token="") {
return res; return res;
} }


async function GetHelmet(token="") {
var res = await apollo.query(
`
query {
accessories(where: { category: "Helmet" }) {
id
name
description
price
part_code
img {
url
}
}
}`,
token
);
return res;
}

async function GetApparel(token="") {
var res = await apollo.query(
`
query {
accessories(where: { category: "Apparel" }) {
id
name
description
price
part_code
img {
url
}
}
}`,
token
);
return res;
}

async function GetAccessories(token="") {
var res = await apollo.query(
`
query {
accessories(where: { category: "Accessories" }) {
id
name
description
price
part_code
img {
url
}
}
}`,
token
);
return res;
}

module.exports = { module.exports = {
GetYGP:GetYGP, GetYGP:GetYGP,
GetYamalube:GetYamalube, GetYamalube:GetYamalube,
GetHelmet:GetHelmet,
GetApparel:GetApparel,
GetAccessories:GetAccessories,
}; };

+ 9
- 27
api/product/product.js Zobrazit soubor

@@ -45,9 +45,7 @@ async function GetDetailProduct(id, token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
} `, } `,
@@ -78,9 +76,7 @@ async function GetProductYamaha(token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
}`, }`,
@@ -108,9 +104,7 @@ async function GetProductSuzuki(token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
}`, }`,
@@ -138,9 +132,7 @@ async function GetProductHonda(token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
}`, }`,
@@ -168,9 +160,7 @@ async function GetProductHino(token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
}`, }`,
@@ -198,9 +188,7 @@ async function GetProductMercedes(token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
}`, }`,
@@ -228,9 +216,7 @@ async function GetProductBPR(token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
}`, }`,
@@ -258,9 +244,7 @@ async function GetProductEmilia(token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
}`, }`,
@@ -288,9 +272,7 @@ async function GetProductHomes(token="") {
} }
overview overview
specification specification
film{
url
}
film
stock stock
} }
}`, }`,


binární
assets/img/yamalube.jpg Zobrazit soubor

Před Za
Šířka: 1600  |  Výška: 900  |  Velikost: 350 KiB

binární
assets/img/ygp.jpg Zobrazit soubor

Před Za
Šířka: 934  |  Výška: 271  |  Velikost: 22 KiB

+ 5
- 6
components/Header/HeaderLinks.js Zobrazit soubor

@@ -15,7 +15,6 @@ import { Apps, ShareTwoTone } from "@material-ui/icons";
// core components // core components
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js"; import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
import Button from "components/CustomButtons/Button.js"; import Button from "components/CustomButtons/Button.js";

import styles from "assets/jss/nextjs-material-kit/components/headerLinksStyle.js"; import styles from "assets/jss/nextjs-material-kit/components/headerLinksStyle.js";


const useStyles = makeStyles(styles); const useStyles = makeStyles(styles);
@@ -54,16 +53,16 @@ export default function HeaderLinks(props) {
<Link href="/product/ygp"> <Link href="/product/ygp">
<a className={classes.dropdownLink}>YGP</a> <a className={classes.dropdownLink}>YGP</a>
</Link>, </Link>,
<Link href="/product">
<Link href="/product/yamalube">
<a className={classes.dropdownLink}>Yamalube</a> <a className={classes.dropdownLink}>Yamalube</a>
</Link>, </Link>,
<Link href="/product">
<Link href="/product/helmet">
<a className={classes.dropdownLink}>Helmet</a> <a className={classes.dropdownLink}>Helmet</a>
</Link>, </Link>,
<Link href="/product">
<Link href="/product/apparel">
<a className={classes.dropdownLink}>Apparel</a> <a className={classes.dropdownLink}>Apparel</a>
</Link>, </Link>,
<Link href="/product">
<Link href="/product/accessories">
<a className={classes.dropdownLink}>Accessories</a> <a className={classes.dropdownLink}>Accessories</a>
</Link>, </Link>,
<Link href="https://booking.thamrin.co.id/"> <Link href="https://booking.thamrin.co.id/">
@@ -154,4 +153,4 @@ export default function HeaderLinks(props) {
</ListItem> </ListItem>
</List> </List>
); );
}
}

+ 64
- 0
pages-sections/product/accessories.js Zobrazit soubor

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

import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
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 GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

const useStyles = makeStyles(styles);

const DataAccessories = function ({ backend, accessories, ...props }) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const ProductAccessories = accessories.map((data) => {
console.log(data);
return (
<div style={{padding:"40px"}}>
<img
alt="..."
style={{ height: "150px", display: "block" }}
src={`${backend}${data.img["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<Button
color="info" round
href={"/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
</div>
</div>
);
})
return (
<div>
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
<CardBody>
<div align="center" style={{marginTop:"-50px"}}>
<h2>Yamaha Accessories</h2>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductAccessories}
{ProductAccessories}
</GridContainer>
</div>
</CardBody>
</Card>
</div>
);
}

export default DataAccessories;

+ 0
- 0
pages-sections/product/accessories_details.js Zobrazit soubor


+ 64
- 0
pages-sections/product/apparel.js Zobrazit soubor

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

import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
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 GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

const useStyles = makeStyles(styles);

const DataApparel = function ({ backend, apparel, ...props }) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const ProductApparel = apparel.map((data) => {
return (
<div style={{padding:"40px"}}>
<img
alt="..."
style={{ height: "150px", display: "block" }}
src={`${backend}${data.img["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<Button
color="info" round
href={"/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
</div>
</div>
);
})
return (
<div>
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
<CardBody>
<div align="center" style={{marginTop:"-50px"}}>
<h2>Yamaha Apparel</h2>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductApparel}
{ProductApparel}
{ProductApparel}
</GridContainer>
</div>
</CardBody>
</Card>
</div>
);
}

export default DataApparel;

+ 0
- 0
pages-sections/product/apparel_details.js Zobrazit soubor


+ 62
- 0
pages-sections/product/helmet.js Zobrazit soubor

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

import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
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 GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

const useStyles = makeStyles(styles);

const DataHelmet = function ({ backend, helmet, ...props }) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const ProductHelmet = helmet.map((data) => {
return (
<div style={{padding:"40px"}}>
<img
alt="..."
style={{ height: "150px", display: "block" }}
src={`${backend}${data.img["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<Button
color="info" round
href={"/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
</div>
</div>
);
})
return (
<div>
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
<CardBody>
<div align="center" style={{marginTop:"-50px"}}>
<h2>Yamaha Helmet</h2>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductHelmet}{ProductHelmet}{ProductHelmet}
</GridContainer>
</div>
</CardBody>
</Card>
</div>
);
}

export default DataHelmet;

+ 0
- 0
pages-sections/product/helmet_details.js Zobrazit soubor


+ 1
- 1
pages-sections/product/product.js Zobrazit soubor

@@ -39,7 +39,7 @@ const DataProduct = function ({ backend, yamaha, suzuki, honda, hino, mercedes,
<h4>Rp.{data.price}</h4> <h4>Rp.{data.price}</h4>
<Button <Button
color="info" round color="info" round
href={"/product_detail?s="+data.id}
href={"/product/product_detail?s="+data.id}
> >
<Icon className={classes.icons}>open_in_new</Icon>Detail Product <Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button> </Button>


+ 62
- 0
pages-sections/product/yamalube.js Zobrazit soubor

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

import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
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 GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

const useStyles = makeStyles(styles);

const DataYamalube = function ({ backend, yamalube, ...props }) {
const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const ProductYamalube = yamalube.map((data) => {
return (
<div style={{padding:"40px"}}>
<img
alt="..."
style={{ height: "150px", display: "block" }}
src={`${backend}${data.img["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<Button
color="info" round
href={"/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
</div>
</div>
);
})
return (
<div>
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
<CardBody>
<div align="center" style={{marginTop:"-50px"}}>
<h2>Yamalube Oil</h2>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductYamalube}
</GridContainer>
</div>
</CardBody>
</Card>
</div>
);
}

export default DataYamalube;

+ 0
- 0
pages-sections/product/yamalube_details.js Zobrazit soubor


+ 39
- 6
pages-sections/product/ygp.js Zobrazit soubor

@@ -1,25 +1,58 @@
import React from "react"; import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";


import Button from "components/CustomButtons/Button.js";
import Icon from "@material-ui/core/Icon";
import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js"; import styles from "assets/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles.js";
import Card from "components/Card/Card.js"; import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js"; import CardBody from "components/Card/CardBody.js";
import CardHeader from "components/Card/CardHeader.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";


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


const DataYGP = function ({ backend, ygp, ...props }) { const DataYGP = function ({ backend, ygp, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props;
const imageClasses = classNames(
classes.imgRaised,
classes.imgRoundedCircle,
classes.imgFluid
);
const navImageClasses = classNames(classes.imgRounded, classes.imgGallery);
const ProductYGP = ygp.map((data) => {
return (
<div style={{padding:"40px"}}>
<img
alt="..."
style={{ height: "150px", display: "block" }}
src={`${backend}${data.img["url"]}`}
className={navImageClasses}
/>
<div align="center">
<h3>{data.name}</h3>
<h4>Rp.{data.price}</h4>
<Button
color="info" round
href={"/product_detail?s="+data.id}
>
<Icon className={classes.icons}>open_in_new</Icon>Detail Product
</Button>
</div>
</div>
);
})
return ( return (
<div> <div>
<Card className={classes.textCenter} align="center" style={{padding:"5px"}}> <Card className={classes.textCenter} align="center" style={{padding:"5px"}}>
<div align="center">
<CardHeader justify="center" color="info" style={{padding:"10px"}}>
<h2>Yamaha Geniue Part</h2>
</CardHeader>
</div>
<CardBody> <CardBody>
<div align="center" style={{marginTop:"-50px"}}>
<h2>Yamaha Geniue Part</h2> <h2>Yamaha Geniue Part</h2>
<GridContainer justify="center" style={{padding:"40px", marginTop:"-50px"}}>
{ProductYGP}{ProductYGP}
</GridContainer>
</div>
</CardBody> </CardBody>
</Card> </Card>
</div> </div>


+ 0
- 0
pages-sections/product/ygp_details.js Zobrazit soubor


+ 56
- 0
pages/product/accessories.js Zobrazit soubor

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

import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";

import GetDataAccessories from "../../api/product/accessories.js";
import DataAccessories from "../../pages-sections/product/accessories.js";
import DataSnackbarContent from "../../pages-sections/snackbar.js";

const useStyles = makeStyles(styles);

const Accessories = function ({ accessories, backend, ...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/yamalube.jpg")} height="200px"/>
<div className={classNames(classes.main, classes.mainRaised)}>
<DataSnackbarContent/>
<DataAccessories accessories={accessories} backend={backend} />
</div>
<Footer />
</div>
);
};

export default Accessories;

export async function getServerSideProps(context) {
var accessories = [];
const backend = process.env.BACKEND_SERVER_URI;
var res = await GetDataAccessories.GetAccessories();
if (res["STATUS"] === 1) {
accessories = res["DATA"]["accessories"];
}

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

+ 56
- 0
pages/product/apparel.js Zobrazit soubor

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

import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";

import GetDataApparel from "../../api/product/accessories.js";
import DataApparel from "../../pages-sections/product/apparel.js";
import DataSnackbarContent from "../../pages-sections/snackbar.js";

const useStyles = makeStyles(styles);

const Apparel = function ({ apparel, backend, ...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/yamalube.jpg")} height="200px"/>
<div className={classNames(classes.main, classes.mainRaised)}>
<DataSnackbarContent/>
<DataApparel apparel={apparel} backend={backend} />
</div>
<Footer />
</div>
);
};

export default Apparel;

export async function getServerSideProps(context) {
var apparel = [];
const backend = process.env.BACKEND_SERVER_URI;
var res = await GetDataApparel.GetApparel();
if (res["STATUS"] === 1) {
apparel = res["DATA"]["accessories"];
}

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

+ 56
- 0
pages/product/helmet.js Zobrazit soubor

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

import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";

import GetDataHelmet from "../../api/product/accessories.js";
import DataHelmet from "../../pages-sections/product/helmet.js";
import DataSnackbarContent from "../../pages-sections/snackbar.js";

const useStyles = makeStyles(styles);

const Helmet = function ({ helmet, backend, ...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/yamalube.jpg")} height="200px"/>
<div className={classNames(classes.main, classes.mainRaised)}>
<DataSnackbarContent/>
<DataHelmet helmet={helmet} backend={backend} />
</div>
<Footer />
</div>
);
};

export default Helmet;

export async function getServerSideProps(context) {
var helmet = [];
const backend = process.env.BACKEND_SERVER_URI;
var res = await GetDataHelmet.GetHelmet();
if (res["STATUS"] === 1) {
helmet = res["DATA"]["accessories"];
}

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

+ 58
- 0
pages/product/yamalube.js Zobrazit soubor

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

import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js";
import Parallax from "components/Parallax/Parallax.js";
import styles from "assets/jss/nextjs-material-kit/pages/components.js";

import GetDataYamalube from "../../api/product/accessories.js";
import DataYamalube from "../../pages-sections/product/yamalube.js";
import DataSnackbarContent from "../../pages-sections/snackbar.js";

const useStyles = makeStyles(styles);

const Yamalube = function ({ yamalube, backend, ...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/yamalube.jpg")} height="200px"/>
<div className={classNames(classes.main, classes.mainRaised)}>
<DataSnackbarContent/>
<DataYamalube yamalube={yamalube} backend={backend} />
</div>
<Footer />
</div>
);
};

export default Yamalube;

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

var res = await GetDataYamalube.GetYamalube();
console.log(res);

if (res["STATUS"] === 1) {
yamalube = res["DATA"]["accessories"];
}

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

+ 13
- 9
pages/product/ygp.js Zobrazit soubor

@@ -5,15 +5,16 @@ import { makeStyles } from "@material-ui/core/styles";
import Header from "components/Header/Header.js"; import Header from "components/Header/Header.js";
import HeaderLinks from "components/Header/HeaderLinks.js"; import HeaderLinks from "components/Header/HeaderLinks.js";
import Footer from "components/Footer/Footer.js"; import Footer from "components/Footer/Footer.js";
import DataYGP from "pages-sections/product/ygp.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 GetAccessories from "../../api/product/accessories.js";
import GetDataYGP from "../../api/product/accessories.js";
import DataYGP from "../../pages-sections/product/ygp.js";
import DataSnackbarContent from "../../pages-sections/snackbar.js";


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


const Product = function ({ backend, ygp, ...props }) {
const YGP = function ({ ygp, backend, ...props }) {
const classes = useStyles(); const classes = useStyles();
const { ...rest } = props; const { ...rest } = props;
return ( return (
@@ -28,27 +29,30 @@ const Product = function ({ backend, ygp, ...props }) {
}} }}
{...rest} {...rest}
/> />
<Parallax image={require("assets/img/Promotion_2-1.jpg")} width="200px"/>
<Parallax image={require("assets/img/yamalube.jpg")} height="200px"/>
<div className={classNames(classes.main, classes.mainRaised)}> <div className={classNames(classes.main, classes.mainRaised)}>
<DataYGP backend={backend} />
<DataSnackbarContent/>
<DataYGP ygp={ygp} backend={backend} />
</div> </div>
<Footer /> <Footer />
</div> </div>
); );
}; };


export default Product;
export default YGP;


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


var res = await GetAccessories.GetYGP();
var res = await GetDataYGP.GetYGP();
console.log(res);

if (res["STATUS"] === 1) { if (res["STATUS"] === 1) {
ygp = res["DATA"]["accessories"]; ygp = res["DATA"]["accessories"];
} }


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

Načítá se…
Zrušit
Uložit