<commit_before>// @flow

import * as React from 'react'
import styled from '@emotion/styled'

import Logo from './common/atoms/Logo'
import InnerContainer from './common/layouts/InnerContainer'
import HeaderWithSession from './Header--with-session'
import HeaderWithoutSession from './Header--without-session'

export const App = ({
  children,
  session
}: {
  children: React.Node,
  session?: any
}) => (
  <div>
    <Header session={session} />
    {children}
    <Footer />
  </div>
)

export default App

export const Header = ({ session }: { session: any }) =>
  session != null ? (
    <HeaderWithSession session={session} />
  ) : (
    <HeaderWithoutSession />
  )

export const Footer = styled(({ className }) => (
  <InnerContainer>
    <div className={className}>
      <ul>
        <li>&copy; 2016 keik</li>
        <li>
          <a href="#">Help</a>
        </li>
      </ul>
      <Logo href="#">GH</Logo>
      <ul>
        <li>
          <a href="#">API</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
      </ul>
    </div>
  </InnerContainer>
))`
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 0;
  margin-top: 36px;
  border-top: 1px solid #eee;
  color: #767676;
  font-size: 12px;

  > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    > li {
      display: inline-block;
      + li {
        margin-left: 10px;
      }
    }
  }
`
<commit_msg>:recycle: Not use styled API to uncommon UI<commit_after>// @flow

/** @jsx jsx */
import { jsx, css } from '@emotion/core'
import * as React from 'react'

import Logo from './common/atoms/Logo'
import InnerContainer from './common/layouts/InnerContainer'
import HeaderWithSession from './Header--with-session'
import HeaderWithoutSession from './Header--without-session'

export const App = ({
  children,
  session
}: {
  children: React.Node,
  session?: any
}) => (
  <div>
    <Header session={session} />
    {children}
    <Footer />
  </div>
)

export default App

export const Header = ({ session }: { session: any }) =>
  session != null ? (
    <HeaderWithSession session={session} />
  ) : (
    <HeaderWithoutSession />
  )

export const Footer = () => (
  <InnerContainer>
    <div
      css={css`
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px 0;
        margin-top: 36px;
        border-top: 1px solid #eee;
        color: #767676;
        font-size: 12px;
        > ul {
          list-style: none;
          padding: 0;
          margin: 0;
          > li {
            display: inline-block;
            + li {
              margin-left: 10px;
            }
          }
        }
      `}
    >
      <ul>
        <li>&copy; 2016 keik</li>
        <li>
          <a href="#">Help</a>
        </li>
      </ul>
      <Logo href="#">GH</Logo>
      <ul>
        <li>
          <a href="#">API</a>
        </li>
        <li>
          <a href="#">About</a>
        </li>
      </ul>
    </div>
  </InnerContainer>
)

{'fraction_non_alphanumeric': 0.16027531956735497, 'fraction_numerical': 0.014421501147164863, 'mean_word_length': 1.9374398460057747, 'pattern_counts': {'":': 0, '<': 63, '<?xml version=': 0, '>': 73, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '491363', 'n_tokens_mistral': 1056, 'n_tokens_neox': 1003, 'n_words': 246}