docs: added edit date (#8623)

www/packages/docs-ui/src/components/MainNav/Divider/index.tsx

@@ -4,10 +4,7 @@ import React from "react"
 export const MainNavDivider = () => {
   return (
     <span
-      className={clsx(
-        "h-docs_0.75 w-px block bg-medusa-border-base",
-        "mx-docs_0.5"
-      )}
+      className={clsx("h-docs_0.75 w-px block bg-medusa-border-base")}
     ></span>
   )
 }

www/packages/docs-ui/src/components/MainNav/EditDate/index.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+const DATE_REGEX = /^[a-zA-Z]+ (?<month>[a-zA-Z]+)/
+
+type MainNavEditDateProps = {
+  date: string
+}
+
+export const MainNavEditDate = ({ date }: MainNavEditDateProps) => {
+  const today = new Date(date)
+  const dateObj = new Date(date)
+  const formattedDate = dateObj.toString()
+  const dateMatch = DATE_REGEX.exec(formattedDate)
+
+  if (!dateMatch?.groups?.month) {
+    return <></>
+  }
+
+  return (
+    <>
+      <span>
+        Edited {dateMatch.groups.month} {dateObj.getDate()}
+        {dateObj.getFullYear() !== today.getFullYear()
+          ? `, ${dateObj.getFullYear()}`
+          : ""}
+      </span>
+      <span className="text-compact-small-plus">&#183;</span>
+    </>
+  )
+}

www/packages/docs-ui/src/components/MainNav/index.tsx

@@ -11,9 +11,10 @@ import { MainNavDivider } from "./Divider"
 import { MainNavSidebarOpener } from "./SidebarOpener"
 import { MainNavHelpButton } from "./HelpButton"
 import { SidebarLeftIcon } from "../Icons/SidebarLeft"
+import { MainNavEditDate } from "./EditDate"
 
 export const MainNav = () => {
-  const { reportIssueLink } = useMainNav()
+  const { reportIssueLink, editDate } = useMainNav()
   const { setMobileSidebarOpen } = useSidebar()
   return (
     <div
@@ -35,14 +36,17 @@ export const MainNav = () => {
         <MainNavigationDropdown />
         <MainNavBreadcrumbs />
       </div>
-      <div className="flex items-center gap-docs_0.25">
-        <Link href={reportIssueLink} className="text-medusa-fg-muted">
-          Report Issue
-        </Link>
+      <div className="flex items-center gap-docs_0.75">
+        <div className="flex items-center gap-[6px] text-medusa-fg-muted">
+          {editDate && <MainNavEditDate date={editDate} />}
+          <Link href={reportIssueLink}>Report Issue</Link>
+        </div>
         <MainNavDivider />
-        <MainNavHelpButton />
-        <MainNavColorMode />
-        <SearchModalOpener />
+        <div className="flex items-center gap-docs_0.25">
+          <MainNavHelpButton />
+          <MainNavColorMode />
+          <SearchModalOpener />
+        </div>
       </div>
     </div>
   )

www/packages/docs-ui/src/providers/MainNav/index.tsx

@@ -1,12 +1,13 @@
 "use client"
 
-import React, { createContext, useContext, useMemo, useState } from "react"
+import React, { createContext, useContext, useMemo } from "react"
 import { NavigationDropdownItem } from "types"
 
 export type MainNavContext = {
   navItems: NavigationDropdownItem[]
   activeItem?: NavigationDropdownItem
   reportIssueLink: string
+  editDate?: string
 }
 
 const MainNavContext = createContext<MainNavContext | null>(null)
@@ -14,6 +15,7 @@ const MainNavContext = createContext<MainNavContext | null>(null)
 export type MainNavProviderProps = {
   navItems: NavigationDropdownItem[]
   reportIssueLink: string
+  editDate?: string
   children?: React.ReactNode
 }
 
@@ -21,6 +23,7 @@ export const MainNavProvider = ({
   navItems,
   reportIssueLink,
   children,
+  editDate,
 }: MainNavProviderProps) => {
   const activeItem = useMemo(
     () => navItems.find((item) => item.type === "link" && item.isActive),
@@ -33,6 +36,7 @@ export const MainNavProvider = ({
         navItems,
         activeItem,
         reportIssueLink,
+        editDate,
       }}
     >
       {children}