landing: add switch mode

Signed-off-by: Login Victor <batazor@evrone.com>

ui/landing/.babelrc

@@ -0,0 +1,20 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    ["styled-components", { "ssr": true }],
+    [
+      "inline-react-svg",
+      {
+        "svgo": {
+          "plugins": [
+            {
+              "name": "removeAttrs",
+              "params": { "attrs": "(data-name)" }
+            },
+            "cleanupIDs"
+          ]
+        }
+      }
+    ]
+  ]
+}

ui/landing/.eslintrc.yaml

@@ -0,0 +1,91 @@
+env:
+  browser: true
+  node: true
+  es2021: true
+parser: '@typescript-eslint/parser'
+parserOptions:
+  ecmaVersion: 12
+  sourceType: module
+  ecmaFeatures:
+    jsx: true
+plugins:
+  - '@typescript-eslint'
+  - 'react'
+  - 'prettier'
+extends:
+  - eslint:recommended
+  - plugin:react/recommended
+  - airbnb
+  - airbnb/hooks
+  - plugin:@typescript-eslint/recommended
+  - plugin:react/recommended
+  - plugin:import/errors
+  - plugin:import/warnings
+  - plugin:import/typescript
+  - prettier
+  - plugin:@next/next/recommended
+rules:
+  semi: ['error', 'never']
+  default-case: off
+  react/jsx-filename-extension: off
+  #  react/jsx-filename-extension: [1, { extensions: ['.ts', '.tsx'] }]
+  react/jsx-fragments: [1, 'element']
+  import/extensions: off
+  import/default: off
+  no-alert: off
+  consistent-return: off
+  react-hooks/exhaustive-deps: off
+  spaced-comment: off
+  import/first: off
+  import/no-extraneous-dependencies: off
+  import/prefer-default-export: off
+  import/order: off
+  react/jsx-key: off
+  react/button-has-type: off
+  no-underscore-dangle: off
+  no-console: off
+  default-param-last: off
+  '@typescript-eslint/no-explicit-any': off
+  '@typescript-eslint/no-empty-function': off
+  import/no-self-import: off
+  jsx-a11y/click-events-have-key-events: off
+  jsx-a11y/no-static-element-interactions: off
+  no-fallthrough: off
+  react/no-array-index-key: off
+  no-new-func: off
+  import/export: off
+  react/require-default-props: off
+  import/no-useless-path-segments: off
+  import/no-named-as-default: off
+  import/no-named-as-default-member: off
+  import/no-relative-packages: off
+  react/destructuring-assignment: off
+  '@typescript-eslint/explicit-module-boundary-types': off
+  react/prop-types: off
+  react/function-component-definition: off
+  jsx-a11y/anchor-is-valid: off
+  react/jsx-props-no-spreading: ['error', { custom: 'ignore' }]
+  prettier/prettier: warn
+  react/no-unescaped-entities: off
+  import/no-cycle: [0, { ignoreExternal: true }]
+  prefer-const: off
+  # needed because of https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/docs/rules/no-use-before-define.md#how-to-use & https://stackoverflow.com/questions/63818415/react-was-used-before-it-was-defined
+  no-use-before-define: off
+  import/namespace: off
+  import/no-unresolved: off
+  import/no-duplicates: off
+  'jsx-a11y/label-has-associated-control': off
+  react/display-name: off
+  '@typescript-eslint/no-use-before-define':
+    ['error', { functions: false, classes: false, variables: true }]
+  '@typescript-eslint/ban-ts-comment': off
+  react/react-in-jsx-scope: off
+  react/no-unused-prop-types: off
+  '@next/next/no-img-element': off
+settings:
+  import/resolver:
+    babel-module:
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+    node:
+      extensions: ['.js', '.jsx', '.ts', '.tsx']
+      paths: ['server']

ui/landing/components/ToggleDarkMode.tsx

@@ -0,0 +1,46 @@
+import MoonIcon from "@heroicons/react/24/solid/MoonIcon";
+import SunIcon from "@heroicons/react/24/solid/SunIcon";
+import { useTheme as nextUseTheme } from 'next-themes'
+import { useState, useContext, useEffect } from "react"
+import ColorModeContext from "../../next/theme/ColorModeContext"
+
+const ToggleDarkMode = () => {
+  // @ts-ignore
+  const {systemTheme , theme, setTheme} = nextUseTheme()
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  },[])
+
+  // @ts-ignore
+  const { darkMode, setDarkMode } = useContext(ColorModeContext);
+
+  // @ts-ignore
+  const onClick = e => {
+    setDarkMode(!darkMode)
+    setTheme(e)
+  }
+
+  const renderThemeChanger = () => {
+    if (!mounted) return null;
+
+    const currentTheme = theme === "system" ? systemTheme : theme ;
+
+    if (currentTheme ==="dark") {
+      return (
+        <SunIcon className="w-10 h-10 text-yellow-500 " role="button" onClick={() => onClick('light')} />
+      )
+    }
+
+    else {
+      return (
+        <MoonIcon className="w-10 h-10 text-gray-900 " role="button" onClick={() => onClick('dark')} />
+      )
+    }
+  }
+
+  return renderThemeChanger()
+}
+
+export default ToggleDarkMode;

ui/landing/next.config.js

@@ -1,17 +1,60 @@
-const path = require('path')
+/* eslint-disable */
+
+const webpack = require('webpack')
+const withSourceMaps = require('@zeit/next-source-maps')
+
+// You can choose which headers to add to the list
+// after learning more below.
+const securityHeaders = [
+  {
+    key: 'X-DNS-Prefetch-Control',
+    value: 'on',
+  },
+  {
+    key: 'X-XSS-Protection',
+    value: '1; mode=block',
+  },
+  {
+    key: 'X-Frame-Options',
+    value: 'SAMEORIGIN',
+  },
+  {
+    key: 'Permissions-Policy',
+    value: 'camera=(), microphone=(), geolocation=(), interest-cohort=()',
+  },
+  {
+    key: 'X-Content-Type-Options',
+    value: 'nosniff',
+  },
+  {
+    key: 'Referrer-Policy',
+    value: 'origin-when-cross-origin',
+  },
+]
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
-  sassOptions: {
-    includePaths: [path.join(__dirname, 'styles')],
-  },
   swcMinify: true,
   compiler: {
     // ssr and displayName are configured by default
     styledComponents: true,
   },
+  webpack: (config, { isServer, buildId }) => {
+    config.plugins.push(new webpack.DefinePlugin({}))
+
+    return config
+  },
   trailingSlash: true,
+  headers: () => {
+    return [
+      {
+        // Apply these headers to all routes in your application.
+        source: '/:path*',
+        headers: securityHeaders,
+      },
+    ]
+  },
 }
 
-module.exports = nextConfig
+module.exports = withSourceMaps(nextConfig)