diff --git a/src/base/components/inputs/CheckboxInput.tsx b/src/base/components/inputs/CheckboxInput.tsx index ce0357eb..2c148741 100644 --- a/src/base/components/inputs/CheckboxInput.tsx +++ b/src/base/components/inputs/CheckboxInput.tsx @@ -10,12 +10,43 @@ import type { CheckboxProps } from '@mui/material/Checkbox'; import Checkbox from '@mui/material/Checkbox'; import type { FormControlLabelProps } from '@mui/material/FormControlLabel'; import FormControlLabel from '@mui/material/FormControlLabel'; -import React from 'react'; +import Stack from '@mui/material/Stack'; +import Typography from '@mui/material/Typography'; -interface IProps extends CheckboxProps { - label?: FormControlLabelProps['label']; -} +type BaseProps = CheckboxProps; +type LabelProps = { label?: FormControlLabelProps['label'] }; +type PrimaryTextProps = { + primaryText?: FormControlLabelProps['label']; + secondaryText?: FormControlLabelProps['label']; +}; -export const CheckboxInput: React.FC = ({ label, sx, ...rest }) => ( - } label={label} sx={sx} /> +type Props = BaseProps & + ((LabelProps & PropertiesNever) | (PropertiesNever & PrimaryTextProps)); + +export const CheckboxInput = ({ primaryText, secondaryText, sx, ...rest }: Props) => ( + } + label={ + primaryText && !secondaryText ? ( + primaryText + ) : ( + + {typeof primaryText === 'string' ? {primaryText} : primaryText} + {typeof secondaryText === 'string' ? ( + + {secondaryText} + + ) : ( + secondaryText + )} + + ) + } + sx={sx} + /> ); diff --git a/src/features/migration/components/MigrationBulkSearchOptionsDialog.tsx b/src/features/migration/components/MigrationBulkSearchOptionsDialog.tsx index 4314588b..38315b4e 100644 --- a/src/features/migration/components/MigrationBulkSearchOptionsDialog.tsx +++ b/src/features/migration/components/MigrationBulkSearchOptionsDialog.tsx @@ -39,20 +39,8 @@ export const MigrationBulkSearchOptionsDialog = ({ {t`Search options`} - {t`Ignore matches that are behind in chapters`} - {t`Automatically select matches if they have at least the same latest chapter`} - - } + primaryText={t`Ignore matches that are behind in chapters`} + secondaryText={t`Automatically select matches if they have at least the same latest chapter`} sx={{ alignItems: 'start', }} @@ -60,20 +48,8 @@ export const MigrationBulkSearchOptionsDialog = ({ onChange={(_, checked) => setIgnoreOutdatedMatches(checked)} /> - {t`Ignore matches without newer chapters`} - {t`Automatically select matches if they have additional chapters`} - - } + primaryText={t`Ignore matches without newer chapters`} + secondaryText={t`Automatically select matches if they have additional chapters`} sx={{ alignItems: 'start', }} @@ -81,20 +57,8 @@ export const MigrationBulkSearchOptionsDialog = ({ onChange={(_, checked) => setRequireAdditionalChapters(checked)} /> - {t`Ignore matches with missing chapters`} - {t`Automatically select matches if they have no missing chapters`} - - } + primaryText={t`Ignore matches with missing chapters`} + secondaryText={t`Automatically select matches if they have no missing chapters`} sx={{ alignItems: 'start', }} @@ -123,20 +87,8 @@ export const MigrationBulkSearchOptionsDialog = ({ - {t`Advanced search mode`} - {t`Breaks down the title into keywords for a wider search`} - - } + primaryText={t`Advanced search mode`} + secondaryText={t`Breaks down the title into keywords for a wider search`} sx={{ alignItems: 'start', }} @@ -144,20 +96,8 @@ export const MigrationBulkSearchOptionsDialog = ({ onChange={(_, checked) => setPerformAdvancedSearch(checked)} /> - {t`Match based on chapter number`} - {t`If enabled, chooses the match furthest ahead.\nOtherwise, picks the first match by source priority.`} - - } + primaryText={t`Match based on chapter number`} + secondaryText={t`If enabled, chooses the match furthest ahead.\nOtherwise, picks the first match by source priority.`} sx={{ alignItems: 'start', }}