extract SlideCloseButton to its own component + CSS module

Author: severo

src/components/SlideCloseButton.tsx

@@ -0,0 +1,11 @@
+import { MouseEventHandler } from 'react'
+import { useConfig } from '../hooks/useConfig.js'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/SlideCloseButton.module.css'
+
+export default function SlideCloseButton({ onClick }: { onClick: MouseEventHandler<HTMLButtonElement> | undefined }) {
+  const { customClass } = useConfig()
+  return (
+    <button className={ cn( styles.slideCloseButton, customClass?.slideCloseButton ) } onClick={onClick}>&nbsp;</button>
+  )
+}

src/components/viewers/CellPanel.tsx

@@ -1,5 +1,6 @@
 import { DataFrame, stringify } from 'hightable'
 import { useEffect, useState } from 'react'
+import SlideCloseButton from '../SlideCloseButton.js'
 import ContentWrapper from './ContentWrapper.js'
 
 interface ViewerProps {
@@ -49,7 +50,7 @@ export default function CellPanel({ df, row, col, setProgress, setError, onClose
   }, [df, col, row, setProgress, setError])
 
   const headers = <>
-    <button className="slideClose" onClick={onClose}>&nbsp;</button>
+    <SlideCloseButton onClick={onClose} />
     <span>column `{df.header[col]}`</span>
     <span>row {row + 1}</span>
   </>

src/hooks/useConfig.ts

@@ -16,6 +16,7 @@ export interface Config {
     imageView?: string
     markdownView?: string
     sideBar?: string
+    slideCloseButton?: string
     spinner?: string
     textView?: string
     welcome?: string

src/styles/SlideCloseButton.module.css

@@ -0,0 +1,21 @@
+/* slide panel close button */
+.slideClose,
+.slideClose:active,
+.slideClose:focus,
+.slideClose:hover {
+  background: none;
+  border: none;
+  color: #888;
+  font-size: 16px;
+  height: 24px;
+  margin-right: auto;
+  outline: none;
+  padding: 0;
+  transition: color 0.3s;
+}
+.slideClose::before {
+  content: "\27E9\27E9";
+}
+.slideClose:hover {
+  color: #000;
+}

src/styles/app.css

@@ -299,25 +299,3 @@ input.search:focus {
 .resizer:hover {
   background-color: #9f9999;
 }
-
-/* slide panel close button */
-.slideClose,
-.slideClose:active,
-.slideClose:focus,
-.slideClose:hover {
-  background: none;
-  border: none;
-  color: #888;
-  font-size: 16px;
-  height: 24px;
-  margin-right: auto;
-  outline: none;
-  padding: 0;
-  transition: color 0.3s;
-}
-.slideClose::before {
-  content: "\27E9\27E9";
-}
-.slideClose:hover {
-  color: #000;
-}