ui: first pass on redesign (#228)

src/components/Header/index.tsx

@@ -1,6 +1,7 @@
-import React, { FC, Fragment } from "react"
+import React from "react"
+import cx from "classnames"
 
-import ChevronUp from "../../icons/chevron-up.svg"
+import { HeaderBarebone } from "../HeaderBarebone"
 import { Breadcrumb } from "../Breadcrumb"
 import { StackedAvatars } from "../StackedAvatars"
 import * as SC from "./styles"
@@ -9,54 +10,24 @@ interface IHeaderProps {
   relativePath: string
   basePath: string
   title: string
-  authors?: Array<{
+  authors?: {
     avatar: string
     hash: string
     name: string
-  }>
+  }[]
   createdAt: string
   timeToRead: number
-  recommendedReading?: string[]
-  externalResources?: string[]
+  shifted: boolean
 }
 
-function ExtraLink({
-  item,
-  external = false,
-}: {
-  item: string
-  external?: boolean
-}) {
-  const Inner = () => (
-    <Fragment>
-      <ChevronUp /> <SC.ExtraLinkText>{item}</SC.ExtraLinkText>
-    </Fragment>
-  )
-
-  if (external) {
-    return (
-      <SC.ExtraLinkExternal href={item} target="_blank">
-        <Inner />
-      </SC.ExtraLinkExternal>
-    )
-  }
-
-  return (
-    <SC.ExtraLinkInternal to={`/resources/${item}.md`}>
-      <Inner />
-    </SC.ExtraLinkInternal>
-  )
-}
-
-export const Header: FC<IHeaderProps> = ({
+export const Header: React.FC<IHeaderProps> = ({
   basePath,
   relativePath,
   title,
   authors,
   createdAt,
   timeToRead,
-  recommendedReading,
-  externalResources,
+  shifted,
 }) => {
   const date = new Date(createdAt)
   const month = date.toLocaleString("default", { month: "long" })
@@ -65,48 +36,31 @@ export const Header: FC<IHeaderProps> = ({
   const dateToHuman = `${month} ${day}, ${year}`
 
   return (
-    <SC.HeaderWrapper>
-      <Breadcrumb relativePath={relativePath} basePath={basePath} />
-
-      <SC.Title>{title}</SC.Title>
-
-      <SC.Top>
-        {authors && (
+    <HeaderBarebone
+      above={<Breadcrumb relativePath={relativePath} basePath={basePath} />}
+      title={title}
+      className={cx({ shifted })}
+      content={
+        <SC.Top>
+          {authors && (
+            <SC.Meta>
+              <StackedAvatars authors={authors} />
+              <SC.PopoverToggler>
+                {authors.length} contributor{authors.length > 1 && "s"}
+                <SC.Popover>
+                  {authors
+                    .map(author => `${author.name}#${author.hash}`)
+                    .join(", ")}
+                </SC.Popover>
+              </SC.PopoverToggler>
+            </SC.Meta>
+          )}
+          {dateToHuman && <SC.Meta>{dateToHuman}</SC.Meta>}
           <SC.Meta>
-            <StackedAvatars authors={authors} />
-            <SC.PopoverToggler>
-              {authors.length} contributor{authors.length > 1 && "s"}
-              <SC.Popover>
-                {authors
-                  .map(author => `${author.name}#${author.hash}`)
-                  .join(", ")}
-              </SC.Popover>
-            </SC.PopoverToggler>
+            {timeToRead} minute{timeToRead !== 1 && "s"} read time
           </SC.Meta>
-        )}
-        {dateToHuman && <SC.Meta>{dateToHuman}</SC.Meta>}
-        <SC.Meta>
-          {timeToRead} minute{timeToRead !== 1 && "s"} read time
-        </SC.Meta>
-      </SC.Top>
-
-      {recommendedReading && (
-        <SC.RecommendedReading>
-          Recommended reading
-          {recommendedReading.map(item => {
-            return <ExtraLink key={item} item={item} />
-          })}
-        </SC.RecommendedReading>
-      )}
-
-      {externalResources && (
-        <SC.ExternalResources>
-          External Resources
-          {externalResources.map(item => {
-            return <ExtraLink key={item} item={item} external />
-          })}
-        </SC.ExternalResources>
-      )}
-    </SC.HeaderWrapper>
+        </SC.Top>
+      }
+    />
   )
 }