feat: site AppBar

Author: RenatoFranca

src/components/AppBar/index.tsx

@@ -1,52 +1,32 @@
 import * as S from './styles'
-import { IAppBar } from './types'
+import { IAppBar, ISecondaryAppBarButton } from './types'
 import MenuIcon from '@material-ui/icons/Menu'
 import { Container } from '@material-ui/core'
 
 const AppBar = ({ testID, secondaryAppBar }: IAppBar) => {
   return (
     <S.Wrapper data-testid={testID}>
-      <S.SecondaryAppBar>
-        <Container>
-          {secondaryAppBar?.leftContent && (
-            <S.SecondaryAppBarLeftContent>
-              {secondaryAppBar.leftContent.map((item, index) => {
-                return (
-                  (item.link && (
-                    <a
-                      key={index}
-                      aria-label={item.link.aria}
-                      href={item.link.url}
-                    >
-                      {item.text}
-                    </a>
-                  )) ||
-                  item.text
-                )
-              })}
-            </S.SecondaryAppBarLeftContent>
-          )}
-          {secondaryAppBar?.rightContent && (
-            <S.SecondaryAppBarRightContent>
-              {secondaryAppBar.rightContent.map((item, index) => {
-                return (
-                  (item.link && (
-                    <a
-                      key={index}
-                      aria-label={item.link.aria}
-                      href={item.link.url}
-                    >
-                      {item.text}
-                    </a>
-                  )) ||
-                  item.text
-                )
-              })}
-            </S.SecondaryAppBarRightContent>
-          )}
-        </Container>
-      </S.SecondaryAppBar>
-      <S.AppBar color="secondary">
+      {secondaryAppBar && (
+        <S.SecondaryAppBar>
+          <S.SecondaryAppBarContainer>
+            {secondaryAppBar?.leftContent && (
+              <S.SecondaryAppBarLeftContent>
+                {secondaryAppBar.leftContent.map((item, index) => {
+                  return (item.link && getButton({ index, item })) || item.text
+                })}
+              </S.SecondaryAppBarLeftContent>
+            )}
+            {secondaryAppBar?.rightContent && (
+              <S.SecondaryAppBarRightContent>
+                {secondaryAppBar.rightContent.map((item, index) => {
+                  return (item.link && getButton({ index, item })) || item.text
+                })}
+              </S.SecondaryAppBarRightContent>
+            )}
+          </S.SecondaryAppBarContainer>
+        </S.SecondaryAppBar>
+      )}
+      <S.AppBar color="secondary" data-secondary-app-bar={secondaryAppBar}>
         <S.Toolbar>
           <Container>
             <S.IconButton edge="start" color="inherit" aria-label="menu">
@@ -59,4 +39,28 @@ const AppBar = ({ testID, secondaryAppBar }: IAppBar) => {
   )
 }
 
+const getButton = ({ index, item }: ISecondaryAppBarButton) => {
+  return (
+    (item.link?.icon && (
+      <S.IconButton
+        size="small"
+        key={index}
+        onClick={() => window.open(item.link?.url, '_blank')}
+        aria-label={item.link?.aria}
+      >
+        {item.text}
+      </S.IconButton>
+    )) || (
+      <S.Button
+        size="small"
+        key={index}
+        href={item.link?.url}
+        aria-label={item.link?.aria}
+      >
+        {item.text}
+      </S.Button>
+    )
+  )
+}
+
 export default AppBar

src/components/AppBar/styles.ts

@@ -1,5 +1,7 @@
 import {
   AppBar as AppBarCore,
+  Button as ButtonCore,
+  Container,
   darken,
   IconButton as IconButtonCore,
   Toolbar as ToolbarCore
@@ -9,7 +11,7 @@ import styled from 'styled-components'
 export const Wrapper = styled.div``
 
 export const AppBar = styled(AppBarCore)`
-  top: 40px;
+  top: ${(props) => (props['data-secondary-app-bar'] ? '40px' : 0)};
 `
 
 export const SecondaryAppBar = styled.div`
@@ -22,7 +24,14 @@ export const SecondaryAppBar = styled.div`
   z-index: 1200;
 `
 
-export const SecondaryAppBarLeftContent = styled.div``
+export const SecondaryAppBarContainer = styled(Container)`
+  display: flex;
+`
+
+export const SecondaryAppBarLeftContent = styled.div`
+  display: flex;
+  flex: 1;
+`
 
 export const SecondaryAppBarRightContent = styled.div``
 
@@ -32,3 +41,5 @@ export const Toolbar = styled(ToolbarCore)`
   padding-left: 0;
   padding-right: 0;
 `
+
+export const Button = styled(ButtonCore)``

src/components/AppBar/types.ts

@@ -1,3 +1,5 @@
+import { ReactElement } from 'react'
+
 export interface IAppBar {
   testID?: string
   secondaryAppBar?: ISecondaryAppBar
@@ -9,9 +11,15 @@ export interface ISecondaryAppBar {
 }
 
 export interface ISecondaryAppBarContent {
-  text: string
+  text: string | ReactElement
   link?: {
     aria: string
     url: string
+    icon: boolean
   }
 }
+
+export interface ISecondaryAppBarButton {
+  index: number
+  item: ISecondaryAppBarContent
+}

src/components/Site/index.tsx

@@ -1,12 +1,46 @@
 import { IAppBar } from 'components/AppBar/types'
 import * as S from './styles'
 import { ISite } from './types'
+import FacebookIcon from '@material-ui/icons/Facebook'
+import InstagramIcon from '@material-ui/icons/Instagram'
+import TwitterIcon from '@material-ui/icons/Twitter'
 
 const appBarProps: IAppBar = {
   secondaryAppBar: {
     leftContent: [
       {
-        text: 'item'
+        text: 'Frannca',
+        link: {
+          url: 'http://frannca.com',
+          aria: 'Link to Frannca',
+          icon: false
+        }
+      }
+    ],
+    rightContent: [
+      {
+        text: <FacebookIcon />,
+        link: {
+          url: 'https://facebook.com',
+          aria: 'Link to Facebook',
+          icon: true
+        }
+      },
+      {
+        text: <TwitterIcon />,
+        link: {
+          url: 'https://twitter.com',
+          aria: 'Link to Twitter',
+          icon: true
+        }
+      },
+      {
+        text: <InstagramIcon />,
+        link: {
+          url: 'https://www.instagram.com',
+          aria: 'Link to Instagram',
+          icon: true
+        }
       }
     ]
   }