Updated

Signed-off-by: Avior <github@avior.me>

src/Footer/Footer.module.styl

@@ -0,0 +1,40 @@
+@import '../config.styl'
+
+.footer
+	padding 24px 0
+	background $foregroundLight
+	@media (prefers-color-scheme dark)
+		background $foregroundDark
+
+	ul
+		padding 0
+		margin 0
+		display flex
+		justify-content right
+		li
+			display inline-block
+			padding-left 24px
+			+ .icon
+				padding-left 16px
+			&:not(.icon) + .icon
+				padding-left 48px
+
+
+.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%
+	40%
+	60%
+	95%
+		transform scale(1)
+	50%
+	70%
+		transform scale(1.2)

src/Footer/Footer.stories.tsx

@@ -0,0 +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,
+	parameters: {
+		layout: 'fullscreen'
+	}
+} as Meta
+
+export const Basic: Story<any> = (args: any) => <Component {...args} />
+
+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

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<Props> {
+	public render = () => (
+		<footer className={css.footer}>
+			<Container>
+				<Row>
+					<Col>
+						{this.props.text ? (
+							<Text>{this.props.text}</Text>
+						) : (
+							<Text>Made with <span className={css.animation}><Heart color={'#E6808A'} fill={'#E6808A'} size={16} fillOpacity={0.5} /></span> by {this.props.company || 'Dzeio'}</Text>
+						)}
+					</Col>
+					<Col>
+							<ul>
+								{this.props.links && this.props.links.map((l, index) => (
+									<li key={l.path + index}><Text><Link href={l.path} hideIcon>{l.name}</Link></Text></li>
+								))}
+								{this.props.socials && this.props.socials.map((l, index) => (
+									<li key={l.href + index} className={css.icon}><Text><Link hideIcon noStyle href={l.href}>
+										{typeof l.icon === 'string' ? (
+											<Image width={24} height={24} src={l.icon} />
+										) : (
+											<l.icon size={24} />
+									)}
+									</Link></Text></li>
+								))}
+							</ul>
+					</Col>
+				</Row>
+			</Container>
+
+		</footer>
+	)
+}