Added Socials to Footer

Signed-off-by: Avior <florian.bouillon@delta-wings.net>

src/dzeio/Footer/Footer.module.styl

@@ -13,6 +13,9 @@
 		li
 			display inline-block
 
+		&.socials a
+			padding 0 8px
+
 .animation
 	animation grow 1s linear infinite
 	display inline-block

src/dzeio/Footer/Footer.stories.tsx

@@ -1,5 +1,6 @@
 import { Meta, Story } from '@storybook/react/types-6-0'
 import React from 'react'
+import { Zap } from 'react-feather'
 import Component from '.'
 
 export default {
@@ -10,6 +11,9 @@ export default {
 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: '/'}]}
+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/dzeio/Footer/index.tsx

@@ -1,9 +1,10 @@
-import React from 'react'
+import React, { FC } from 'react'
 import { Heart } from 'react-feather'
 import Link from '../Link'
-
+import { Icon } from 'react-feather'
 import Text from '../Text'
 import css from './Footer.module.styl'
+import Image from 'next/image'
 
 interface Props {
 	text?: string
@@ -12,6 +13,10 @@ interface Props {
 		path: string
 		name: string
 	}>
+	socials?: Array<{
+		href: string
+		icon: Icon | string
+	}>
 }
 
 export default class Footer extends React.Component<Props> {
@@ -27,6 +32,17 @@ export default class Footer extends React.Component<Props> {
 					<li key={l.path}><Text>{index !== 0 && (<>&nbsp;- </>)}<Link href={l.path}>{l.name}</Link></Text></li>
 				))}</ul>
 			)}
+			{this.props.socials && (
+				<ul className={css.socials}>{this.props.socials.map((l, index) => (
+					<li key={l.href}><Text><Link noStyle href={l.href}>
+						{typeof l.icon === 'string' ? (
+							<Image width={24} height={24} src={l.icon} />
+						) : (
+							<l.icon size={24} />
+					)}
+					</Link></Text></li>
+				))}</ul>
+			)}
 		</footer>
 	)
 }