0a37675f0e
- 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
106 lines
3.3 KiB
TypeScript
106 lines
3.3 KiB
TypeScript
"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>
|
|
)
|
|
}
|