Rename archive components

src/components/SpotlightsSidebar/index.tsx

@@ -0,0 +1,57 @@
+import { graphql, useStaticQuery } from "gatsby"
+import sort from "ramda/es/sort"
+import React, { FC, HTMLAttributes } from "react"
+import useBuildTree from "../../hooks/useBuildTree"
+import { useLockBodyScroll } from "../../hooks/useLockBodyScroll"
+import useSidebar from "../../hooks/useSidebar"
+import { IFileOrFolder } from "../../types"
+import { humanize } from "../../utils"
+import { Sidebar } from "../Sidebar"
+import * as SC from "./styles"
+
+const ALL_SPOTLIGHTS = graphql`
+  query {
+    spotlights: allFile(
+      filter: { sourceInstanceName: { eq: "spotlights" } }
+    ) {
+      edges {
+        node {
+          relativePath
+        }
+      }
+    }
+  }
+`
+
+function Tree({ item }: { item: IFileOrFolder }) {
+  const { setOpenOnMobile } = useSidebar()
+  const { unlock } = useLockBodyScroll()
+
+  return (
+    <SC.PageLink
+      key={item.title}
+      to={item.path}
+      activeClassName="active"
+      onClick={() => {
+        setOpenOnMobile(false)
+        unlock()
+      }}
+    >
+      {humanize(item.title)}
+    </SC.PageLink>
+  )
+}
+
+export const SpotlightsSidebar: FC<HTMLAttributes<HTMLDivElement>> = (props) => {
+  const { spotlights } = useStaticQuery(ALL_SPOTLIGHTS)
+  const tree = useBuildTree(spotlights, "/spotlights")
+  const sortedTree = sort((a, b) => a.title.localeCompare(b.title), tree)
+
+  return (
+    <Sidebar {...props}>
+      {sortedTree.map((node) => (
+        <Tree item={node} key={node.path} />
+      ))}
+    </Sidebar>
+  )
+}