refactor: improve readability

BlackGlory · Dec 23, 2023 · f8a3de8 · f8a3de8
1 parent 0befe33
commit f8a3de8
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 16 deletions.
diff --git a/src/components/modal.tsx → src/components/message-box.tsx b/src/components/modal.tsx → src/components/message-box.tsx
@@ -1,20 +1,20 @@
 import { Dialog } from '@headlessui/react'
 import { Button } from '@components/button'
 
-export interface IModalProps {
-  message: string
+export interface IMessageBoxProps {
+  children: React.ReactNode
 
   isOpen: boolean
   onClose: () => void
 }
 
-export function Modal({ message, isOpen, onClose }: IModalProps) {
+export function MessageBox({ children, isOpen, onClose }: IMessageBoxProps) {
   return (
     <Dialog open={isOpen} onClose={onClose}>
       <div className='fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 p-8'>
         <Dialog.Panel className='border rounded px-8 py-4 bg-white shadow flex flex-col items-center space-y-4'>
           <Dialog.Description className='text-base'>
-            {message}
+            {children}
           </Dialog.Description>
 
           <Button onClick={onClose}>OK</Button>

diff --git a/src/components/options.tsx b/src/components/options.tsx
@@ -14,16 +14,16 @@ import { AdvancedOptions } from '@components/advanced-options'
 import { i18n } from '@utils/i18n'
 import { Base64 } from 'js-base64'
 import { isRuleArray } from '@utils/validator'
-import { Modal } from '@components/modal'
+import { MessageBox } from '@components/message-box'
 import { useImmer } from 'use-immer'
 import { compareStringsAscending } from 'extra-sort'
 import LoadingIcons from 'react-loading-icons'
 import { ConfigStoreContext } from '@utils/config-store'
 import { useSelector, useUpdater } from 'extra-react-store'
 
-interface IModal {
+interface IMessageBoxState {
   isOpen: boolean
-  message: string
+  content: React.ReactNode
 }
 
 export function Options() {
@@ -33,9 +33,9 @@ export function Options() {
   const [loading, setLoading] = useState<boolean>(true)
   const [allFontList, setAllFontList] = useState<chrome.fontSettings.FontName[]>([])
   const [monospaceFontList, setMonospaceFontList] = useState<chrome.fontSettings.FontName[]>([])
-  const [modal, setModal] = useImmer<IModal>({
+  const [messageBox, setMessageBox] = useImmer<IMessageBoxState>({
     isOpen: false
-  , message: ''
+  , content: null
   })
 
   useMountAsync(async () => {
@@ -58,13 +58,14 @@ export function Options() {
           )
         : (
             <>
-              <Modal
-                message={modal.message}
-                isOpen={modal.isOpen}
-                onClose={() => setModal(modal => {
+              <MessageBox
+                isOpen={messageBox.isOpen}
+                onClose={() => setMessageBox(modal => {
                   modal.isOpen = false
                 })}
-              />
+              >
+                {messageBox.content}
+              </MessageBox>
 
               <nav className='bg-gray-50 px-4 py-2 border-y sticky top-0 flex justify-between'>
                 <div className='space-x-2'>
@@ -129,9 +130,9 @@ export function Options() {
                         })
                       } catch (e) {
                         console.warn(e)
-                        setModal({
+                        setMessageBox({
                           isOpen: true
-                        , message: i18n('alertInvalidRuleFile')
+                        , content: i18n('alertInvalidRuleFile')
                         })
                       }
                     }, { once: true })