54 | {children}
55 |
56 | );
57 | }
58 |
59 | export interface ParallaxProps {
60 | className: string,
61 | filter: boolean,
62 | children: Element|Element[],
63 | style: string,
64 | image: string,
65 | small: boolean,
66 | // this will add a min-height of 660px on small screens
67 | responsive: boolean
68 | };
69 |
--------------------------------------------------------------------------------
/styles/jss/nextjs-material-kit/pages/loginPage.ts:
--------------------------------------------------------------------------------
1 | import { container } from "../../nextjs-material-kit";
2 |
3 | const signupPageStyle = {
4 | container: {
5 | ...container,
6 | zIndex: "2",
7 | position: "relative",
8 | paddingTop: "20vh",
9 | color: "#FFFFFF",
10 | paddingBottom: "200px"
11 | },
12 | cardHidden: {
13 | opacity: "0",
14 | transform: "translate3d(0, -60px, 0)"
15 | },
16 | pageHeader: {
17 | minHeight: "100vh",
18 | height: "auto",
19 | display: "inherit",
20 | position: "relative",
21 | margin: "0",
22 | padding: "0",
23 | border: "0",
24 | alignItems: "center",
25 | "&:before": {
26 | background: "rgba(0, 0, 0, 0.5)"
27 | },
28 | "&:before,&:after": {
29 | position: "absolute",
30 | zIndex: "1",
31 | width: "100%",
32 | height: "100%",
33 | display: "block",
34 | left: "0",
35 | top: "0",
36 | content: '""'
37 | },
38 | "& footer li a,& footer li a:hover,& footer li a:active": {
39 | color: "#FFFFFF"
40 | },
41 | "& footer": {
42 | position: "absolute",
43 | bottom: "0",
44 | width: "100%"
45 | }
46 | },
47 | form: {
48 | margin: "0"
49 | },
50 | cardHeader: {
51 | width: "auto",
52 | textAlign: "center",
53 | marginLeft: "20px",
54 | marginRight: "20px",
55 | marginTop: "-40px",
56 | padding: "20px 0",
57 | marginBottom: "15px"
58 | },
59 | socialIcons: {
60 | maxWidth: "24px",
61 | marginTop: "0",
62 | width: "100%",
63 | transform: "none",
64 | left: "0",
65 | top: "0",
66 | height: "100%",
67 | lineHeight: "41px",
68 | fontSize: "20px"
69 | },
70 | divider: {
71 | marginTop: "30px",
72 | marginBottom: "0px",
73 | textAlign: "center"
74 | },
75 | cardFooter: {
76 | paddingTop: "0rem",
77 | border: "0",
78 | borderRadius: "6px",
79 | justifyContent: "center !important"
80 | },
81 | socialLine: {
82 | marginTop: "1rem",
83 | textAlign: "center",
84 | padding: "0"
85 | },
86 | inputIconsColor: {
87 | color: "#495057"
88 | }
89 | };
90 |
91 | export default signupPageStyle;
92 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "next-material-kit",
3 | "version": "1.2.1",
4 | "description": "NextJS Version of Material Kit React by Creative Tim (https://creative-tim.com)",
5 | "scripts": {
6 | "test": "echo \"Error: no test specified\" && exit 1",
7 | "dev": "next dev",
8 | "build": "next build",
9 | "start": "next start",
10 | "export": "next export",
11 | "install:clean": "rm -rf node_modules/ && rm -rf package-lock.json && rm -rf .next/ && npm install && npm run dev"
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "git+https://github.com/creativetimofficial/nextjs-material-kit.git"
16 | },
17 | "keywords": [
18 | "next",
19 | "nextjs",
20 | "react",
21 | "reactjs",
22 | "npx",
23 | "material",
24 | "material-design",
25 | "material-kit",
26 | "material-kit-react",
27 | "next-material-kit"
28 | ],
29 | "author": "Creative Tim",
30 | "license": "MIT",
31 | "bugs": {
32 | "url": "https://github.com/creativetimofficial/nextjs-material-kit/issues"
33 | },
34 | "homepage": "https://demos.creative-tim.com/nextjs-material-kit",
35 | "dependencies": {
36 | "@material-ui/core": "^4.12.4",
37 | "@material-ui/icons": "^4.11.3",
38 | "@mdx-js/loader": "^2.0.0-rc.2",
39 | "@mdx-js/react": "^2.0.0-rc.2",
40 | "@reach/disclosure": "^0.17.0",
41 | "@reach/tooltip": "^0.17.0",
42 | "@types/glob": "^8.0.0",
43 | "classnames": "^2.3.2",
44 | "glob": "^8.0.3",
45 | "gray-matter": "^4.0.3",
46 | "moment": "^2.29.4",
47 | "next": "^12.3.0",
48 | "next-mdx-remote": "^4.1.0",
49 | "nouislider": "^15.6.1",
50 | "react": "^18.2.0",
51 | "react-datetime": "^3.1.1",
52 | "react-dom": "^18.2.0",
53 | "react-slick": "^0.29.0",
54 | "rehype-highlight": "^5.0.2",
55 | "remark-frontmatter": "^4.0.1",
56 | "sass": "^1.54.9",
57 | "styled-components": "^5.3.5",
58 | "webpack": "^5.74.0"
59 | },
60 | "peerDependencies": {
61 | "react": ">=16.0.0",
62 | "react-dom": ">=16.0.0"
63 | },
64 | "devDependencies": {
65 | "@types/node": "^18.7.17",
66 | "@types/react": "^18.0.19",
67 | "prettier": "^2.7.1",
68 | "typescript": "^4.8.3"
69 | }
70 | }
71 |
--------------------------------------------------------------------------------
/pages-sections/Components-Sections/SectionNotifications.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // @material-ui/core components
3 | import { makeStyles } from "@material-ui/core/styles";
4 | // @material-ui/icons
5 | import Check from "@material-ui/icons/Check";
6 | import Warning from "@material-ui/icons/Warning";
7 | // core components
8 | import SnackbarContent from "../../components/Snackbar/SnackbarContent";
9 | import Clearfix from "../../components/Clearfix/Clearfix";
10 |
11 | import styles from "../../styles/jss/nextjs-material-kit/pages/componentsSections/notificationsStyles";
12 |
13 | const useStyles = makeStyles(styles);
14 |
15 | export default function SectionNotifications() {
16 | const classes = useStyles();
17 | return (
18 |
19 |
27 | INFO ALERT: You{"'"}ve got some friends nearby, stop looking
28 | at your phone and find them...
29 |
30 | }
31 | close
32 | color="info"
33 | icon="info_outline"
34 | />
35 |
38 | SUCCESS ALERT: You{"'"}ve got some friends nearby, stop
39 | looking at your phone and find them...
40 |
41 | }
42 | close
43 | color="success"
44 | icon={Check}
45 | />
46 |
49 | WARNING ALERT: You{"'"}ve got some friends nearby, stop
50 | looking at your phone and find them...
51 |
52 | }
53 | close
54 | color="warning"
55 | icon={Warning}
56 | />
57 |
60 | DANGER ALERT: You{"'"}ve got some friends nearby, stop
61 | looking at your phone and find them...
62 |
63 | }
64 | close
65 | color="danger"
66 | icon="info_outline"
67 | />
68 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/pages-sections/Components-Sections/SectionExamples.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // react components for routing our app without refresh
3 | import Link from "next/link";
4 | // @material-ui/core components
5 | import { makeStyles } from "@material-ui/core/styles";
6 | // @material-ui/icons
7 |
8 | // core components
9 | import GridContainer from "../../components/Grid/GridContainer";
10 | import GridItem from "../../components/Grid/GridItem";
11 | import Button from "../../components/CustomButtons/Button";
12 |
13 | import styles from "../../styles/jss/nextjs-material-kit/pages/componentsSections/exampleStyle";
14 |
15 | const useStyles = makeStyles(styles);
16 |
17 | export default function SectionExamples() {
18 | const classes = useStyles();
19 | return (
20 |
20 |
24 |
21 |
23 | Notifications
22 |
21 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/styles/scss/core/_misc.scss:
--------------------------------------------------------------------------------
1 | html * {
2 | -webkit-font-smoothing: antialiased;
3 | -moz-osx-font-smoothing: grayscale;
4 | }
5 | body {
6 | font-size: 1rem;
7 | }
8 | body,
9 | h1,
10 | h2,
11 | h3,
12 | h4,
13 | h5,
14 | h6 {
15 | font-family: "Roboto", "Helvetica", "Arial", sans-serif;
16 | font-weight: 300;
17 | line-height: 1.5em;
18 | }
19 | h1,
20 | h2,
21 | h3,
22 | h4,
23 | h5,
24 | h6 {
25 | color: inherit;
26 | }
27 | h1,
28 | h2,
29 | h3 {
30 | margin-top: 20px;
31 | margin-bottom: 10px;
32 | }
33 | h4,
34 | h5,
35 | h6 {
36 | margin-top: 10px;
37 | margin-bottom: 10px;
38 | }
39 | h1 {
40 | font-size: 3.3125rem;
41 | line-height: 1.15em;
42 | }
43 | h2 {
44 | font-size: 2.25rem;
45 | line-height: 1.5em;
46 | }
47 | h3 {
48 | font-size: 1.5625rem;
49 | line-height: 1.4em;
50 | }
51 | h4 {
52 | font-size: 1.125rem;
53 | line-height: 1.5em;
54 | }
55 | h5 {
56 | font-size: 1.0625rem;
57 | line-height: 1.55em;
58 | }
59 | h6 {
60 | font-size: 0.75rem;
61 | text-transform: uppercase;
62 | font-weight: 500;
63 | }
64 | p {
65 | font-size: 14px;
66 | margin: 0 0 10px;
67 | }
68 | html {
69 | font-family: sans-serif;
70 | line-height: 1.15;
71 | -webkit-text-size-adjust: 100%;
72 | -ms-text-size-adjust: 100%;
73 | -ms-overflow-style: scrollbar;
74 | -webkit-tap-highlight-color: transparent;
75 | }
76 | body {
77 | background-color: #e5e5e5;
78 | color: $black-color;
79 | margin: 0;
80 | font-size: 1rem;
81 | text-align: left;
82 | }
83 |
84 | legend {
85 | border-bottom: 0;
86 | }
87 |
88 | // Prevent highlight on mobile
89 | * {
90 | -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
91 | -webkit-tap-highlight-color: transparent;
92 | box-sizing: border-box;
93 | &:focus {
94 | outline: 0;
95 | }
96 | }
97 |
98 | a {
99 | color: $link-color;
100 | text-decoration: none;
101 | background-color: transparent;
102 | &:hover,
103 | &:focus {
104 | color: darken($link-color, 5%);
105 | text-decoration: none;
106 | }
107 | }
108 |
109 | label {
110 | font-size: 14px;
111 | line-height: 1.42857;
112 | color: $checkboxes-text-color;
113 | font-weight: 400;
114 | }
115 | small {
116 | font-size: 75%;
117 | color: #777;
118 | font-weight: 400;
119 | }
120 | img {
121 | vertical-align: middle;
122 | border-style: none;
123 | }
124 | form {
125 | margin-bottom: 1.125rem;
126 | }
127 |
--------------------------------------------------------------------------------
/pages/_document.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Document, { Html, Head, Main, NextScript } from "next/document";
3 | import { ServerStyleSheets } from "@material-ui/styles";
4 |
5 | class MyDocument extends Document {
6 | render() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
18 | {/* Fonts and icons */}
19 |
24 |
28 |
29 |
30 |
31 |
32 |
22 |
23 |
24 |
25 |
26 | 
37 |
40 |
41 |
42 |
43 |
44 |
45 |
46 | 
57 |
60 |
61 |
62 |
63 |
64 |
65 |
37 |
40 |
41 |
42 |
57 |
60 |
61 |
62 |
21 |
22 |
23 |
68 |
69 |
70 | );
71 | }
72 |
--------------------------------------------------------------------------------
/components/CustomInput/CustomInput.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from "react";
2 | // nodejs library to set properties for components
3 | // nodejs library that concatenates classes
4 | import classNames from "classnames";
5 | // @material-ui/core components
6 | import { makeStyles } from "@material-ui/core/styles";
7 | import FormControl from "@material-ui/core/FormControl";
8 | import InputLabel from "@material-ui/core/InputLabel";
9 | import Input from "@material-ui/core/Input";
10 |
11 | import styles from "../../styles/jss/nextjs-material-kit/components/customInputStyle";
12 |
13 | const useStyles = makeStyles(styles);
14 |
15 | export default function CustomInput(props: CustomInputProps) {
16 | const classes = useStyles();
17 | const {
18 | formControlProps,
19 | labelText,
20 | id,
21 | labelProps,
22 | inputProps,
23 | error,
24 | white,
25 | inputRootCustomClasses,
26 | success
27 | } = props;
28 |
29 | const labelClasses = classNames({
30 | [" " + classes.labelRootError]: error,
31 | [" " + classes.labelRootSuccess]: success && !error
32 | });
33 | const underlineClasses = classNames({
34 | [classes.underlineError]: error,
35 | [classes.underlineSuccess]: success && !error,
36 | [classes.underline]: true,
37 | [classes.whiteUnderline]: white
38 | });
39 | const marginTop = classNames({
40 | [inputRootCustomClasses]: inputRootCustomClasses !== undefined
41 | });
42 | const inputClasses = classNames({
43 | [classes.input]: true,
44 | [classes.whiteInput]: white
45 | });
46 | var formControlClasses;
47 | if (formControlProps !== undefined) {
48 | formControlClasses = classNames(
49 | formControlProps.className,
50 | classes.formControl
51 | );
52 | } else {
53 | formControlClasses = classes.formControl;
54 | }
55 | return (
56 | Work with us
24 |25 | Divide details about your product or agency work into parts. Write a 26 | few lines about each one and contact us about any further 27 | collaboration. We will responde get back to you in a couple of 28 | hours. 29 |
30 | 67 |
22 |
23 |
24 |
33 |
34 |
66 | );
67 | }
68 |
--------------------------------------------------------------------------------
/pages-sections/Components-Sections/SectionCarousel.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // react component for creating beautiful carousel
3 | import Carousel from "react-slick";
4 | // @material-ui/core components
5 | import { makeStyles } from "@material-ui/core/styles";
6 | // @material-ui/icons
7 | import LocationOn from "@material-ui/icons/LocationOn";
8 | // core components
9 | import GridContainer from "../../components/Grid/GridContainer";
10 | import GridItem from "../../components/Grid/GridItem";
11 | import Card from "../../components/Card/Card";
12 |
13 | import styles from "../../styles/jss/nextjs-material-kit/pages/componentsSections/carouselStyle";
14 |
15 | const useStyles = makeStyles(styles);
16 |
17 | export default function SectionCarousel() {
18 | const classes = useStyles();
19 | const settings = {
20 | dots: true,
21 | infinite: true,
22 | speed: 500,
23 | slidesToShow: 1,
24 | slidesToScroll: 1,
25 | autoplay: false
26 | };
27 | return (
28 | Let{"'"}s talk product
25 |26 | This is the paragraph where you can write more details about your 27 | product. Keep you user engaged by providing meaningful information. 28 | Remember that by this time, the user is curious, otherwise he wouldn 29 | {"'"}t scroll to get here. Add a button if you want the user to see 30 | more. 31 |
32 |
35 |
36 |
37 |
45 |
46 |
54 |
55 |
63 |
64 |
65 |
29 |
79 | );
80 | }
81 |
--------------------------------------------------------------------------------
/pages/landing.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library that concatenates classes
3 | import classNames from "classnames";
4 | // @material-ui/core components
5 | import { makeStyles } from "@material-ui/core/styles";
6 |
7 | // @material-ui/icons
8 |
9 | // core components
10 | import Header from "../components/Header/Header";
11 | import Footer from "../components/Footer/Footer";
12 | import GridContainer from "../components/Grid/GridContainer";
13 | import GridItem from "../components/Grid/GridItem";
14 | import Button from "../components/CustomButtons/Button";
15 | import HeaderLinks from "../components/Header/HeaderLinks";
16 | import Parallax from "../components/Parallax/Parallax";
17 |
18 | import styles from "../styles/jss/nextjs-material-kit/pages/landingPage";
19 |
20 | // Sections for this page
21 | import ProductSection from "../pages-sections/LandingPage-Sections/ProductSection";
22 | import TeamSection from "../pages-sections/LandingPage-Sections/TeamSection";
23 | import WorkSection from "../pages-sections/LandingPage-Sections/WorkSection";
24 |
25 | const dashboardRoutes = [];
26 |
27 | const useStyles = makeStyles(styles);
28 |
29 | export default function LandingPage(props) {
30 | const classes = useStyles();
31 | const { ...rest } = props;
32 | return (
33 |
30 |
31 |
32 |
33 |
34 |
74 |
75 |
76 |
77 |
78 |
35 | 
40 |
47 |
40 |
41 |
42 |
45 |
46 |
42 |
45 |
48 | 
53 |
60 |
53 |
54 |
55 |
58 |
59 |
55 |
58 |
61 | 
66 |
73 |
66 |
67 |
68 |
71 |
72 |
68 |
71 |
34 |
47 |
72 |
81 | );
82 | }
83 |
--------------------------------------------------------------------------------
/styles/scss/core/variables/_functions.scss:
--------------------------------------------------------------------------------
1 | // Bootstrap functions
2 | //
3 | // Utility mixins and functions for evalutating source code across our variables, maps, and mixins.
4 |
5 | // Ascending
6 | // Used to evaluate Sass maps like our grid breakpoints.
7 | @mixin _assert-ascending($map, $map-name) {
8 | $prev-key: null;
9 | $prev-num: null;
10 | @each $key, $num in $map {
11 | @if $prev-num == null {
12 | // Do nothing
13 | } @else if not comparable($prev-num, $num) {
14 | @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
15 | } @else if $prev-num >= $num {
16 | @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
17 | }
18 | $prev-key: $key;
19 | $prev-num: $num;
20 | }
21 | }
22 |
23 | // Starts at zero
24 | // Another grid mixin that ensures the min-width of the lowest breakpoint starts at 0.
25 | @mixin _assert-starts-at-zero($map) {
26 | $values: map-values($map);
27 | $first-value: nth($values, 1);
28 | @if $first-value != 0 {
29 | @warn "First breakpoint in `$grid-breakpoints` must start at 0, but starts at #{$first-value}.";
30 | }
31 | }
32 |
33 | // Replace `$search` with `$replace` in `$string`
34 | // Used on our SVG icon backgrounds for custom forms.
35 | //
36 | // @author Hugo Giraudel
37 | // @param {String} $string - Initial string
38 | // @param {String} $search - Substring to replace
39 | // @param {String} $replace ('') - New value
40 | // @return {String} - Updated string
41 | @function str-replace($string, $search, $replace: "") {
42 | $index: str-index($string, $search);
43 |
44 | @if $index {
45 | @return str-slice($string, 1, $index - 1) + $replace +
46 | str-replace(
47 | str-slice($string, $index + str-length($search)),
48 | $search,
49 | $replace
50 | );
51 | }
52 |
53 | @return $string;
54 | }
55 |
56 | // Color contrast
57 | @function color-yiq($color) {
58 | $r: red($color);
59 | $g: green($color);
60 | $b: blue($color);
61 |
62 | $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
63 |
64 | @if ($yiq >= $yiq-contrasted-threshold) {
65 | @return $yiq-text-dark;
66 | } @else {
67 | @return $yiq-text-light;
68 | }
69 | }
70 |
71 | // Retrieve color Sass maps
72 | @function color($key: "blue") {
73 | @return map-get($colors, $key);
74 | }
75 |
76 | @function theme-color($key: "primary") {
77 | @return map-get($theme-colors, $key);
78 | }
79 |
80 | @function gray($key: "100") {
81 | @return map-get($grays, $key);
82 | }
83 |
84 | // Request a theme color level
85 | @function theme-color-level($color-name: "primary", $level: 0) {
86 | $color: theme-color($color-name);
87 | $color-base: if($level > 0, #000, #fff);
88 | $level: abs($level);
89 |
90 | @return mix($color-base, $color, $level * $theme-color-interval);
91 | }
92 |
--------------------------------------------------------------------------------
/components/Footer/Footer.tsx:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | import React from "react";
3 | // nodejs library to set properties for components
4 | // nodejs library that concatenates classes
5 | import classNames from "classnames";
6 | // material-ui core components
7 | import { List, ListItem } from "@material-ui/core";
8 | import { makeStyles } from "@material-ui/core/styles";
9 |
10 | // @material-ui/icons
11 | import Favorite from "@material-ui/icons/Favorite";
12 |
13 | import styles from "../../styles/jss/nextjs-material-kit/components/footerStyle";
14 |
15 | const useStyles = makeStyles(styles);
16 |
17 | export default function Footer(props: FooterProps) {
18 | const classes = useStyles();
19 | const { whiteFont } = props;
20 | const footerClasses = classNames({
21 | [classes.footer]: true,
22 | [classes.footerWhiteFont]: whiteFont
23 | });
24 | const aClasses = classNames({
25 | [classes.a]: true,
26 | [classes.footerWhiteFont]: whiteFont
27 | });
28 | return (
29 |
85 | );
86 | }
87 |
88 | export interface FooterProps {
89 | whiteFont?: boolean
90 | };
91 |
--------------------------------------------------------------------------------
/components/CustomTabs/CustomTabs.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from "react";
2 | // nodejs library that concatenates classes
3 | import classNames from "classnames";
4 | // nodejs library to set properties for components
5 |
6 | // material-ui components
7 | import { makeStyles } from "@material-ui/core/styles";
8 | import Tabs from "@material-ui/core/Tabs";
9 | import Tab from "@material-ui/core/Tab";
10 | import Icon from "@material-ui/core/Icon";
11 | // core components
12 | import Card from "../Card/Card";
13 | import CardBody from "../Card/CardBody";
14 | import CardHeader from "../Card/CardHeader";
15 |
16 | import styles from "../../styles/jss/nextjs-material-kit/components/customTabsStyle";
17 |
18 | const useStyles = makeStyles(styles);
19 |
20 | export default function CustomTabs(props: CustomTabsProps) {
21 | const [value, setValue] = React.useState(0);
22 |
23 | const handleChange = (event, value) => {
24 | setValue(value);
25 | };
26 | const classes = useStyles();
27 | const { headerColor, plainTabs, tabs, title, rtlActive } = props;
28 | const cardTitle = classNames({
29 | [classes.cardTitle]: true,
30 | [classes.cardTitleRTL]: rtlActive,
31 | });
32 | return (
33 |
48 |
49 |
50 |
58 | 68 |
69 |
70 |
71 | Your Story Starts With Us.
51 |52 | Every landing page needs a small description after the big bold 53 | title, that{"'"}s why we added this text here. Add here all the 54 | information that can make you or your product create the first 55 | impression. 56 |
57 |58 | 68 |
73 |
79 |
80 |
74 |
78 | {title}
: null}
36 | {prop.tabContent}
;
77 | }
78 | return null;
79 | })}
80 |
81 |
27 |
34 |
48 |
63 | );
64 | };
65 |
66 | const getStaticPaths = async () => {
67 | const files = fs.readdirSync(path.join("blog"));
68 | const paths = files.map((filename) => ({
69 | params: {
70 | slug: filename.replace(".mdx", ""),
71 | },
72 | }));
73 | return {
74 | paths,
75 | fallback: false,
76 | };
77 | };
78 |
79 | const getStaticProps = async ({ params: { slug } }) => {
80 | const markdownWithMeta = fs.readFileSync(
81 | path.join("blog/", slug + ".mdx"),
82 | "utf-8"
83 | );
84 |
85 | const { data: frontMatter, content } = matter(markdownWithMeta);
86 | const mdxSource = await serialize(content);
87 |
88 | return {
89 | props: {
90 | mdxSource,
91 | frontMatter: {
92 | ...frontMatter,
93 | published: new Date(frontMatter.published).toDateString(),
94 | },
95 | },
96 | };
97 | };
98 |
99 | export { getStaticProps, getStaticPaths };
100 | export default PostPage;
101 |
--------------------------------------------------------------------------------
/styles/jss/nextjs-material-kit/components/headerLinksStyle.ts:
--------------------------------------------------------------------------------
1 | import { defaultFont
2 | } from "../../nextjs-material-kit";
3 |
4 | import tooltip from "../../nextjs-material-kit/tooltipsStyle";
5 |
6 | const headerLinksStyle = (theme) => ({
7 | list: {
8 | ...defaultFont,
9 | fontSize: "14px",
10 | margin: 0,
11 | paddingLeft: "0",
12 | listStyle: "none",
13 | paddingTop: "0",
14 | paddingBottom: "0",
15 | color: "inherit"
16 | },
17 | listItem: {
18 | float: "left",
19 | color: "inherit",
20 | position: "relative",
21 | display: "block",
22 | width: "auto",
23 | margin: "0",
24 | padding: "0",
25 | [theme.breakpoints.down("sm")]: {
26 | width: "100%",
27 | "&:after": {
28 | width: "calc(100% - 30px)",
29 | content: '""',
30 | display: "block",
31 | height: "1px",
32 | marginLeft: "15px",
33 | backgroundColor: "#e5e5e5"
34 | }
35 | }
36 | },
37 | listItemText: {
38 | padding: "0 !important"
39 | },
40 | navLink: {
41 | color: "inherit",
42 | position: "relative",
43 | padding: "0.9375rem",
44 | fontWeight: "400",
45 | fontSize: "12px",
46 | textTransform: "uppercase",
47 | borderRadius: "3px",
48 | lineHeight: "20px",
49 | textDecoration: "none",
50 | margin: "0px",
51 | display: "inline-flex",
52 | "&:hover,&:focus": {
53 | color: "inherit",
54 | background: "rgba(200, 200, 200, 0.2)"
55 | },
56 | [theme.breakpoints.down("sm")]: {
57 | width: "calc(100% - 30px)",
58 | marginLeft: "15px",
59 | marginBottom: "8px",
60 | marginTop: "8px",
61 | textAlign: "left",
62 | "& > span:first-child": {
63 | justifyContent: "flex-start"
64 | }
65 | }
66 | },
67 | notificationNavLink: {
68 | [theme.breakpoints.down("md")]: {
69 | top: "0",
70 | margin: "5px 15px"
71 | },
72 | color: "#FFF",
73 | padding: "0.9375rem",
74 | fontWeight: "400",
75 | fontSize: "12px",
76 | textTransform: "uppercase",
77 | lineHeight: "20px",
78 | textDecoration: "none",
79 | margin: "0px",
80 | display: "inline-flex",
81 | top: "4px"
82 | },
83 | registerNavLink: {
84 | [theme.breakpoints.down("md")]: {
85 | top: "0",
86 | margin: "5px 15px"
87 | },
88 | top: "3px",
89 | position: "relative",
90 | fontWeight: "400",
91 | fontSize: "12px",
92 | textTransform: "uppercase",
93 | lineHeight: "20px",
94 | textDecoration: "none",
95 | margin: "0px",
96 | display: "inline-flex"
97 | },
98 | navLinkActive: {
99 | color: "inherit",
100 | backgroundColor: "rgba(255, 255, 255, 0.1)"
101 | },
102 | icons: {
103 | width: "20px",
104 | height: "20px",
105 | marginRight: "3px"
106 | },
107 | socialIcons: {
108 | position: "relative",
109 | fontSize: "20px !important",
110 | marginRight: "4px"
111 | },
112 | dropdownLink: {
113 | "&,&:hover,&:focus": {
114 | color: "inherit",
115 | textDecoration: "none",
116 | display: "block",
117 | padding: "10px 20px"
118 | }
119 | },
120 | ...tooltip,
121 | marginRight5: {
122 | marginRight: "5px"
123 | }
124 | });
125 |
126 | export default headerLinksStyle;
127 |
--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | /*!
2 |
3 | =========================================================
4 | * NextJS Material Kit v1.2.1 based on Material Kit Free - v2.0.2 (Bootstrap 4.0.0 Final Edition) and Material Kit React v1.8.0
5 | =========================================================
6 |
7 | * Product Page: https://www.creative-tim.com/product/nextjs-material-kit
8 | * Copyright 2022 Creative Tim (https://www.creative-tim.com)
9 | * Licensed under MIT (https://github.com/creativetimofficial/nextjs-material-kit/blob/main/LICENSE.md)
10 |
11 | * Coded by Creative Tim
12 |
13 | =========================================================
14 |
15 | * The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
16 |
17 | */
18 | import React from "react";
19 | import ReactDOM from "react-dom";
20 | import App from "next/app";
21 | import Head from "next/head";
22 | import Router from "next/router";
23 |
24 | import PageChange from "../components/PageChange/PageChange";
25 |
26 | import "/styles/scss/nextjs-material-kit.scss?v=1.2.0";
27 |
28 | Router.events.on("routeChangeStart", (url) => {
29 | console.log(`Loading: ${url}`);
30 | document.body.classList.add("body-page-transition");
31 | ReactDOM.render(
32 |
35 |
36 |
37 |
45 |
46 |
47 |
38 | {frontMatter.published}
40 |
41 | {frontMatter.description}
42 |
43 |
44 | {frontMatter.title}
39 |
49 |
54 |
61 |
62 |
55 |
60 |
43 |
54 |
64 |
80 | );
81 | }
82 |
83 | export const getStaticProps = async () => {
84 | const articles: PostType[] = await getAllArticles();
85 |
86 | articles
87 | .map((post) => post)
88 | .sort((a, b) => {
89 | if (a.published > b.published) return 1;
90 | if (a.published < b.published) return -1;
91 |
92 | return 0;
93 | });
94 |
95 | const posts = articles.map((post) => {
96 | return {
97 | ...post,
98 | published: new Date(post.published).toDateString(),
99 | };
100 | });
101 |
102 | return {
103 | props: {
104 | posts,
105 | },
106 | };
107 | };
108 |
--------------------------------------------------------------------------------
/components/NavPills/NavPills.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode } from "react";
2 | // nodejs library that concatenates classes
3 | import classNames from "classnames";
4 | // nodejs library to set properties for components
5 |
6 | // @material-ui/core components
7 | import { makeStyles } from "@material-ui/core/styles";
8 | import Tabs from "@material-ui/core/Tabs";
9 | import Tab from "@material-ui/core/Tab";
10 |
11 | // core components
12 | import GridContainer from "../Grid/GridContainer";
13 | import GridItem from "../Grid/GridItem";
14 |
15 | import styles from "../../styles/jss/nextjs-material-kit/components/navPillsStyle";
16 |
17 | const useStyles = makeStyles(styles);
18 |
19 | export default function NavPills(props: NavPillsProps) {
20 | const [active, setActive] = React.useState
55 |
56 |
57 |
61 |
62 |
63 |
58 |
60 | NextJS Blog.
59 |
65 |
66 |
67 |
76 |
77 |
78 |
79 |
68 | {filteredPosts.map((post, index) => (
69 |
72 |
75 |
72 | {tabs.map((prop, key) => {
73 | if (key !== active) {
74 | return null;
75 | } else {
76 | return (
77 |
84 | );
85 | return horizontal !== undefined ? (
86 |
78 | {prop.tabContent}
79 |
80 | );
81 | }
82 | })}
83 |
92 | {tabButtons}
93 | {tabContent}
94 |
95 | );
96 | }
97 |
98 | export interface NavPillsProps {
99 | // index of the default active pill
100 | active?: number;
101 | tabs: {
102 | tabButton: string;
103 | tabIcon: any;
104 | tabContent: ReactNode;
105 | }[];
106 | color?:
107 | | "primary"
108 | | "warning"
109 | | "danger"
110 | | "success"
111 | | "info"
112 | | "rose";
113 | horizontal?: {
114 | tabsGrid: any;
115 | contentGrid: any;
116 | },
117 | alignCenter?: boolean
118 | };
119 |
--------------------------------------------------------------------------------
/pages/components.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | // nodejs library that concatenates classes
3 | import classNames from "classnames";
4 | // react components for routing our app without refresh
5 | import Link from "next/link";
6 | // @material-ui/core components
7 | import { makeStyles } from "@material-ui/core/styles";
8 | // @material-ui/icons
9 | // core components
10 | import Header from "../components/Header/Header";
11 | import HeaderLinks from "../components/Header/HeaderLinks";
12 | import Footer from "../components/Footer/Footer";
13 | import GridContainer from "../components/Grid/GridContainer";
14 | import GridItem from "../components/Grid/GridItem";
15 | import Button from "../components/CustomButtons/Button";
16 | import Parallax from "../components/Parallax/Parallax";
17 | // sections for this page
18 | import SectionNavbars from "../pages-sections/Components-Sections/SectionNavbars";
19 | import SectionBasics from "../pages-sections/Components-Sections/SectionBasics";
20 | import SectionTabs from "../pages-sections/Components-Sections/SectionTabs";
21 | import SectionPills from "../pages-sections/Components-Sections/SectionPills";
22 | import SectionNotifications from "../pages-sections/Components-Sections/SectionNotifications";
23 | import SectionTypography from "../pages-sections/Components-Sections/SectionTypography";
24 | import SectionJavascript from "../pages-sections/Components-Sections/SectionJavascript";
25 | import SectionCarousel from "../pages-sections/Components-Sections/SectionCarousel";
26 | import SectionCompletedExamples from "../pages-sections/Components-Sections/SectionCompletedExamples";
27 | import SectionLogin from "../pages-sections/Components-Sections/SectionLogin";
28 | import SectionExamples from "../pages-sections/Components-Sections/SectionExamples";
29 | import SectionDownload from "../pages-sections/Components-Sections/SectionDownload";
30 |
31 | import styles from "../styles/jss/nextjs-material-kit/pages/components";
32 |
33 | const useStyles = makeStyles(styles);
34 |
35 | export default function Components(props) {
36 | const classes = useStyles();
37 | const { ...rest } = props;
38 | return (
39 |
40 |
52 |
65 |
66 |
89 |
90 |
91 | );
92 | }
93 |
--------------------------------------------------------------------------------
/styles/jss/nextjs-material-kit/components/navPillsStyle.ts:
--------------------------------------------------------------------------------
1 | import {
2 | hexToRGBAlpha,
3 | roseColor,
4 | primaryColor,
5 | infoColor,
6 | successColor,
7 | warningColor,
8 | dangerColor
9 | } from "../../nextjs-material-kit";
10 |
11 | const navPillsStyle = (theme) => ({
12 | root: {
13 | marginTop: "20px",
14 | paddingLeft: "0",
15 | marginBottom: "0",
16 | overflow: "visible !important",
17 | lineHeight: "24px",
18 | textTransform: "uppercase",
19 | fontSize: "12px",
20 | fontWeight: "500",
21 | position: "relative",
22 | display: "block",
23 | color: "inherit"
24 | },
25 | flexContainer: {
26 | [theme.breakpoints.down("xs")]: {
27 | display: "flex",
28 | flexWrap: "wrap"
29 | }
30 | },
31 | displayNone: {
32 | display: "none !important"
33 | },
34 | fixed: {
35 | overflow: "visible !important"
36 | },
37 | horizontalDisplay: {
38 | display: "block"
39 | },
40 | pills: {
41 | float: "left",
42 | position: "relative",
43 | display: "block",
44 | borderRadius: "30px",
45 | minWidth: "100px",
46 | textAlign: "center",
47 | transition: "all .3s",
48 | padding: "10px 15px",
49 | color: "#555555",
50 | height: "auto",
51 | opacity: "1",
52 | maxWidth: "100%",
53 | margin: "0 5px"
54 | },
55 | pillsWithIcons: {
56 | borderRadius: "4px"
57 | },
58 | tabIcon: {
59 | width: "30px",
60 | height: "30px",
61 | display: "block",
62 | margin: "15px 0 !important",
63 | "&, & *": {
64 | letterSpacing: "normal !important"
65 | }
66 | },
67 | horizontalPills: {
68 | width: "100%",
69 | float: "none !important",
70 | "& + button": {
71 | margin: "10px 0"
72 | }
73 | },
74 | contentWrapper: {
75 | marginTop: "20px"
76 | },
77 | primary: {
78 | "&,&:hover": {
79 | color: "#FFFFFF",
80 | backgroundColor: primaryColor,
81 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
82 | primaryColor,
83 | 0.4
84 | )}`
85 | }
86 | },
87 | info: {
88 | "&,&:hover": {
89 | color: "#FFFFFF",
90 | backgroundColor: infoColor,
91 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
92 | infoColor,
93 | 0.4
94 | )}`
95 | }
96 | },
97 | success: {
98 | "&,&:hover": {
99 | color: "#FFFFFF",
100 | backgroundColor: successColor,
101 | boxShadow: `0 2px 2px 0 ${hexToRGBAlpha(
102 | successColor,
103 | 0.14
104 | )}, 0 3px 1px -2px ${hexToRGBAlpha(
105 | successColor,
106 | 0.2
107 | )}, 0 1px 5px 0 ${hexToRGBAlpha(successColor, 0.12)}`
108 | }
109 | },
110 | warning: {
111 | "&,&:hover": {
112 | color: "#FFFFFF",
113 | backgroundColor: warningColor,
114 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
115 | warningColor,
116 | 0.4
117 | )}`
118 | }
119 | },
120 | danger: {
121 | "&,&:hover": {
122 | color: "#FFFFFF",
123 | backgroundColor: dangerColor,
124 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
125 | dangerColor,
126 | 0.4
127 | )}`
128 | }
129 | },
130 | rose: {
131 | "&,&:hover": {
132 | color: "#FFFFFF",
133 | backgroundColor: roseColor,
134 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 10px -5px ${hexToRGBAlpha(
135 | roseColor,
136 | 0.4
137 | )}`
138 | }
139 | },
140 | alignCenter: {
141 | alignItems: "center",
142 | justifyContent: "center"
143 | },
144 | tabWrapper: {
145 | color: "inherit",
146 | position: "relative",
147 | fontSize: "12px",
148 | lineHeight: "24px",
149 | fontWeight: "500",
150 | textTransform: "uppercase",
151 | "&,& *": {
152 | letterSpacing: "normal"
153 | }
154 | }
155 | });
156 |
157 | export default navPillsStyle;
158 |
--------------------------------------------------------------------------------
/pages-sections/Components-Sections/SectionDownload.tsx:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | import React from "react";
3 | // @material-ui/core components
4 | import { makeStyles } from "@material-ui/core/styles";
5 | // @material-ui/icons
6 | import GridContainer from "../../components/Grid/GridContainer";
7 | import GridItem from "../../components/Grid/GridItem";
8 | import Button from "../../components/CustomButtons/Button";
9 | // core components
10 | import styles from "../../styles/jss/nextjs-material-kit/pages/componentsSections/downloadStyle";
11 |
12 | const useStyles = makeStyles(styles);
13 |
14 | export default function SectionDownload() {
15 | const classes = useStyles();
16 | return (
17 |
53 |
54 |
55 |
62 |
63 |
64 |
56 |
61 | NextJS Material Kit.
57 |58 | A Badass Material Kit based on Material-UI and NextJS. 59 |
60 |
18 |
102 | );
103 | }
104 |
--------------------------------------------------------------------------------
/styles/jss/nextjs-material-kit/components/headerStyle.ts:
--------------------------------------------------------------------------------
1 | import {
2 | container,
3 | hexToRGBAlpha,
4 | defaultFont,
5 | primaryColor,
6 | infoColor,
7 | successColor,
8 | warningColor,
9 | dangerColor,
10 | roseColor,
11 | transition,
12 | boxShadow,
13 | drawerWidth
14 | } from "../../nextjs-material-kit";
15 |
16 | const headerStyle = {
17 | appBar: {
18 | display: "flex",
19 | border: "0",
20 | borderRadius: "3px",
21 | padding: "0.625rem 0",
22 | marginBottom: "20px",
23 | color: "#555",
24 | width: "100%",
25 | backgroundColor: "#fff",
26 | boxShadow:
27 | "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)",
28 | transition: "all 150ms ease 0s",
29 | alignItems: "center",
30 | flexFlow: "row nowrap",
31 | justifyContent: "flex-start",
32 | position: "relative",
33 | zIndex: "unset"
34 | },
35 | absolute: {
36 | position: "absolute",
37 | zIndex: 1100
38 | },
39 | fixed: {
40 | position: "fixed",
41 | zIndex: 1100
42 | },
43 | container: {
44 | ...container,
45 | minHeight: "50px",
46 | flex: "1",
47 | alignItems: "center",
48 | justifyContent: "space-between",
49 | display: "flex",
50 | flexWrap: "nowrap"
51 | },
52 | flex: {
53 | flex: 1
54 | },
55 | title: {
56 | ...defaultFont,
57 | lineHeight: "30px",
58 | fontSize: "18px",
59 | borderRadius: "3px",
60 | textTransform: "none",
61 | color: "inherit",
62 | padding: "8px 16px",
63 | letterSpacing: "unset",
64 | "&:hover,&:focus": {
65 | color: "inherit",
66 | background: "transparent"
67 | }
68 | },
69 | appResponsive: {
70 | margin: "20px 10px"
71 | },
72 | primary: {
73 | backgroundColor: primaryColor,
74 | color: "#FFFFFF",
75 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
76 | primaryColor,
77 | 0.46
78 | )}`
79 | },
80 | info: {
81 | backgroundColor: infoColor,
82 | color: "#FFFFFF",
83 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
84 | infoColor,
85 | 0.46
86 | )}`
87 | },
88 | success: {
89 | backgroundColor: successColor,
90 | color: "#FFFFFF",
91 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
92 | successColor,
93 | 0.46
94 | )}`
95 | },
96 | warning: {
97 | backgroundColor: warningColor,
98 | color: "#FFFFFF",
99 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
100 | warningColor,
101 | 0.46
102 | )}`
103 | },
104 | danger: {
105 | backgroundColor: dangerColor,
106 | color: "#FFFFFF",
107 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
108 | dangerColor,
109 | 0.46
110 | )}`
111 | },
112 | rose: {
113 | backgroundColor: roseColor,
114 | color: "#FFFFFF",
115 | boxShadow: `0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px ${hexToRGBAlpha(
116 | roseColor,
117 | 0.46
118 | )}`
119 | },
120 | transparent: {
121 | backgroundColor: "transparent !important",
122 | boxShadow: "none",
123 | paddingTop: "25px",
124 | color: "#FFFFFF"
125 | },
126 | dark: {
127 | color: "#FFFFFF",
128 | backgroundColor: "#212121 !important",
129 | boxShadow:
130 | "0 4px 20px 0px rgba(0, 0, 0, 0.14), 0 7px 12px -5px rgba(33, 33, 33, 0.46)"
131 | },
132 | white: {
133 | border: "0",
134 | padding: "0.625rem 0",
135 | marginBottom: "20px",
136 | color: "#555",
137 | backgroundColor: "#fff !important",
138 | boxShadow:
139 | "0 4px 18px 0px rgba(0, 0, 0, 0.12), 0 7px 10px -5px rgba(0, 0, 0, 0.15)"
140 | },
141 | drawerPaper: {
142 | border: "none",
143 | bottom: "0",
144 | transitionProperty: "top, bottom, width",
145 | transitionDuration: ".2s, .2s, .35s",
146 | transitionTimingFunction: "linear, linear, ease",
147 | width: drawerWidth,
148 | ...boxShadow,
149 | position: "fixed",
150 | display: "block",
151 | top: "0",
152 | height: "100vh",
153 | right: "0",
154 | left: "auto",
155 | visibility: "visible",
156 | overflowY: "visible",
157 | borderTop: "none",
158 | textAlign: "left",
159 | paddingRight: "0px",
160 | paddingLeft: "0",
161 | ...transition
162 | }
163 | };
164 |
165 | export default headerStyle;
166 |
--------------------------------------------------------------------------------
/components/Header/HeaderLinks.tsx:
--------------------------------------------------------------------------------
1 | /*eslint-disable*/
2 | import React from "react";
3 | import Link from "next/link";
4 |
5 | // @material-ui/core components
6 | import { makeStyles } from "@material-ui/core/styles";
7 | import List from "@material-ui/core/List";
8 | import ListItem from "@material-ui/core/ListItem";
9 | import Tooltip from "@material-ui/core/Tooltip";
10 | import Icon from "@material-ui/core/Icon";
11 |
12 | // @material-ui/icons
13 | import { Apps, CloudDownload } from "@material-ui/icons";
14 | import DeleteIcon from "@material-ui/icons/Delete";
15 | import IconButton from "@material-ui/core/IconButton";
16 |
17 | // core components
18 | import CustomDropdown from "../CustomDropdown/CustomDropdown";
19 | import Button from "../CustomButtons/Button";
20 |
21 | import styles from "../../styles/jss/nextjs-material-kit/components/headerLinksStyle";
22 |
23 | const useStyles = makeStyles(styles);
24 |
25 | export default function HeaderLinks(props) {
26 | const classes = useStyles();
27 | return (
28 |
19 |
20 |
21 |
29 |
30 |
38 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
63 |
64 |
72 |
80 |
81 |
82 |
101 | Do you love this UI Kit?
22 |23 | Cause if you do, it can be yours for FREE. Hit the buttons below 24 | to navigate to our website where you can find the kit. We also 25 | have the Bootstrap 4 version on plain HTML. Start a new project or 26 | give an old Bootstrap project a new look! 27 |
28 |49 |
50 |
Want more?
53 |54 | We've just launched{" "} 55 | e.preventDefault()}> 56 | NextJS Material Kit PRO{" "} 57 | 58 | .It has a huge number of components, sections and example pages. 59 | Start Your Development With A Badass Material-UI and NexJS Kit 60 | inspired by Material Design. 61 |
62 |
83 |
84 |
86 |
89 |
92 |
96 |
99 |
100 | Thank you for supporting us!
85 |-
29 |
75 | {leftLinks !== undefined ? (
76 |
77 | {leftLinks}
78 |
79 | ) : (
80 | brandComponent
81 | )}
82 |
83 |
107 | {leftLinks}
108 | {rightLinks}
109 |
110 |
27 |
130 | );
131 | }
132 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change Log
2 |
3 | ## [1.2.3] 2022-10-0
4 | ### Improvements
5 |
6 | - Added Blog Section
7 | - Mardown, MDX translation
8 |
9 | ## [1.2.2] 2022-09-15
10 | ### Improvements
11 |
12 | - `TypeScript` Migration
13 | - `Update Dependencies`
14 | - `Added Deploy` buttons
15 | - Vercel, Netlify
16 |
17 | ## [1.2.1] 2022-08-15
18 |
19 | - Fixed the issues
20 | - Updated dependencies
21 | - Migration to React 18
22 | - Migration to sass from node-sass
23 |
24 | ## [1.2.0] 2021-05-14
25 |
26 | ### Bug fixing
27 |
28 | - Moved all images inside `public` folder (i.e. moved from `assets/img` to `public/img`)
29 |
30 | ### Major style changes
31 |
32 | - Moved all of the styles inside `styles` folder (i.e. moved from `assets/scss`, `assets/css`, `assets/jss` to `styles/scss`, `styles/css` and `styles/jss`)
33 |
34 | ### Deleted components
35 |
36 | ### Added components
37 |
38 | ### Deleted dependencies
39 |
40 | - `@zeit/next-sass` (SCSS will not be imported with the built-in support of NextJS)
41 | - `react-swipeable-views` (not event Material-UI use it anymore)
42 |
43 | ### Added dependencies
44 |
45 | ### Updated dependencies
46 |
47 | ```
48 | @material-ui/core 4.9.13 → 4.11.4
49 | @material-ui/icons 4.9.1 → 4.11.2
50 | classnames 2.2.6 → 2.3.1
51 | moment 2.25.3 → 2.29.1
52 | next 9.3.6 → 10.2.0
53 | next-compose-plugins 2.2.0 → 2.2.1
54 | next-images 1.3.1 → 1.7.0
55 | nextjs-redirect 2.0.2 → 5.0.2
56 | node-sass 4.14.1 → 5.0.0
57 | nouislider 14.4.0 → 15.1.0
58 | react 16.13.1 → 17.0.2
59 | react-datetime 2.16.3 → 3.0.4
60 | react-dom 16.13.1 → 17.0.2
61 | react-slick 0.25.2 → 0.28.1
62 | styled-components 5.1.0 → 5.3.0
63 | webpack 4.43.0 → 4.46.0
64 | ```
65 |
66 | ### Warning
67 |
68 | _We could not update webpack past version 4 and node-sass past version 5 due to some warnings from NextJS._
69 | _The following warnings come from some of our dependencies, however they do not affect the UI or the functionality of the product - we are thinking of dropping their usage and replace with other dependencies:_
70 |
71 | ```
72 | npm WARN react-datetime@3.0.4 requires a peer of react@^16.5.0 but none is installed. You must install peer dependencies yourself.
73 | ```
74 |
75 | ## [1.1.0] 2020-05-08
76 |
77 | ### Bug fixing
78 |
79 | - `https://github.com/creativetimofficial/nextjs-material-kit/issues/10` (changed the `title`, from simple `string` to `node`, so now, you can pass a title like so `title={Free Chat}` if you want to have link functionality - NOTE: the `node` that you pass to the `InfoArea` component will have to be styled)
80 | - `https://github.com/creativetimofficial/nextjs-material-kit/issues/6` (check `https://github.com/creativetimofficial/nextjs-material-kit/pull/7` for more info)
81 | - `https://github.com/creativetimofficial/nextjs-material-kit/issues/5`
82 | - `https://github.com/creativetimofficial/nextjs-material-kit/issues/4`
83 | - `https://github.com/creativetimofficial/nextjs-material-kit/issues/2`
84 |
85 | ### Major style changes
86 |
87 | - `assets/jss/nextjs-material-kit.js`
88 | - `assets/jss/nextjs-material-kit/components/buttonStyle.js`
89 | - `assets/jss/nextjs-material-kit/components/headerStyle.js`
90 | - `assets/jss/nextjs-material-kit/components/navPillsStyle.js`
91 | - `assets/jss/nextjs-material-kit/components/paginationStyle.js`
92 | - `assets/jss/nextjs-material-kit/components/paginationStyle.js`
93 |
94 | ### Deleted components
95 |
96 | ### Added components
97 |
98 | ### Deleted dependencies
99 |
100 | ### Added dependencies
101 |
102 | ### Updated dependencies
103 |
104 | ```
105 | @material-ui/core 4.3.2 → 4.9.13
106 | @material-ui/icons 4.2.1 → 4.9.1
107 | moment 2.24.0 → 2.25.3
108 | next 9.0.5 → 9.3.6
109 | next-images 1.1.2 → 1.3.1
110 | nextjs-redirect 1.0.2 → 2.0.2
111 | node-sass 4.12.0 → 4.14.1
112 | nouislider 14.0.2 → 14.4.0
113 | react 16.9.0 → 16.13.1
114 | react-dom 16.9.0 → 16.13.1
115 | react-swipeable-views 0.13.3 → 0.13.9
116 | styled-components 4.3.2 → 5.1.0
117 | webpack 4.39.3 → 4.43.0
118 | ```
119 |
120 | ### Warning
121 |
122 | _The following warnings come from some of our dependencies, however they do not affect the UI or the functionality of the product - if the issues will persist and will change into errors in the next version of React (v17), we will drop their usage and replace with other dependencies:_
123 |
124 | ```
125 | npm WARN deprecated popper.js@1.16.1: Popper changed home, find its new releases at @popperjs/core
126 | npm WARN deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
127 | npm WARN deprecated mkdirp@0.5.3: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
128 | ```
129 |
130 | _The following dependencies raise warnings (of deprecation or renamed) in development mode: DateTime, ReactSwipableView. If the warnings will persist, and will become errors in React 17, we will drop their usage and replace them with other plugins._
131 |
132 | ## [1.0.0] 2019-09-13
133 |
134 | ### Original Release
135 |
136 | - Started project with NextJS
137 | - Added Material-UI as base framework
138 | - Added design from Material Kit by Creative Tim
139 | - Added components from Material Kit React by Creative Tim
140 |
--------------------------------------------------------------------------------
/styles/scss/plugins/_plugin-react-slick.scss:
--------------------------------------------------------------------------------
1 | /* Slider */
2 | .slick-slider {
3 | position: relative;
4 |
5 | display: block;
6 | box-sizing: border-box;
7 |
8 | -webkit-user-select: none;
9 | -moz-user-select: none;
10 | -ms-user-select: none;
11 | user-select: none;
12 |
13 | -webkit-touch-callout: none;
14 | -khtml-user-select: none;
15 | -ms-touch-action: pan-y;
16 | touch-action: pan-y;
17 | -webkit-tap-highlight-color: transparent;
18 |
19 | @media (min-width: 768px) {
20 | .slick-caption {
21 | display: block !important;
22 | }
23 | }
24 |
25 | .slick-caption {
26 | padding-bottom: 45px;
27 | position: absolute;
28 | right: 15%;
29 | bottom: 20px;
30 | left: 15%;
31 | z-index: 10;
32 | padding-top: 20px;
33 | color: #ffffff;
34 | text-align: center;
35 | z-index: 3;
36 | display: none;
37 | }
38 | .slick-slide {
39 | > div:first-child {
40 | position: relative;
41 | }
42 | }
43 | .slick-icons {
44 | position: relative;
45 | top: 5px;
46 | }
47 | .slick-image {
48 | width: 100% !important;
49 | display: inline-flex !important;
50 | }
51 | }
52 |
53 | .slick-list {
54 | position: relative;
55 |
56 | display: block;
57 | overflow: hidden;
58 |
59 | margin: 0;
60 | padding: 0;
61 | }
62 | .slick-list:focus {
63 | outline: none;
64 | }
65 | .slick-list.dragging {
66 | cursor: pointer;
67 | cursor: hand;
68 | }
69 |
70 | .slick-slider .slick-track,
71 | .slick-slider .slick-list {
72 | -webkit-transform: translate3d(0, 0, 0);
73 | -moz-transform: translate3d(0, 0, 0);
74 | -ms-transform: translate3d(0, 0, 0);
75 | -o-transform: translate3d(0, 0, 0);
76 | transform: translate3d(0, 0, 0);
77 | }
78 |
79 | .slick-track {
80 | position: relative;
81 | top: 0;
82 | left: 0;
83 |
84 | display: block;
85 | margin-left: auto;
86 | margin-right: auto;
87 | }
88 | .slick-track:before,
89 | .slick-track:after {
90 | display: table;
91 |
92 | content: "";
93 | }
94 | .slick-track:after {
95 | clear: both;
96 | }
97 | .slick-loading .slick-track {
98 | visibility: hidden;
99 | }
100 |
101 | .slick-slide {
102 | display: none;
103 | float: left;
104 |
105 | height: 100%;
106 | min-height: 1px;
107 | }
108 | [dir="rtl"] .slick-slide {
109 | float: right;
110 | }
111 | .slick-slide img {
112 | display: block;
113 | }
114 | .slick-slide.slick-loading img {
115 | display: none;
116 | }
117 | .slick-slide.dragging img {
118 | pointer-events: none;
119 | }
120 | .slick-initialized .slick-slide {
121 | display: block;
122 | }
123 | .slick-loading .slick-slide {
124 | visibility: hidden;
125 | }
126 | .slick-vertical .slick-slide {
127 | display: block;
128 |
129 | height: auto;
130 |
131 | border: 1px solid transparent;
132 | }
133 | .slick-arrow.slick-hidden {
134 | display: none;
135 | }
136 | button.slick-arrow.slick-prev,
137 | button.slick-arrow.slick-next {
138 | font-size: 0;
139 | line-height: 0;
140 | position: absolute;
141 | top: 50%;
142 | display: block;
143 | // width: 20px;
144 | height: 100%;
145 | padding: 0;
146 | -ms-transform: translateY(-50%);
147 | transform: translateY(-50%);
148 | cursor: pointer;
149 | border: none;
150 | color: transparent;
151 | outline: none;
152 | background: transparent;
153 | width: 15%;
154 | z-index: 2;
155 | opacity: 0.5;
156 | }
157 | .slick-prev {
158 | left: 0;
159 | &::before {
160 | content: "\f053";
161 | font-weight: 600;
162 | font-family: Font Awesome\ 5 Free;
163 | -moz-osx-font-smoothing: grayscale;
164 | -webkit-font-smoothing: antialiased;
165 | display: inline-block;
166 | font-style: normal;
167 | font-variant: normal;
168 | text-rendering: auto;
169 | line-height: 1;
170 | color: white;
171 | font-size: 30px;
172 | width: 100%;
173 | }
174 | }
175 | .slick-next {
176 | right: 0;
177 | &::before {
178 | content: "\f054";
179 | font-weight: 600;
180 | font-family: Font Awesome\ 5 Free;
181 | -moz-osx-font-smoothing: grayscale;
182 | -webkit-font-smoothing: antialiased;
183 | display: inline-block;
184 | font-style: normal;
185 | font-variant: normal;
186 | text-rendering: auto;
187 | line-height: 1;
188 | color: #fff;
189 | font-size: 30px;
190 | width: 100%;
191 | }
192 | }
193 | .slick-list {
194 | z-index: 1;
195 | }
196 | .slick-dots {
197 | margin-top: 0;
198 | margin-bottom: 1rem;
199 | position: absolute;
200 | bottom: 5px;
201 | // margin-right: 15%;
202 | // margin-left: 15%;
203 | width: 100%;
204 | padding: 0;
205 | list-style: none;
206 | text-align: center;
207 | z-index: 3;
208 | }
209 | .slick-dots li,
210 | .slick-dots li button {
211 | width: 20px;
212 | height: 20px;
213 | cursor: pointer;
214 | }
215 | .slick-dots li {
216 | position: relative;
217 | display: inline-block;
218 | margin: 0 5px;
219 | padding: 0;
220 | }
221 | .slick-dots li button {
222 | font-size: 0;
223 | line-height: 0;
224 | display: block;
225 | padding: 5px;
226 | color: transparent;
227 | border: 0;
228 | outline: none;
229 | background: transparent;
230 | &::before {
231 | position: absolute;
232 | top: 0;
233 | left: 0;
234 | width: 10px;
235 | height: 10px;
236 | content: "\2022";
237 | text-align: center;
238 | opacity: 1;
239 | background-color: #fff;
240 | -webkit-font-smoothing: antialiased;
241 | -moz-osx-font-smoothing: grayscale;
242 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
243 | 0 3px 1px -2px rgba(0, 0, 0, 0.12), 0 1px 5px 0 rgba(0, 0, 0, 0.2);
244 | border-radius: 2px;
245 | transition: all 300ms linear;
246 | }
247 | }
248 | .slick-dots li.slick-active button:before {
249 | width: 15px;
250 | height: 15px;
251 | box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12),
252 | 0 2px 4px -1px rgba(0, 0, 0, 0.2);
253 | top: -3px;
254 | }
255 |
--------------------------------------------------------------------------------
28 |
29 |
30 |
31 |
125 |
126 |
127 |
128 |
129 |