feat: preview container components

web/app/components/base/divider/index.tsx

@@ -18,7 +18,7 @@ const dividerVariants = cva(
   },
 )
 
-type DividerProps = {
+export type DividerProps = {
   className?: string
   style?: CSSProperties
 } & VariantProps<typeof dividerVariants>

web/app/components/base/divider/with-label.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react'
+import type { DividerProps } from '.'
+import Divider from '.'
+import classNames from '@/utils/classnames'
+
+export type DividerWithLabelProps = DividerProps & {
+  label: string
+}
+
+export const DividerWithLabel: FC<DividerWithLabelProps> = (props) => {
+  const { label, className, ...rest } = props
+  return <div
+    className="flex items-center gap-2 my-2"
+  >
+    <Divider {...rest} className={classNames('flex-1', className)} />
+    <span className="text-text-tertiary text-xs">
+      {label}
+    </span>
+    <Divider {...rest} className={classNames('flex-1', className)} />
+  </div>
+}
+
+export default DividerWithLabel

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

@@ -0,0 +1,27 @@
+import type { ComponentProps, FC, ReactNode } from 'react'
+import { forwardRef } from 'react'
+import classNames from '@/utils/classnames'
+
+export type PreviewContainerProps = ComponentProps<'div'> & {
+  header: ReactNode
+}
+
+export const PreviewContainer: FC<PreviewContainerProps> = forwardRef((props, ref) => {
+  const { children, className, header, ...rest } = props
+  return <div
+    {...rest}
+    ref={ref}
+    className={classNames(
+      'flex flex-col rounded-xl border-t-[0.5px] border-l-[0.5px] border-components-panel-border bg-background-default-lighter shadow shadow-shadow-shadow-5',
+      className,
+    )}
+  >
+    <header className='py-4 pl-5 pr-3 border-b border-divider-subtle'>
+      {header}
+    </header>
+    <main className='py-5 px-6'>
+      {children}
+    </main>
+  </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 text-2xs font-semibold leading-3 uppercase'
+    >
+      {title}
+    </div>
+    {children}
+  </div>
+}

web/app/dev-preview/page.tsx

@@ -2,34 +2,35 @@
 
 import { FormattedText } from '../components/datasets/formatted-text/formatted'
 import { PreviewSlice } from '../components/datasets/formatted-text/flavours/preview-slice'
-import { EditSlice } from '../components/datasets/formatted-text/flavours/edit-slice'
+import { PreviewContainer } from '../components/datasets/preview/container'
+import { PreviewHeader } from '../components/datasets/preview/header'
+import FileIcon from '../components/base/file-icon'
+import { ChevronDown } from '../components/base/icons/src/vender/solid/arrows'
+import Badge from '../components/base/badge'
+import { DividerWithLabel } from '../components/base/divider/with-label'
 
 export default function Page() {
   return <div className='p-4'>
-    <FormattedText>
-      <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
-      <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
-      <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
-      <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
-      <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
-    </FormattedText>
-
-    <div className='mt-12 flex flex-col gap-2'>
-      <EditSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' onDelete={function (): void {
-        console.log('onDelete')
-      } } />
-      <EditSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' onDelete={function (): void {
-        console.log('onDelete')
-      } } />
-      <EditSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' onDelete={function (): void {
-        console.log('onDelete')
-      } } />
-      <EditSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' onDelete={function (): void {
-        console.log('onDelete')
-      } } />
-      <EditSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' onDelete={function (): void {
-        console.log('onDelete')
-      } } />
-    </div>
+    <PreviewContainer header={
+      <PreviewHeader title='Preview'>
+        <div className='flex items-center'>
+          <FileIcon type='pdf' className='size-4' />
+          <p
+            className='text-text-primary text-sm font-semibold mx-1'
+          >EOS R3 Tech Sheet.pdf</p>
+          <ChevronDown className='size-[18px]' />
+          <Badge text='276 Estimated chunks' className='ml-1' />
+        </div>
+      </PreviewHeader>
+    }>
+      <FormattedText>
+        <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+        <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+        <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+        <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+        <PreviewSlice label='C-1' text='lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' tooltip={'Child-chunk-2 · 268 Characters'} />
+      </FormattedText>
+      <DividerWithLabel label='Display previews of up to 10 paragraphs' />
+    </PreviewContainer>
   </div>
 }