From 047a484d2eb1096bc5fe62117c3a057e693dea2f Mon Sep 17 00:00:00 2001 From: TheoryOfNekomata Date: Sun, 1 Aug 2021 11:41:56 +0800 Subject: [PATCH] Add BasicWide layout BasicWide layout is for templates that require more width. --- package.json | 2 +- src/index.ts | 1 + src/layouts/BasicWide/index.tsx | 60 +++++++++++++++++++++++++++++++++ 3 files changed, 62 insertions(+), 1 deletion(-) create mode 100644 src/layouts/BasicWide/index.tsx diff --git a/package.json b/package.json index b1ade7e..62802b5 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.4", + "version": "0.2.5", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/src/index.ts b/src/index.ts index 1d65244..49102c0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,5 @@ export * as Basic from './layouts/Basic' +export * as BasicWide from './layouts/BasicWide' export * as BasicNarrow from './layouts/BasicNarrow' export * as LeftSidebarWithMenu from './layouts/LeftSidebarWithMenu' export * as LeftSidebar from './layouts/LeftSidebar' diff --git a/src/layouts/BasicWide/index.tsx b/src/layouts/BasicWide/index.tsx new file mode 100644 index 0000000..d918454 --- /dev/null +++ b/src/layouts/BasicWide/index.tsx @@ -0,0 +1,60 @@ +import * as React from 'react' +import styled, { createGlobalStyle } from 'styled-components' +import TopBar from '../../widgets/TopBar' +import {configVar, loadConfig} from '../../utilities/helpers' + +const Config = createGlobalStyle({ + ...loadConfig(), +}) + +const ContentBase = styled('main')({ + boxSizing: 'border-box', +}) + +export const ContentContainer = styled('div')({ + padding: '0 1rem', + boxSizing: 'border-box', + margin: '0 auto', + maxWidth: `calc(${configVar('base-width')} * 3)`, + width: '100%', +}) + +type Props = { + brand?: React.ReactNode, + userLink?: React.ReactNode, + topBarCenter?: React.ReactChild, + topBarComponent?: React.ElementType, +} + +export const Layout: React.FC = ({ + brand, + userLink, + topBarCenter, + topBarComponent = 'div', + children, +}) => { + return ( + <> + + { + ( + brand + || userLink + || topBarCenter + ) + && ( + + {topBarCenter} + + ) + } + + {children} + + + ) +}