51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import type { ReactNode } from "react"
|
|
import {
|
|
Frame,
|
|
FrameDescription,
|
|
FrameHeader,
|
|
FramePanel,
|
|
FrameTitle,
|
|
} from "@/components/reui/frame"
|
|
import { cn } from "@/lib/utils"
|
|
|
|
/**
|
|
* Ops section shell — ReUI Frame (settings-3 / chart-15 DNA).
|
|
* Preview: https://reui.io/preview/base/settings-3 · https://reui.io/docs/components/base/frame
|
|
*/
|
|
export function OpsPanel({
|
|
title,
|
|
description,
|
|
headerRight,
|
|
children,
|
|
className,
|
|
contentClassName,
|
|
id,
|
|
}: {
|
|
title?: ReactNode
|
|
description?: ReactNode
|
|
headerRight?: ReactNode
|
|
children: ReactNode
|
|
className?: string
|
|
contentClassName?: string
|
|
id?: string
|
|
}) {
|
|
return (
|
|
<Frame dense id={id} className={cn("w-full", className)}>
|
|
<FramePanel className="flex flex-col gap-0 p-0">
|
|
{title || description || headerRight ? (
|
|
<FrameHeader className="gap-1 border-b px-5 py-3">
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="min-w-0">
|
|
{title ? <FrameTitle className="text-base">{title}</FrameTitle> : null}
|
|
{description ? <FrameDescription>{description}</FrameDescription> : null}
|
|
</div>
|
|
{headerRight ? <div className="shrink-0">{headerRight}</div> : null}
|
|
</div>
|
|
</FrameHeader>
|
|
) : null}
|
|
<div className={contentClassName}>{children}</div>
|
|
</FramePanel>
|
|
</Frame>
|
|
)
|
|
}
|