fix inverted attribute

This commit is contained in:
Jon Eugster
2023-07-16 23:09:32 +02:00
parent 2fe2fd777d
commit 29b056cf05
2 changed files with 6 additions and 6 deletions
+3 -3
View File
@@ -3,13 +3,13 @@ import { Link, LinkProps } from "react-router-dom";
export interface ButtonProps extends LinkProps {
disabled?: boolean
inverted?: boolean
inverted?: string // Apparently "inverted" in DOM cannot be `boolean` but must be `inverted`
}
export function Button(props: ButtonProps) {
if (props.disabled) {
return <span className={`btn btn-disabled ${props.inverted ? 'btn-inverted' : ''}`} {...props}>{props.children}</span>
return <span className={`btn btn-disabled ${props.inverted === "true" ? 'btn-inverted' : ''}`} {...props}>{props.children}</span>
} else {
return <Link className={`btn ${props.inverted ? 'btn-inverted' : ''}`} {...props}>{props.children}</Link>
return <Link className={`btn ${props.inverted === "true" ? 'btn-inverted' : ''}`} {...props}>{props.children}</Link>
}
}
+3 -3
View File
@@ -328,12 +328,12 @@ function LevelAppBar({isLoading, levelId, worldId, levelTitle}) {
<span className="app-bar-title">
{levelTitle}
</span>
<Button disabled={levelId <= 0} inverted={true} to=""
<Button disabled={levelId <= 0} inverted="true" to=""
onClick={(ev) => { setCommandLineMode(!commandLineMode) }}>Editor</Button>
<Button disabled={levelId <= 0} inverted={true}
<Button disabled={levelId <= 0} inverted="true"
to={`/${gameId}/world/${worldId}/level/${levelId - 1}`}
><FontAwesomeIcon icon={faArrowLeft} />&nbsp;Previous</Button>
<Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted={true}
<Button disabled={levelId >= gameInfo.data?.worldSize[worldId]} inverted="true"
to={`/${gameId}/world/${worldId}/level/${levelId + 1}`}
>Next&nbsp;<FontAwesomeIcon icon={faArrowRight} /></Button>
</div>