From 0863a736251551e482fccf83866a6e43b2fac1e0 Mon Sep 17 00:00:00 2001 From: anatolykopyl Date: Mon, 4 Jul 2022 02:23:09 +0300 Subject: [PATCH] Added a help modal --- app/.eslintrc.json | 6 +- app/pages/_app.js | 4 +- app/pages/home/HelpModal.js | 32 +++++++ app/pages/home/Hero.js | 79 ++++++++++++------ app/pages/home/Table.js | 4 +- app/pages/home/index.js | 2 +- app/public/{languages => locale_icons}/de.png | Bin app/public/{languages => locale_icons}/en.png | Bin app/public/{languages => locale_icons}/fr.png | Bin app/public/{languages => locale_icons}/ru.png | Bin app/public/{languages => locale_icons}/ua.png | Bin app/public/locales/en/home.json | 4 + app/public/locales/ru/home.json | 4 + 13 files changed, 104 insertions(+), 31 deletions(-) create mode 100644 app/pages/home/HelpModal.js rename app/public/{languages => locale_icons}/de.png (100%) rename app/public/{languages => locale_icons}/en.png (100%) rename app/public/{languages => locale_icons}/fr.png (100%) rename app/public/{languages => locale_icons}/ru.png (100%) rename app/public/{languages => locale_icons}/ua.png (100%) diff --git a/app/.eslintrc.json b/app/.eslintrc.json index 4af8e3f..1441415 100644 --- a/app/.eslintrc.json +++ b/app/.eslintrc.json @@ -4,7 +4,11 @@ "import/order": [ "error", { - "newlines-between": "always" + "newlines-between": "always", + "alphabetize": { + "order": "asc", + "caseInsensitive": true + } } ] } diff --git a/app/pages/_app.js b/app/pages/_app.js index 3ad8571..de23c25 100644 --- a/app/pages/_app.js +++ b/app/pages/_app.js @@ -1,6 +1,6 @@ -import { appWithTranslation } from 'next-i18next' -import { createTheme, ThemeProvider } from '@mui/material/styles' import { CssBaseline } from '@mui/material' +import { createTheme, ThemeProvider } from '@mui/material/styles' +import { appWithTranslation } from 'next-i18next' import 'reset-css' import '../styles/global.scss' diff --git a/app/pages/home/HelpModal.js b/app/pages/home/HelpModal.js new file mode 100644 index 0000000..9c25475 --- /dev/null +++ b/app/pages/home/HelpModal.js @@ -0,0 +1,32 @@ +import { Dialog, DialogTitle, Box, Typography } from '@mui/material' +import { useTranslation } from 'next-i18next' + +export default function HelpModal ({ open, onClose }) { + const { t } = useTranslation('home') + + return ( + + + {t('help_header')} + + + + {t('help_body_1')} + + + {t('help_body_2')} + + + {t('help_body_3')} + + + + ) +} diff --git a/app/pages/home/Hero.js b/app/pages/home/Hero.js index 2e352a4..9d22c07 100644 --- a/app/pages/home/Hero.js +++ b/app/pages/home/Hero.js @@ -1,43 +1,72 @@ +import { Box, Chip } from '@mui/material' import { useTranslation } from 'next-i18next' import Image from 'next/image' -import { Box } from '@mui/material' +import { useState } from 'react' import logo from './assets/warframe_logo.png' +import HelpModal from './HelpModal' const Hero = () => { const { t } = useTranslation('home') + const [modalOpen, setModalOpen] = useState(false) + + const openModal = () => { + setModalOpen(true) + } + + const closeModal = () => { + setModalOpen(false) + } return ( - + <> - logo + + + logo + + +

Market Gaps

+

{t('description')}

+ - -

Market Gaps

-

{t('description')}

- - + + + ) } diff --git a/app/pages/home/Table.js b/app/pages/home/Table.js index 9a5a8d6..f3249b1 100644 --- a/app/pages/home/Table.js +++ b/app/pages/home/Table.js @@ -1,6 +1,6 @@ -import { Component } from 'react' -import { DataGrid } from '@mui/x-data-grid' import { Link, Typography, Box } from '@mui/material' +import { DataGrid } from '@mui/x-data-grid' +import { Component } from 'react' import { withTranslation } from 'react-i18next' import Moment from 'react-moment' diff --git a/app/pages/home/index.js b/app/pages/home/index.js index 7b2361a..1972cb1 100644 --- a/app/pages/home/index.js +++ b/app/pages/home/index.js @@ -1,5 +1,5 @@ -import { Component } from 'react' import { serverSideTranslations } from 'next-i18next/serverSideTranslations' +import { Component } from 'react' import { models } from 'shared-stuff' import dbConnect from '../../lib/dbConnect' diff --git a/app/public/languages/de.png b/app/public/locale_icons/de.png similarity index 100% rename from app/public/languages/de.png rename to app/public/locale_icons/de.png diff --git a/app/public/languages/en.png b/app/public/locale_icons/en.png similarity index 100% rename from app/public/languages/en.png rename to app/public/locale_icons/en.png diff --git a/app/public/languages/fr.png b/app/public/locale_icons/fr.png similarity index 100% rename from app/public/languages/fr.png rename to app/public/locale_icons/fr.png diff --git a/app/public/languages/ru.png b/app/public/locale_icons/ru.png similarity index 100% rename from app/public/languages/ru.png rename to app/public/locale_icons/ru.png diff --git a/app/public/languages/ua.png b/app/public/locale_icons/ua.png similarity index 100% rename from app/public/languages/ua.png rename to app/public/locale_icons/ua.png diff --git a/app/public/locales/en/home.json b/app/public/locales/en/home.json index 1d1b5b3..cd8dca9 100644 --- a/app/public/locales/en/home.json +++ b/app/public/locales/en/home.json @@ -1,5 +1,9 @@ { "description": "Find a profitable difference between the price of the set and the price of the sum of it's parts.", + "help_header": "How to use this site", + "help_body_1": "The main page of the site has a table, that contains info about prime items, that is updated in real time. The column \"Name\" has a link to the item on warframe.market and the time of the last update.", + "help_body_2": "Knowing the difference between the price of the set and the price of the sum of it's parts lets you save platinum buying or even make a profit by purchasing the parts and selling them as a set.", + "help_body_3": "Have fun!", "name": "Name", "parts_price": "Parts Price", "set_price": "Set Price", diff --git a/app/public/locales/ru/home.json b/app/public/locales/ru/home.json index 2b4d39a..20147c3 100644 --- a/app/public/locales/ru/home.json +++ b/app/public/locales/ru/home.json @@ -1,5 +1,9 @@ { "description": "Находи выгодную разницу между ценой набора и ценой его частей по отдельности.", + "help_header": "Как использовать этот сайт?", + "help_body_1": "На главной странице сайта находится таблица, которая содержит информацию о прайм предметах, обновляемую в реальном времени. Колонка \"Наименование\" содержит ссылку на страницу предмета на warframe.market и время последнего обновления информации.", + "help_body_2": "Зная разницу между ценой частей и ценой комплекта можно, например сэкономить на покупке или даже заработать, если купить части по отдельности, а продать как сет.", + "help_body_3": "Приятного использования!", "name": "Наименование", "parts_price": "Цена частей", "set_price": "Цена набора",