Files
medusa-store/www/apps/api-reference/layouts/Divided/index.tsx
Shahed Nasser 522d3ce764 docs: improvements to API reference intro sections (#9397)
- Improve intro sections of API reference to utilize divided columns
- Improve the content of the intro sections
- Add a new Workflows section to explain the workflows badge and how to use it
- Fixes to headings and add anchor for copying the link to a section
- Fixes responsiveness of intro sections on mobile devices
- Other: fix loading not showing when a sidebar category is opened.

Closes DOCS-932, DOCS-934, DOCS-937

Preview: https://api-reference-v2-git-docs-api-ref-intro-fixes-medusajs.vercel.app/v2/api/store
2024-10-06 16:51:08 +00:00

57 lines
1.3 KiB
TypeScript

import clsx from "clsx"
import { forwardRef } from "react"
export type DividedLayoutProps = {
mainContent: React.ReactNode
codeContent: React.ReactNode
className?: string
mainContentClassName?: string
codeContentClassName?: string
addYSpacing?: boolean
}
const DividedLayout = forwardRef<HTMLDivElement, DividedLayoutProps>(
function DividedLayout(
{
mainContent,
codeContent,
className,
mainContentClassName,
codeContentClassName,
addYSpacing = false,
},
ref
) {
return (
<div
className={clsx(
"flex w-full flex-col justify-between lg:flex-row lg:gap-4",
addYSpacing && "my-3",
className
)}
ref={ref}
>
<div
className={clsx(
"w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pl-4",
mainContentClassName
)}
>
{mainContent}
</div>
<div
className={clsx(
"w-full flex-shrink-0 flex-grow-0 lg:w-[calc(50%-32px)] lg:basis-[calc(50%-32px)] lg:pr-1.5",
"mt-2 lg:mt-0",
codeContentClassName
)}
>
{codeContent}
</div>
</div>
)
}
)
export default DividedLayout