57 lines
1.2 KiB
TypeScript
57 lines
1.2 KiB
TypeScript
import { Tag, Text } from "@blueprintjs/core";
|
|
import { SimpleTag } from "./utils";
|
|
|
|
const styles = {
|
|
charChip: {
|
|
margin: "0 5px",
|
|
},
|
|
questionText: {
|
|
marginLeft: 30,
|
|
marginRight: 10,
|
|
},
|
|
};
|
|
|
|
type Props = {
|
|
charactersOnStage: string[];
|
|
currSpeaker: string | null;
|
|
questionState: boolean | null;
|
|
};
|
|
|
|
export const TopBar = (props: Props) => {
|
|
const { charactersOnStage, currSpeaker, questionState } = props;
|
|
|
|
const characterChips =
|
|
charactersOnStage.length === 0 ? (
|
|
<Tag large minimal>
|
|
The stage is empty
|
|
</Tag>
|
|
) : (
|
|
charactersOnStage.map((character) => {
|
|
return (
|
|
<SimpleTag
|
|
key={character}
|
|
intent={character === currSpeaker ? "active" : undefined}
|
|
>
|
|
{character}
|
|
</SimpleTag>
|
|
);
|
|
})
|
|
);
|
|
|
|
return (
|
|
<div>
|
|
{characterChips}
|
|
{questionState != null && (
|
|
<>
|
|
<Text tagName="span" style={styles.questionText}>
|
|
Answer to question:
|
|
</Text>
|
|
<SimpleTag intent={questionState ? "success" : "danger"}>
|
|
{questionState ? "yes" : "no"}
|
|
</SimpleTag>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|