mirror of
https://github.com/langgenius/dify.git
synced 2025-11-03 20:33:00 +00:00
7709d9df20
Co-authored-by: NFish <douxc512@gmail.com> Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: twwu <twwu@dify.ai> Co-authored-by: jZonG <jzongcode@gmail.com>
30 lines
1019 B
TypeScript
30 lines
1019 B
TypeScript
import type { ComponentProps, FC, ReactNode } from 'react'
|
|
import { forwardRef } from 'react'
|
|
import classNames from '@/utils/classnames'
|
|
|
|
export type PreviewContainerProps = ComponentProps<'div'> & {
|
|
header: ReactNode
|
|
mainClassName?: string
|
|
}
|
|
|
|
export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, ref) => {
|
|
const { children, className, header, mainClassName, ...rest } = props
|
|
return <div className={className}>
|
|
<div
|
|
{...rest}
|
|
ref={ref}
|
|
className={classNames(
|
|
'flex flex-col w-full h-full overflow-y-auto rounded-l-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
|
|
)}
|
|
>
|
|
<header className='border-b border-divider-subtle pb-3 pl-5 pr-4 pt-4'>
|
|
{header}
|
|
</header>
|
|
<main className={classNames('py-5 px-6 w-full h-full', mainClassName)}>
|
|
{children}
|
|
</main>
|
|
</div>
|
|
</div>
|
|
})
|
|
PreviewContainer.displayName = 'PreviewContainer'
|