feat: add social links

src/components/SocialLinks/index.tsx

@@ -0,0 +1,54 @@
+import {
+  AiFillGithub as GitHub,
+  AiOutlineInstagram as Instagram,
+  AiOutlineWhatsApp as WhatsApp
+} from 'react-icons/ai'
+import { BsEnvelope as Email } from 'react-icons/bs'
+import { FaDev as Dev, FaLinkedinIn as LinkedIn } from 'react-icons/fa'
+import { IconType } from 'react-icons/lib'
+
+import { Link } from '../Link'
+import { LinkVariantProps } from '../Link/styles'
+import { SocialItem, Wrapper } from './styles'
+
+type SocialLink = {
+  label: string
+  href: string
+}
+
+type SocialLinksProps = LinkVariantProps & {
+  socialLinks: SocialLink[]
+}
+
+const Icons = {
+  Email,
+  GitHub,
+  LinkedIn,
+  Dev,
+  Instagram,
+  WhatsApp
+}
+
+export function SocialLinks({ socialLinks, color }: SocialLinksProps) {
+  return (
+    <Wrapper>
+      {socialLinks.map(({ label, href }) => {
+        const Icon: IconType = Icons[label as keyof typeof Icons]
+        return (
+          <SocialItem key={href}>
+            <Link
+              href={href}
+              aria-label={label}
+              rel="noopener noreferrer"
+              target="_blank"
+              // @ts-ignore
+              color={color}
+            >
+              <Icon size={22} />
+            </Link>
+          </SocialItem>
+        )
+      })}
+    </Wrapper>
+  )
+}

src/components/SocialLinks/styles.ts

@@ -0,0 +1,24 @@
+import { styled } from '../../styles/stitches.config'
+
+export const Wrapper = styled('ul', {
+  display: 'inline-flex',
+  listStyle: 'none',
+  margin: 0,
+  padding: 0
+})
+
+export const SocialItem = styled('li', {
+  transition: 'transform 0.2s ease-in-out',
+
+  '&:not(:last-child)': {
+    marginRight: '1rem'
+  },
+
+  '&:hover': {
+    transform: 'scale(1.1)'
+  },
+
+  '&:active': {
+    transform: 'scale(0.95)'
+  }
+})