Merge pull request #104 from ruedap/refactor-styled-components

Refactor styled-components

components/atoms/footer_logo/index.tsx

@@ -1,17 +1,7 @@
 import { PORTFOLIO_SITE_NAME } from '@/utils/constants'
+import * as Styled from './styled'
 
 // TODO: inline svg
-const FooterLogo = () => <Img src="/images/common/footer-logo.svg" alt={PORTFOLIO_SITE_NAME} />
+const FooterLogo = () => <Styled.Img src="/images/common/footer-logo.svg" alt={PORTFOLIO_SITE_NAME} />
 
 export default FooterLogo
-
-import styled from 'styled-components'
-import Styles from '@/styles'
-
-const Img = styled.img`
-  opacity: ${Styles.funcs.fibo('md', 'alpha')};
-  transition: opacity 0.3s;
-  &:hover {
-    opacity: ${Styles.funcs.fibo('lg', 'alpha')};
-  }
-`

components/atoms/footer_logo/styled.ts

@@ -0,0 +1,10 @@
+import styled from 'styled-components'
+import Styles from '@/styles'
+
+export const Img = styled.img`
+  opacity: ${Styles.funcs.fibo('md', 'alpha')};
+  transition: opacity 0.3s;
+  &:hover {
+    opacity: ${Styles.funcs.fibo('lg', 'alpha')};
+  }
+`

components/atoms/time_svg/index.tsx

@@ -1,34 +1,14 @@
+import * as Styled from './styled'
+
 const TimeSvg = ({ date }) => {
   return (
-    <Svg version="1.1" viewBox="0 0 987 610">
-      <Circle cx={173} cy={377} r={116} />
-      <Text x={173} y={377} textAnchor="middle" dy={7} stroke="none">
+    <Styled.Svg version="1.1" viewBox="0 0 987 610">
+      <Styled.Circle cx={173} cy={377} r={116} />
+      <Styled.Text x={173} y={377} textAnchor="middle" dy={7} stroke="none">
         { date.replace(/-/g, '.') }
-      </Text>
-    </Svg>
+      </Styled.Text>
+    </Styled.Svg>
   )
 }
 
 export default TimeSvg
-
-import styled from 'styled-components'
-import Styles from '@/styles'
-
-const Svg = styled.svg`
-  display: block;
-  left: 0;
-  position: absolute;
-  top: 0;
-`
-
-const Circle = styled.circle`
-  fill: rgba(var(--b-rgb-base), ${Styles.funcs.fibo('sm', 'alpha')});
-`
-
-const Text = styled.text`
-  ${Styles.mixins.fontSmoothing()};
-  fill: #fff;
-  font-family: var(--b-fontFamily-fjalla);
-  font-size: ${Styles.funcs.fibo('xs', 'rem')};
-  letter-spacing: 0.1em;
-`

components/atoms/time_svg/styled.ts

@@ -0,0 +1,21 @@
+import styled from 'styled-components'
+import Styles from '@/styles'
+
+export const Svg = styled.svg`
+  display: block;
+  left: 0;
+  position: absolute;
+  top: 0;
+`
+
+export const Circle = styled.circle`
+  fill: rgba(var(--b-rgb-base), ${Styles.funcs.fibo('sm', 'alpha')});
+`
+
+export const Text = styled.text`
+  ${Styles.mixins.fontSmoothing()};
+  fill: #fff;
+  font-family: var(--b-fontFamily-fjalla);
+  font-size: ${Styles.funcs.fibo('xs', 'rem')};
+  letter-spacing: 0.1em;
+`

components/molecules/footer/index.tsx

@@ -1,72 +1,20 @@
 import FooterLogo from '@/components/atoms/footer_logo'
 import { PORTFOLIO_SITE_NAME } from '@/utils/constants'
+import * as Styled from './styled'
 
 const Footer = () => {
   return (
-    <Root>
-      <Container>
-        <Heading>
-          <LogoSpacer>{PORTFOLIO_SITE_NAME}</LogoSpacer>
-          <LogoLink href="https://ruedap.com">
+    <Styled.Root>
+      <Styled.Container>
+        <Styled.Heading>
+          <Styled.LogoSpacer>{PORTFOLIO_SITE_NAME}</Styled.LogoSpacer>
+          <Styled.LogoLink href="https://ruedap.com">
             <FooterLogo />
-          </LogoLink>
-        </Heading>
-      </Container>
-    </Root>
+          </Styled.LogoLink>
+        </Styled.Heading>
+      </Styled.Container>
+    </Styled.Root>
   )
 }
 
 export default Footer
