feat(archives): bootstrap what-is-archives from Github

src/components/Breadcrumb/index.tsx

@@ -0,0 +1,73 @@
+import React, { FC } from "react"
+
+import ChevronUp from "../../icons/chevron-up.svg"
+import { IFileOrFolder } from "../../types"
+import { humanize, traversePaths } from "../../utils"
+import * as SC from "./styles"
+
+interface ILinkProps {
+  item: IFileOrFolder
+}
+
+interface IBreadcrumbProps {
+  relativePath: any
+  basePath: string
+}
+
+const Link: FC<ILinkProps> = ({ item }) => {
+  return <SC.StyledLink to={item.path}>{humanize(item.title)}</SC.StyledLink>
+}
+
+function flatten([
+  currNode,
+  ...previousNodes
+]: IFileOrFolder[]): IFileOrFolder[] {
+  if (currNode.type === "file") {
+    return [...previousNodes, currNode]
+  }
+
+  return flatten([...currNode.children, ...previousNodes, currNode])
+}
+
+export function Breadcrumb({ relativePath, basePath }: IBreadcrumbProps) {
+  const paths = relativePath.split("/")
+  const breadcrumbItems = flatten([traversePaths(paths, basePath)])
+
+  return (
+    <SC.BreadcrumbWrapper>
+      <SC.LinkWrapper>
+        <Link
+          item={{ path: "/", title: "home", type: "folder", children: [] }}
+        />
+        <ChevronUp />
+      </SC.LinkWrapper>
+      <SC.LinkWrapper>
+        <Link
+          item={{
+            path: basePath,
+            title: basePath.replace(/\//, ""),
+            type: "folder",
+            children: [],
+          }}
+        />
+        <ChevronUp />
+      </SC.LinkWrapper>
+      {breadcrumbItems.map(item => {
+        if (item.type === "folder") {
+          return (
+            <SC.LinkWrapper key={item.path}>
+              <Link item={item} />
+              <ChevronUp />
+            </SC.LinkWrapper>
+          )
+        }
+
+        return (
+          <SC.CurrentPage key={item.path}>
+            {humanize(item.title)}
+          </SC.CurrentPage>
+        )
+      })}
+    </SC.BreadcrumbWrapper>
+  )
+}

src/components/Breadcrumb/styles.tsx

@@ -0,0 +1,48 @@
+import { Link } from "gatsby"
+import { darken, lighten } from "polished"
+import styled from "styled-components"
+
+export const BreadcrumbWrapper = styled.div`
+  display: flex;
+  align-items: flex-start;
+
+  @media screen and (max-width: 767px) {
+    flex-wrap: wrap;
+    margin-bottom: 16px;
+  }
+`
+
+export const LinkWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  height: 30px;
+
+  svg {
+    width: 12px;
+    transform: rotate(90deg);
+    margin: 6px;
+  }
+
+  svg path {
+    fill: ${props => props.theme.main.link};
+  }
+`
+
+export const StyledLink = styled(Link)`
+  color: ${props => props.theme.main.link};
+  cursor: pointer;
+
+  &:hover {
+    color: #045551;
+    color: ${props =>
+      props.theme.name === "dark"
+        ? lighten(0.15, props.theme.main.link)
+        : darken(0.15, props.theme.main.link)};
+  }
+`
+
+export const CurrentPage = styled.div`
+  display: flex;
+  align-items: center;
+  height: 30px;
+`