rename ContentHeader as ContentWrapper

Author: severo

src/components/viewers/AvroView.tsx

@@ -1,11 +1,11 @@
+import { avroData, avroMetadata } from 'icebird'
 import { useEffect, useState } from 'react'
 import type { FileSource } from '../../lib/sources/types.js'
 import { parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/Json.module.css'
 import Json from '../Json.js'
 import { Spinner } from '../Layout.js'
-import ContentHeader, { ContentSize } from './ContentHeader.js'
-import { avroData, avroMetadata } from 'icebird'
+import ContentWrapper, { ContentSize } from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -54,11 +54,11 @@ export default function AvroView({ source, setError }: ViewerProps) {
 
   const headers = content === undefined && <span>Loading...</span>
 
-  return <ContentHeader content={content} headers={headers}>
+  return <ContentWrapper content={content} headers={headers}>
     <code className={styles.jsonView}>
       <Json json={json} />
     </code>
 
     {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 }

src/components/viewers/CellPanel.tsx

@@ -1,6 +1,6 @@
 import { DataFrame, stringify } from 'hightable'
 import { useEffect, useState } from 'react'
-import ContentHeader from './ContentHeader.js'
+import ContentWrapper from './ContentWrapper.js'
 
 interface ViewerProps {
   df: DataFrame
@@ -54,7 +54,7 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
     <span>row {row + 1}</span>
   </>
 
-  return <ContentHeader headers={headers}>
+  return <ContentWrapper headers={headers}>
     <code className="text">{text}</code>
-  </ContentHeader>
+  </ContentWrapper>
 }

src/components/viewers/ContentHeader.tsx src/components/viewers/ContentWrapper.tsxsrc/components/viewers/ContentHeader.tsx renamed to src/components/viewers/ContentWrapper.tsx

@@ -1,7 +1,7 @@
 import { ReactNode } from 'react'
 import { useConfig } from '../../hooks/useConfig.js'
 import { cn, formatFileSize } from '../../lib/utils.js'
-import styles from '../../styles/viewers/ContentHeader.module.css'
+import styles from '../../styles/viewers/ContentWrapper.module.css'
 
 export interface ContentSize {
   fileSize?: number
@@ -11,13 +11,13 @@ export interface TextContent extends ContentSize {
   text: string
 }
 
-interface ContentHeaderProps {
+interface ContentWrapperProps {
   content?: ContentSize
   headers?: ReactNode
   children?: ReactNode
 }
 
-export default function ContentHeader({ content, headers, children }: ContentHeaderProps) {
+export default function ContentWrapper({ content, headers, children }: ContentWrapperProps) {
   const { customClass } = useConfig()
   return <div className={cn(styles.contentWrapper, customClass?.contentWrapper)}>
     <header>

src/components/viewers/ImageView.tsx

@@ -4,7 +4,7 @@ import { FileSource } from '../../lib/sources/types.js'
 import { cn, contentTypes, parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/viewers/ImageView.module.css'
 import { Spinner } from '../Layout.js'
-import ContentHeader from './ContentHeader.js'
+import ContentWrapper from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -54,14 +54,14 @@ export default function ImageView({ source, setError }: ViewerProps) {
     void loadContent()
   }, [fileName, resolveUrl, requestInit, setError])
 
-  return <ContentHeader content={content}>
+  return <ContentWrapper content={content}>
     {content?.dataUri && <img
       alt={source.sourceId}
       className={cn(styles.image, customClass?.imageView)}
       src={content.dataUri} />}
 
     {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 }
 
 /**

src/components/viewers/JsonView.tsx

@@ -4,7 +4,7 @@ import { parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/Json.module.css'
 import Json from '../Json.js'
 import { Spinner } from '../Layout.js'
-import ContentHeader, { TextContent } from './ContentHeader.js'
+import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -63,7 +63,7 @@ export default function JsonView({ source, setError }: ViewerProps) {
   // If json failed to parse, show the text instead
   const showFallbackText = content?.text !== undefined && json === undefined
 
-  return <ContentHeader content={content} headers={headers}>
+  return <ContentWrapper content={content} headers={headers}>
     {!isLarge && <>
       {!showFallbackText && <code className={styles.jsonView}>
         <Json json={json} />
@@ -77,5 +77,5 @@ export default function JsonView({ source, setError }: ViewerProps) {
     </div>}
 
     {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 }

src/components/viewers/MarkdownView.tsx

@@ -5,7 +5,7 @@ import { cn, parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/viewers/MarkdownView.module.css'
 import { Spinner } from '../Layout.js'
 import Markdown from '../Markdown.js'
-import ContentHeader, { TextContent } from './ContentHeader.js'
+import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -47,9 +47,9 @@ export default function MarkdownView({ source, setError }: ViewerProps) {
     void loadContent()
   }, [resolveUrl, requestInit, setError])
 
-  return <ContentHeader content={content}>
+  return <ContentWrapper content={content}>
     <Markdown className={cn(styles.markdownView, customClass?.markdownView)} text={content?.text ?? ''} />
 
     { isLoading && <div className='center'><Spinner /></div> }
-  </ContentHeader>
+  </ContentWrapper>
 }

src/components/viewers/ParquetView.tsx

@@ -9,7 +9,7 @@ import { cn } from '../../lib/utils.js'
 import styles from '../../styles/ParquetView.module.css'
 import { Spinner } from '../Layout.js'
 import CellPanel from './CellPanel.js'
-import ContentHeader, { ContentSize } from './ContentHeader.js'
+import ContentWrapper, { ContentSize } from './ContentWrapper.js'
 import SlidePanel from './SlidePanel.js'
 
 interface ViewerProps {
@@ -95,7 +95,7 @@ export default function ParquetView({ source, setProgress, setError }: ViewerPro
 
   const headers = <span>{content?.dataframe.numRows.toLocaleString() ?? '...'} rows</span>
 
-  const mainContent = <ContentHeader content={content} headers={headers}>
+  const mainContent = <ContentWrapper content={content} headers={headers}>
     {content?.dataframe && <HighTable
       cacheKey={source.resolveUrl}
       data={content.dataframe}
@@ -106,7 +106,7 @@ export default function ParquetView({ source, setProgress, setError }: ViewerPro
     />}
 
     {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 
   let panelContent
   if (content?.dataframe && cell) {

src/components/viewers/TextView.tsx

@@ -4,7 +4,7 @@ import { FileSource } from '../../lib/sources/types.js'
 import { cn, parseFileSize } from '../../lib/utils.js'
 import styles from '../../styles/viewers/TextView.module.css'
 import { Spinner } from '../Layout.js'
-import ContentHeader, { TextContent } from './ContentHeader.js'
+import ContentWrapper, { TextContent } from './ContentWrapper.js'
 
 interface ViewerProps {
   source: FileSource
@@ -51,13 +51,13 @@ export default function TextView({ source, setError }: ViewerProps) {
   </>
 
   // Simple text viewer
-  return <ContentHeader content={content} headers={headers}>
+  return <ContentWrapper content={content} headers={headers}>
     {content && <code className={cn(styles.text, customClass?.textView)}>
       {content.text}
     </code>}
 
     {isLoading && <div className='center'><Spinner /></div>}
-  </ContentHeader>
+  </ContentWrapper>
 }
 
 function newlines(str: string): string {

src/components/viewers/index.ts

@@ -1,8 +1,8 @@
-import ContentHeader from './ContentHeader.js'
+import ContentWrapper from './ContentWrapper.js'
 import ImageView from './ImageView.js'
 import MarkdownView from './MarkdownView.js'
 import ParquetView from './ParquetView.js'
 import SlidePanel from './SlidePanel.js'
 import TextView from './TextView.js'
 import Viewer from './Viewer.js'
-export { ContentHeader, ImageView, MarkdownView, ParquetView, SlidePanel, TextView, Viewer }
+export { ContentWrapper, ImageView, MarkdownView, ParquetView, SlidePanel, TextView, Viewer }