initial commit

src/components/Footer/index.js

@@ -0,0 +1,75 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import React from "react";
+import type { Element } from "react";
+
+import { version } from "../../../package.json";
+import {
+  Wrapper,
+  Left,
+  Right,
+  Earth,
+  Flags,
+  Love,
+  Flag,
+  Logo,
+  Inner,
+  ToolTip
+} from "./styles";
+import { goToVerdaccioWebsite } from "../../utils/windows.js";
+
+const renderTooltip = () => (
+  <ToolTip>
+    <Earth name={"earth"} size={"md"} />
+    <Flags>
+      <Flag name={"spain"} size={"md"} />
+      <Flag name={"nicaragua"} size={"md"} />
+      <Flag name={"india"} size={"md"} />
+      <Flag name={"brazil"} size={"md"} />
+      <Flag name={"pakistan"} size={"md"} />
+      <Flag name={"china"} size={"md"} />
+      <Flag name={"austria"} size={"md"} />
+    </Flags>
+  </ToolTip>
+);
+const POWERED_LABEL = "Powered by";
+const MADEWITH_LABEL = " Made with";
+const ON_LABEL = "on";
+const HEARTH_EMOJI = "♥";
+
+const renderRight = () => (
+  <Right>
+    {POWERED_LABEL}
+    <Logo
+      img={true}
+      name={"verdaccio"}
+      onClick={goToVerdaccioWebsite}
+      pointer={true}
+      size={"md"}
+    />
+    {`/ ${version}`}
+  </Right>
+);
+
+const renderLeft = () => (
+  <Left>
+    {MADEWITH_LABEL}
+    <Love>{HEARTH_EMOJI}</Love>
+    {ON_LABEL}
+    {renderTooltip()}
+  </Left>
+);
+
+const Footer = (): Element<Wrapper> => (
+  <Wrapper>
+    <Inner>
+      {renderLeft()}
+      {renderRight()}
+    </Inner>
+  </Wrapper>
+);
+
+export default Footer;

src/components/Footer/styles.js

@@ -0,0 +1,107 @@
+/**
+ * @prettier
+ * @flow
+ */
+
+import styled, { css } from 'react-emotion';
+import mq from '../../utils/styles/media';
+import Icon from '../Icon';
+
+export const Wrapper = styled.div`
+  && {
+    background: #f9f9f9;
+    border-top: 1px solid #e3e3e3;
+    color: #999999;
+    font-size: 14px;
+    padding: 20px;
+  }
+`;
+
+export const Inner = styled.div`
+  && {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+    ${mq.medium(css`
+      min-width: 400px;
+      max-width: 800px;
+      margin: auto;
+      justify-content: space-between;
+    `)};
+    ${mq.large(css`
+      max-width: 1240px;
+    `)};
+  }
+`;
+
+export const Left = styled.div`
+  && {
+    align-items: center;
+    display: none;
+    ${mq.medium(css`
+      display: flex;
+    `)};
+  }
+`;
+
+export const Right = styled(Left)`
+  && {
+    display: flex;
+  }
+`;
+
+export const ToolTip = styled.span`
+  && {
+    position: relative;
+    height: 18px;
+  }
+`;
+
+export const Earth = styled(Icon)`
+  && {
+    padding: 0 10px;
+  }
+`;
+
+export const Flags = styled.span`
+  && {
+    position: absolute;
+    background: #d3dddd;
+    padding: 1px 4px;
+    border-radius: 3px;
+    height: 20px;
+    display: inline-flex;
+    align-items: center;
+    visibility: hidden;
+    top: -2px;
+    :before {
+      content: '';
+      position: absolute;
+      top: 29%;
+      left: -4px;
+      margin-left: -5px;
+      border: 5px solid;
+      border-color: #d3dddd transparent transparent transparent;
+      transform: rotate(90deg);
+    }
+    ${ToolTip}:hover & {
+      visibility: visible;
+    }
+  }
+`;
+
+export const Love = styled.span`
+  && {
+    color: #e25555;
+    padding: 0 5px;
+  }
+`;
+
+export const Flag = styled(Icon)`
+  && {
+    padding: 0 5px;
+  }
+`;
+
+export const Logo = Flag;