feat: parent child retrieval (#12106)

Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: -LAN- <laipz8200@outlook.com>

web/app/components/datasets/preview/container.tsx

@@ -0,0 +1,29 @@
+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='pl-5 pt-4 pr-4 pb-3 border-b border-divider-subtle'>
+        {header}
+      </header>
+      <main className={classNames('py-5 px-6 w-full h-full', mainClassName)}>
+        {children}
+      </main>
+    </div>
+  </div>
+})
+PreviewContainer.displayName = 'PreviewContainer'

web/app/components/datasets/preview/header.tsx

@@ -0,0 +1,23 @@
+import type { ComponentProps, FC } from 'react'
+import classNames from '@/utils/classnames'
+
+export type PreviewHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
+  title: string
+}
+
+export const PreviewHeader: FC<PreviewHeaderProps> = (props) => {
+  const { title, className, children, ...rest } = props
+  return <div
+    {...rest}
+    className={classNames(
+      className,
+    )}
+  >
+    <div
+      className='text-text-accent system-2xs-semibold-uppercase uppercase px-1 mb-1'
+    >
+      {title}
+    </div>
+    {children}
+  </div>
+}