refact(header): extract DiscordButton to its own component

src/components/DiscordButton/index.tsx

@@ -1,13 +1,11 @@
-import React from "react"
+import React, { PropsWithChildren } from "react"
+import * as SC from "./styles"
 
-function DiscordButton({
+function DiscordButton({ children }: PropsWithChildren<{}>) {
-  lined = false,
-  children,
-}: React.PropsWithChildren<{ lined: boolean }>) {
   return (
-    <button>
+    <SC.DiscordButtonWrapper>
-      <div>{children}</div>
+      <SC.StyledDiscordLogo /> {children}
-    </button>
+    </SC.DiscordButtonWrapper>
   )
 }
 

src/components/DiscordButton/styles.tsx

@@ -0,0 +1,28 @@
+import styled from "styled-components"
+import DiscordLogo from "../../images/discord-logo.svg"
+
+export const DiscordButtonWrapper = styled.div`
+  margin-top: 32px;
+  display: flex;
+  align-items: center;
+  font-family: "Oxygen", sans-serif;
+  font-size: 30px;
+  font-weight: 700;
+  text-transform: uppercase;
+  background: #7289da;
+  color: #fff;
+  padding: 22px 35px;
+  border-radius: 5px;
+  transition: background 0.3s;
+  cursor: pointer;
+  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
+
+  &:hover {
+    background: #5265ad;
+  }
+`
+
+export const StyledDiscordLogo = styled(DiscordLogo)`
+  width: 38px;
+  margin-right: 16px;
+`

src/components/Header/index.tsx

@@ -1,5 +1,6 @@
 import { Link } from "gatsby"
 import React, { PropsWithChildren, useLayoutEffect, useState } from "react"
+import DiscordButton from "../DiscordButton"
 import { WavesBottom, WavesTop } from "../Waves"
 import * as SC from "./styles"
 
@@ -82,9 +83,7 @@ export function Header({ isHome }: IHeaderProps) {
           <MenuItem to="/resources">resources</MenuItem>
           <MenuItem to="/">tech spotlight</MenuItem>
         </SC.Menu>
-        <SC.DiscordButton>
+        <DiscordButton>join us</DiscordButton>
-          <SC.StyledDiscordLogo /> join us
-        </SC.DiscordButton>
       </SC.InnerWrapper>
     </SC.HeaderWrapper>
   )

src/components/Header/styles.tsx

@@ -1,7 +1,6 @@
 import { Link } from "gatsby"
 import Particles from "react-particles-js"
 import styled from "styled-components"
-import DiscordLogo from "../../images/discord-logo.svg"
 import TPHLogo from "../../images/tph-logo.svg"
 
 export const HeaderWrapper = styled.header`
@@ -91,32 +90,6 @@ export const StyledParticles = styled(Particles)`
   bottom: 0;
 `
 
-export const DiscordButton = styled.div`
-  margin-top: 32px;
-  display: flex;
-  align-items: center;
-  font-family: "Oxygen", sans-serif;
-  font-size: 30px;
-  font-weight: 700;
-  text-transform: uppercase;
-  background: #7289da;
-  color: #fff;
-  padding: 22px 35px;
-  border-radius: 5px;
-  transition: background 0.3s;
-  cursor: pointer;
-  box-shadow: 0 3px 18px rgba(0, 0, 0, 0.3);
-
-  &:hover {
-    background: #5265ad;
-  }
-`
-
-export const StyledDiscordLogo = styled(DiscordLogo)`
-  width: 38px;
-  margin-right: 16px;
-`
-
 export const InnerWrapper = styled.div`
   width: 800px;
   max-width: calc(100% - 64px);