/
githubmirror
/
carbon
Обзор
Документация
Войти
/
githubmirror
/
carbon
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
components/Page.js
62 строки
1 KB
hatsu
Responsive for mobile (#1331)
08 фев 2022, 05:25
Не верифицирован
08 фев 2022, 05:25
3da8262
Код
Авторство
О чём код?
import React from 'react' import AuthContext from './AuthContext' import Meta from './Meta' import Header from './Header' import Footer from './Footer' import Announcement from './Announcement' import LoginButton from './LoginButton' const COLUMN = ` display: flex; justify-content: center; flex-direction: column; align-items: center; ` class Page extends React.Component { render() { const { children, enableHeroText, flex } = this.props return ( <main className="main mb3"> <Meta /> <AuthContext> <Announcement /> <Header enableHeroText={enableHeroText} /> <div className="login-button-container"> <LoginButton /> </div> <div className="page">{children}</div> </AuthContext> <Footer /> <style jsx> {` .main { ${flex ? COLUMN : ''} margin-top: 6rem; } .login-button-container { position: absolute; top: 1.4rem; right: 1rem; } .page { max-width: 100%; padding: 0 1rem; } @media (min-width: 1024px) { .main { ${COLUMN}; } .page { padding: 0; } } `} </style> </main> ) } } export default Page