move ContentHeader styles to CSS module

Author: severo

src/components/viewers/ContentHeader.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react'
-import { formatFileSize } from '../../lib/utils.js'
+import { useConfig } from '../../hooks/useConfig.js'
+import { cn, formatFileSize } from '../../lib/utils.js'
+import styles from '../../styles/viewers/ContentHeader.module.css'
 
 export interface ContentSize {
   fileSize?: number
@@ -16,13 +18,14 @@ interface ContentHeaderProps {
 }
 
 export default function ContentHeader({ content, headers, children }: ContentHeaderProps) {
-  return <div className='viewer'>
-    <div className='view-header'>
+  const { customClass } = useConfig()
+  return <div className={cn(styles.contentWrapper, customClass?.contentWrapper)}>
+    <header>
       {content?.fileSize && <span title={content.fileSize.toLocaleString('en-US') + ' bytes'}>
         {formatFileSize(content.fileSize)}
       </span>}
       {headers}
-    </div>
+    </header>
     {children}
   </div>
 }

src/hooks/useConfig.ts

@@ -10,6 +10,7 @@ import { createContext, useContext } from 'react'
 export interface Config {
   customClass?: {
     brand?: string
+    contentWrapper?: string
     highTable?: string
     imageView?: string
     markdownView?: string

src/styles/app.css

@@ -332,28 +332,6 @@ button.close-button:hover {
   background-image: url("../assets/folder.svg");
 }
 
-/* viewer */
-.viewer {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
-  white-space: pre-wrap;
-  overflow-y: auto;
-}
-.view-header {
-  align-items: center;
-  background-color: #f2f2f2;
-  color: #444;
-  display: flex;
-  gap: 16px;
-  height: 24px;
-  overflow: hidden;
-  padding: 0 16px;
-  /* all one line */
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .slideContainer {
   display: flex;
   flex: 1;

src/styles/viewers/ContentHeader.module.css

@@ -0,0 +1,21 @@
+.contentWrapper {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  white-space: pre-wrap;
+  overflow-y: auto;
+
+  & > header:first-child {
+    align-items: center;
+    background-color: #f2f2f2;
+    color: #444;
+    display: flex;
+    gap: 16px;
+    height: 24px;
+    overflow: hidden;
+    padding: 0 16px;
+    /* all one line */
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}