docs: add routing page (#9550)

- Add a new homepage to `book` project for the routing page
- Move all main doc pages to be under `/v2/learn` (and added redirects + fixed links across docs)
- Other: add admin components to resources dropdown + fixes to search on mobile.

Closes DX-955

Preview: https://docs-v2-git-docs-router-page-medusajs.vercel.app/v2

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

@@ -0,0 +1,105 @@
+"use client"
+
+import React from "react"
+import { CodeBlock, CodeBlockProps } from "../CodeBlock"
+import clsx from "clsx"
+
+export type VerticalCodeTab = {
+  title: string
+  code: CodeBlockProps
+} & Record<string, unknown>
+
+export type VerticalCodeTabsProps = {
+  tabs: VerticalCodeTab[]
+  className?: string
+  selectedTabIndex: number
+  setSelectedTabIndex: (value: number) => void
+}
+
+export const VerticalCodeTabs = ({
+  tabs,
+  className,
+  selectedTabIndex,
+  setSelectedTabIndex,
+}: VerticalCodeTabsProps) => {
+  return (
+    <div
+      className={clsx(
+        "rounded-[20px] bg-medusa-bg-subtle p-docs_0.5",
+        "shadow-elevation-modal dark:shadow-elevation-modal-dark",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "rounded-docs_lg bg-medusa-contrast-bg-base h-full",
+          "shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
+          "flex flex-col"
+        )}
+      >
+        <div
+          className={clsx(
+            "px-docs_1 py-docs_0.75",
+            "flex gap-[6px] items-center"
+          )}
+        >
+          {new Array(3).fill(0).map((_, index) => (
+            <span
+              className={clsx(
+                "inline-block rounded-full w-[10px] h-[10px]",
+                "bg-medusa-contrast-border-bot border border-medusa-contrast-border-bot"
+              )}
+              key={index}
+            />
+          ))}
+        </div>
+        <div
+          className={clsx(
+            "flex flex-1 gap-[6px] items-start px-[5px] pb-[5px]"
+          )}
+        >
+          <ul className="2xl:w-[180px] flex flex-col gap-[6px] shrink-0">
+            {tabs.map((tab, index) => (
+              <li
+                className={clsx(
+                  "px-docs_0.75 py-[11px]",
+                  "rounded-docs_DEFAULT border border-medusa-contrast-border-bot",
+                  "text-code-body font-monospace cursor-pointer",
+                  selectedTabIndex === index &&
+                    "text-medusa-contrast-fg-primary bg-medusa-contrast-border-bot",
+                  selectedTabIndex !== index &&
+                    "text-medusa-contrast-fg-secondary bg-medusa-contrast-bg-subtle hover:bg-medusa-contrast-border-bot"
+                )}
+                onClick={() => setSelectedTabIndex(index)}
+                key={index}
+              >
+                {tab.title}
+              </li>
+            ))}
+          </ul>
+          <div className="flex-1 h-[388px] max-w-full overflow-hidden rounded-docs_DEFAULT [&_pre]:min-h-full">
+            <CodeBlock
+              {...tabs[selectedTabIndex].code}
+              noCopy={true}
+              noReport={true}
+              forceNoTitle={true}
+              wrapperClassName="h-full !rounded-docs_DEFAULT"
+              className={clsx(
+                "overflow-auto h-full max-h-full !mb-0 !rounded-docs_DEFAULT",
+                "!border !border-medusa-contrast-border-bot"
+              )}
+              innerClassName="h-full"
+              animateTokenHighlights
+              overrideColors={{
+                bg: "bg-medusa-contrast-bg-subtle",
+                innerBg: "bg-medusa-contrast-bg-subtle",
+                lineNumbersBg: "bg-medusa-contrast-bg-subtle",
+                boxShadow: "shadow-none",
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}