-
-import styled, { css } from 'styled-components'
-import Styles from '@/styles'
-const mq = Styles.mq
-
-const Root = styled.footer`
-  display: block;
-  position: relative;
-`
-
-const Container = styled.div`
-  ${Styles.mixins.container};
-  background-image: linear-gradient(var(--b-color-key3) 0, var(--b-color-key4) 100%);
-  ${
-    mq.up.lg(css`
-      &::before {
-        ${Styles.mixins.dapicons};
-        color: var(--b-color-key2);
-        content: "ruedap";
-        font-size: 5.5rem;
-        left: 50%;
-        position: absolute;
-        top: 377px;
-        transform: translate(-50%, -100%);
-      }
-    `)
-  }
-`
-
-const Heading = styled.div`
-  margin: 0;
-  position: relative;
-`
-
-const LogoSpacer = styled.div`
-  display: block;
-  font-size: 0;
-  /* 1129 / 987 = 1.143870314 */
-  padding-bottom: 114.387%;
-  position: relative;
-  width: 100%;
-`
-
-const LogoLink = styled.a`
-  bottom: 0;
-  display: block;
-  height: auto;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-`

components/molecules/footer/styled.ts

@@ -0,0 +1,53 @@
+import styled, { css } from 'styled-components'
+import Styles from '@/styles'
+
+const mq = Styles.mq
+
+export const Root = styled.footer`
+  display: block;
+  position: relative;
+`
+
+export const Container = styled.div`
+  ${Styles.mixins.container};
+  background-image: linear-gradient(var(--b-color-key3) 0, var(--b-color-key4) 100%);
+  ${
+    mq.up.lg(css`
+      &::before {
+        ${Styles.mixins.dapicons};
+        color: var(--b-color-key2);
+        content: "ruedap";
+        font-size: 5.5rem;
+        left: 50%;
+        position: absolute;
+        top: 377px;
+        transform: translate(-50%, -100%);
+      }
+    `)
+  }
+`
+
+export const Heading = styled.div`
+  margin: 0;
+  position: relative;
+`
+
+export const LogoSpacer = styled.div`
+  display: block;
+  font-size: 0;
+  /* 1129 / 987 = 1.143870314 */
+  padding-bottom: 114.387%;
+  position: relative;
+  width: 100%;
+`
+
+export const LogoLink = styled.a`
+  bottom: 0;
+  display: block;
+  height: auto;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+`

components/molecules/header/index.tsx

@@ -1,66 +1,24 @@
 import Link from 'next/link'
 import HeaderLogo from '@/components/atoms/header_logo'
+import * as Styled from './styled'
 
 const Header = () => {
   return (
     <header>
-      <Inner>
-        <Heading>
+      <Styled.Inner>
+        <Styled.Heading>
           <Link href="/" passHref>
-            <LogoLink>
-              <LogoSpacer />
-              <LogoOuter>
+            <Styled.LogoLink>
+              <Styled.LogoSpacer />
+              <Styled.LogoOuter>
                 <HeaderLogo />
-              </LogoOuter>
-            </LogoLink>
+              </Styled.LogoOuter>
+            </Styled.LogoLink>
           </Link>
-        </Heading>
-      </Inner>
+        </Styled.Heading>
+      </Styled.Inner>
     </header>
   )
 }
 
 export default Header
-
-import styled from 'styled-components'
-import Styles from '@/styles'
-
-const Inner = styled.div`
-  ${Styles.mixins.container}
-  background-color: #fff;
-`
-
-const Heading = styled.div`
-  margin: 0;
-  padding-bottom: 11.854%;
-`
-
-const LogoLink = styled.a`
-  display: block;
-  position: relative;
-  width: 100%;
-`
-
-const LogoSpacer = styled.div`
-  display: block;
-  font-size: 0;
-  margin-top: -50%;
-  padding-bottom: 100%;
-  position: relative;
-  width: 100%;
-`
-
-const LogoOuter = styled.div`
-  background-color: var(--b-bgColor-body);
-  background-image: radial-gradient(var(--b-bgColor-body), var(--b-color-key3));
-  border-radius: 100%;
-  bottom: 0;
-  display: block;
-  height: auto;
-  left: 0;
-  margin: auto;
-  position: absolute;
-  right: 0;
-  top: 0;
-  width: 100%;
-`

components/molecules/header/styled.ts

@@ -0,0 +1,42 @@
+import styled from 'styled-components'
+import Styles from '@/styles'
+
+export const Inner = styled.div`
+  ${Styles.mixins.container}
+  background-color: #fff;
+`
+
+export const Heading = styled.div`
+  margin: 0;
+  padding-bottom: 11.854%;
+`
+
+export const LogoLink = styled.a`
+  display: block;
+  position: relative;
+  width: 100%;
+`
+
+export const LogoSpacer = styled.div`
+  display: block;
+  font-size: 0;
+  margin-top: -50%;
+  padding-bottom: 100%;
+  position: relative;
+  width: 100%;
+`
+
+export const LogoOuter = styled.div`
+  background-color: var(--b-bgColor-body);
+  background-image: radial-gradient(var(--b-bgColor-body), var(--b-color-key3));
+  border-radius: 100%;
+  bottom: 0;
+  display: block;
+  height: auto;
+  left: 0;
+  margin: auto;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+`