bietkul

import Head from 'next/head';
import React from 'react';
import { css } from '@emotion/core';
import {
 node, string, oneOfType, object
} from 'prop-types';
import { Layout } from 'antd';
const layoutCls = css`
 background: #152530;
 color: #fff;

bietkul

import React from 'react';
import Document, { Head, Main, NextScript } from 'next/document';
import { extractCritical } from 'emotion-server';
export default class MyDocument extends Document {
 static getInitialProps({ renderPage }) {
  // for emotion-js
  const page = renderPage();
  const styles = extractCritical(page.html);
  return { ...page, ...styles };
 }

bietkul

import Head from 'next/head';
import React from 'react';
import { css } from '@emotion/core';
import {
 node, string, oneOfType, object
} from 'prop-types';
import { Layout } from 'antd';
const layoutCls = css`
 background: #152530;
 color: #fff;

bietkul

import React, { Component } from 'react';
import { Button, Drawer } from 'antd';
import Link from 'next/link';
import { headerCls, drawerCls } from './styles';
import LeftMenu from './LeftMenu';
import RightMenu from './RightMenu';

class Header extends Component {
  state = {
    visible: false,

bietkul

import React from 'react';
import { node, string, oneOfType } from 'prop-types';
import { Layout } from 'antd';
const AppContent = Layout.Content;
const Content = ({ children, ...props }) => 
  <AppContent {...props}>{children}</AppContent>;
Content.propTypes = {
 children: oneOfType([node, string]),
};
export default Content;

bietkul

import React from 'react';
import { Layout } from 'antd';
import { css } from '@emotion/core';
const footerCls = css`
 text-align: center;
 background: #04070b;
 color: #fff;
`;
const AppFooter = Layout.Footer;
const Footer = () => (

bietkul

{
 "presets": ["@emotion/babel-preset-css-prop"],
 "plugins": [
   ["import", { "libraryName": "antd", "style": "css" }],
   "@babel/plugin-proposal-class-properties"
 ]
}

bietkul

import { css } from '@emotion/core';

export const headerCls = css`
  background-color: #04070b;
  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
  ul {
    background-color: #04070b;
    li {
      cursor: pointer;
      color: #fff;

bietkul

import React from 'react';
import { Menu } from 'antd';
import Link from 'next/link';

const LeftMenu = () => (
  <Menu mode="horizontal">
    <Menu.Item key="new_movies">
      <Link href="new-movies">New Movies</Link>
    </Menu.Item>
  </Menu>

bietkul

import React from 'react';
import { string } from 'prop-types';
import Link from 'next/link';
import { Menu } from 'antd';

const RightMenu = ({ mode }) => (
  <Menu mode={mode}>
    <Menu.Item key="search">
      <Link href="/search">Search</Link>
    </Menu.Item>