*:not(:first-child)
+ margin-top 48px
+ &.main
+ margin 0 auto
+ padding 48px @padding[1]
diff --git a/src/Container/Container.stories.tsx b/src/Container/Container.stories.tsx
new file mode 100644
index 0000000..2bf6b70
--- /dev/null
+++ b/src/Container/Container.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+import Text from '../Text'
+
+export default {
+ title: 'DZEIO/Container',
+ component: Component,
+ argTypes: {
+ title: { control: 'text'}
+ },
+ parameters: {
+ layout: 'fullscreen'
+ }
+} as Meta
+
+export const Container = (args: any) => (
+
Test
+)
diff --git a/src/Container/index.tsx b/src/Container/index.tsx
new file mode 100644
index 0000000..90a7ed7
--- /dev/null
+++ b/src/Container/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { buildClassName } from '../Util'
+
+import css from './Container.module.styl'
+
+interface Props {
+ children: React.ReactNode
+ className?: string
+ mainContainer?: boolean
+}
+
+export default class Container extends React.Component
{
+
+ public render = () => React.createElement(this.props.mainContainer ? 'main' : 'div', {
+ className: buildClassName(css.container, this.props.className, [css.main, this.props.mainContainer]),
+ children: this.props.children
+ })
+
+}
diff --git a/src/dzeio/Fieldset/Fieldset.module.styl b/src/Fieldset/Fieldset.module.styl
similarity index 59%
rename from src/dzeio/Fieldset/Fieldset.module.styl
rename to src/Fieldset/Fieldset.module.styl
index 3f0c7e6..3c9666f 100644
--- a/src/dzeio/Fieldset/Fieldset.module.styl
+++ b/src/Fieldset/Fieldset.module.styl
@@ -1,8 +1,8 @@
@import '../config.styl'
.fieldset
- border-radius 4px
- border 2px solid $grayDark
+ border-radius 8px
+ border 2px solid var(--gray-500)
transition all $transition
margin 0
@@ -12,8 +12,3 @@
padding 0 4px
@media (prefers-color-scheme dark)
color white
- &:hover
- border-color black
-
- @media (prefers-color-scheme dark)
- border-color white
diff --git a/src/dzeio/Fieldset/Fieldset.stories.tsx b/src/Fieldset/Fieldset.stories.tsx
similarity index 100%
rename from src/dzeio/Fieldset/Fieldset.stories.tsx
rename to src/Fieldset/Fieldset.stories.tsx
diff --git a/src/dzeio/Fieldset/index.tsx b/src/Fieldset/index.tsx
similarity index 100%
rename from src/dzeio/Fieldset/index.tsx
rename to src/Fieldset/index.tsx
diff --git a/src/dzeio/Footer/Footer.module.styl b/src/Footer/Footer.module.styl
similarity index 56%
rename from src/dzeio/Footer/Footer.module.styl
rename to src/Footer/Footer.module.styl
index 159cdd5..905675f 100644
--- a/src/dzeio/Footer/Footer.module.styl
+++ b/src/Footer/Footer.module.styl
@@ -1,26 +1,33 @@
@import '../config.styl'
.footer
- padding 24px 16px
- background $foregroundLight
+ padding 24px 0
+ background var(--theme-50)
@media (prefers-color-scheme dark)
- background $foregroundDark
+ background var(--gray-800)
ul
padding 0
+ margin 0
display flex
- justify-content center
+ justify-content right
li
display inline-block
+ padding-left 24px
+ + .icon
+ padding-left 16px
+ &:not(.icon) + .icon
+ padding-left 48px
- &.socials a
- padding 0 8px
.animation
animation grow 1s linear infinite
display inline-block
vertical-align middle
margin 0 2px
+ width 16px
+ height @width
+ vertical-align sub
@keyframes grow
0%
diff --git a/src/dzeio/Footer/Footer.stories.tsx b/src/Footer/Footer.stories.tsx
similarity index 93%
rename from src/dzeio/Footer/Footer.stories.tsx
rename to src/Footer/Footer.stories.tsx
index 97248e4..954cb82 100644
--- a/src/dzeio/Footer/Footer.stories.tsx
+++ b/src/Footer/Footer.stories.tsx
@@ -1,19 +1,22 @@
-import { Meta, Story } from '@storybook/react/types-6-0'
-import React from 'react'
-import { Zap } from 'lucide-react'
-import Component from '.'
-
-export default {
- title: 'DZEIO/Footer',
- component: Component,
-} as Meta
-
-export const Basic: Story = (args: any) =>
-
-let tmp = Basic.bind({})
-tmp.args = {
- links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}],
- socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}]
-}
-
-export const Normal = tmp
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React from 'react'
+import { Zap } from 'lucide-react'
+import Component from '.'
+
+export default {
+ title: 'DZEIO/Footer',
+ component: Component,
+ parameters: {
+ layout: 'fullscreen'
+ }
+} as Meta
+
+export const Basic: Story = (args: any) =>
+
+let tmp = Basic.bind({})
+tmp.args = {
+ links: [{name: 'test1', path: '/'}, {name: 'test2', path: '/'}, {name: 'test3', path: '/'}],
+ socials: [{icon: Zap, href: '/'}, {icon: '/16-16.svg', href: '/'}, {icon: Zap, href: '/'}]
+}
+
+export const Normal = tmp
diff --git a/src/Footer/index.tsx b/src/Footer/index.tsx
new file mode 100644
index 0000000..75dab18
--- /dev/null
+++ b/src/Footer/index.tsx
@@ -0,0 +1,58 @@
+import React from 'react'
+import { Heart } from 'lucide-react'
+import Link from '../Link'
+import Text from '../Text'
+import css from './Footer.module.styl'
+import Image from 'next/image'
+import { Icon } from '../interfaces'
+import Container from '../Container'
+import Row from '../Row'
+import Col from '../Col'
+
+interface Props {
+ text?: string
+ company?: string
+ links?: Array<{
+ path: string
+ name: string
+ }>
+ socials?: Array<{
+ href: string
+ icon: Icon | string
+ }>
+}
+
+export default class Footer extends React.Component {
+ public render = () => (
+
+ )
+}
diff --git a/src/dzeio/Image/Image.module.styl b/src/Image/Image.module.styl
similarity index 100%
rename from src/dzeio/Image/Image.module.styl
rename to src/Image/Image.module.styl
diff --git a/src/Image/Image.stories.tsx b/src/Image/Image.stories.tsx
new file mode 100644
index 0000000..a3f389b
--- /dev/null
+++ b/src/Image/Image.stories.tsx
@@ -0,0 +1,10 @@
+import { Meta, Story } from '@storybook/react/types-6-0'
+import React from 'react'
+import Component from '.'
+
+export default {
+ title: 'DZEIO/Image',
+ component: Component
+} as Meta
+
+export const Image: Story = (args: any) =>
diff --git a/src/dzeio/Image/index.tsx b/src/Image/index.tsx
similarity index 97%
rename from src/dzeio/Image/index.tsx
rename to src/Image/index.tsx
index 0ae0fe6..2c04624 100644
--- a/src/dzeio/Image/index.tsx
+++ b/src/Image/index.tsx
@@ -69,6 +69,7 @@ export default class Image extends React.Component {
priority
quality={100}
{...this.props.imageProps}
+ layout={this.state.image ? 'fill' : this.props.imageProps.layout}
objectFit="contain"
/>