Sfoglia il codice sorgente

Add BasicNarrow layout

BasicNarrow behaves like basic, but the spacing is narrower. This is
best for login screens.
master
parent
commit
e28190050a
2 ha cambiato i file con 49 aggiunte e 0 eliminazioni
  1. +1
    -0
      src/index.ts
  2. +48
    -0
      src/layouts/BasicNarrow/index.tsx

+ 1
- 0
src/index.ts Vedi File

@@ -1,4 +1,5 @@
export * as Basic from './layouts/Basic'
export * as BasicNarrow from './layouts/BasicNarrow'
export * as LeftSidebarWithMenu from './layouts/LeftSidebarWithMenu'
export * as LeftSidebar from './layouts/LeftSidebar'
export * as RightSidebarStatic from './layouts/RightSidebarStatic'

+ 48
- 0
src/layouts/BasicNarrow/index.tsx Vedi File

@@ -0,0 +1,48 @@
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: configVar('base-width'),
width: '100%',
})

type Props = {
brand?: React.ReactNode,
userLink?: React.ReactNode,
topBarCenter?: React.ReactChild,
}

export const Layout: React.FC<Props> = ({
brand,
userLink,
topBarCenter,
children,
}) => {
return (
<>
<Config />
<TopBar
brand={brand}
userLink={userLink}
>
{topBarCenter}
</TopBar>
<ContentBase>
{children}
</ContentBase>
</>
)
}

Caricamento…
Annulla
Salva