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>
   )