jos3duardo/upload-apollo-client
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Component improvements.

Browse Source
This commit is contained in:
Jayden Seric 2019-12-02 15:08:24 +11:00
parent 55cee10b6e
commit 3d0f9e76c1
4 changed files with 44 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/components/Header.js Normal file
View File

@ -0,0 +1,10 @@
export const Header = props => (
<>
<header {...props} />
<style jsx>{`
header {
margin: var(--daui-spacing);
}
`}</style>
</>
)

10
app/components/Inset.js
View File

@ -1,10 +0,0 @@
export const Inset = ({ children }) => (
<div>
{children}
<style jsx>{`
div {
margin: 1.5rem;
}
`}</style>
</div>
)

15
app/components/Section.js
View File

@ -1,15 +1,10 @@
export const Section = ({ intro, children }) => ( export const Section = props => (
<section> <>
<header>{intro}</header> <section {...props} />
{children}
<style jsx>{` <style jsx>{`
section { section {
margin-top: 3rem; margin: calc(var(--daui-spacing) * 2) 0;
margin-bottom: 1.5rem;
}
header {
margin: 1.5rem;
} }
`}</style> `}</style>
</section> </>
) )

53
app/pages/index.js
View File

@ -1,5 +1,5 @@
import { Code, Heading } from 'device-agnostic-ui' import { Code, Heading, Margin } from 'device-agnostic-ui'
import { Inset } from '../components/Inset' import { Header } from '../components/Header'
import { Page } from '../components/Page' import { Page } from '../components/Page'
import { Section } from '../components/Section' import { Section } from '../components/Section'
import { UploadBlob } from '../components/UploadBlob' import { UploadBlob } from '../components/UploadBlob'
@ -9,40 +9,45 @@ import { Uploads } from '../components/Uploads'
const IndexPage = () => ( const IndexPage = () => (
<Page title="Apollo upload examples"> <Page title="Apollo upload examples">
<Section <Header>
intro={ <Heading level={1} size={1}>
<Heading> Apollo upload examples
</Heading>
</Header>
<Section>
<Header>
<Heading level={2} size={2}>
Upload <Code>FileList</Code> Upload <Code>FileList</Code>
</Heading> </Heading>
} </Header>
> <Margin>
<Inset>
<UploadFileList /> <UploadFileList />
</Inset> </Margin>
</Section> </Section>
<Section <Section>
intro={ <Header>
<Heading> <Heading level={2} size={2}>
Upload <Code>File</Code> Upload <Code>File</Code>
</Heading> </Heading>
} </Header>
> <Margin>
<Inset>
<UploadFile /> <UploadFile />
</Inset> </Margin>
</Section> </Section>
<Section <Section>
intro={ <Header>
<Heading> <Heading level={2} size={2}>
Upload <Code>Blob</Code> Upload <Code>Blob</Code>
</Heading> </Heading>
} </Header>
> <Margin>
<Inset>
<UploadBlob /> <UploadBlob />
</Inset> </Margin>
</Section> </Section>
<Section intro={<Heading>Uploads</Heading>}> <Section>
<Header>
<Heading>Uploads</Heading>
</Header>
<Uploads /> <Uploads />
</Section> </Section>
</Page> </Page>