feat: bootstrap resource header

2026-09-06 16:06:12 +02:00 · 2019-07-30 08:44:02 -04:00
parent 49ea33049f
commit 75a53a4919
5 changed files with 144 additions and 17 deletions
@@ -0,0 +1,60 @@
+import React from "react"
+
+import ChevronUp from "../../icons/chevron-up.svg"
+import * as SC from "./styles"
+
+interface ResourceHeaderProps {
+  title: any
+  authors: any
+  createdAt: any
+  timeToRead: any
+  recommendedReading: any
+}
+
+export function ResourceHeader({
+  title,
+  authors,
+  createdAt,
+  timeToRead,
+  recommendedReading,
+}: ResourceHeaderProps) {
+  const date = new Date(createdAt)
+  const month = date.toLocaleString("default", { month: "long" })
+  const day = date.getDate()
+  const year = date.getUTCFullYear()
+  const dateToHuman = `${month} ${day}, ${year}`
+
+  return (
+    <SC.ResourceHeaderWrapper>
+      <SC.Title>{title}</SC.Title>
+
+      <SC.Top>
+        <SC.AuthorAvatars>
+          {authors.map(author => (
+            <SC.AuthorAvatar src={author.avatar} />
+          ))}
+        </SC.AuthorAvatars>
+        <SC.Meta>
+          {authors.length} contributor{authors.lenght > 1 && "s"}
+        </SC.Meta>
+        <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 (
+              <SC.ReadLink>
+                <ChevronUp /> <SC.ReadLinkText>{item}</SC.ReadLinkText>
+              </SC.ReadLink>
+            )
+          })}
+        </SC.RecommendedReading>
+      )}
+    </SC.ResourceHeaderWrapper>
+  )
+}