add side widget button color param

This commit is contained in:
nflnkr 2024-05-02 21:51:05 +03:00
parent 75691a564b
commit 037adc12a3
2 changed files with 7 additions and 2 deletions

@ -10,9 +10,10 @@ const PADDING = 10;
interface Props { interface Props {
quizId: string; quizId: string;
position: "left" | "right"; position: "left" | "right";
buttonColor?: string;
} }
export default function QuizSideButton({ quizId, position }: Props) { export default function QuizSideButton({ quizId, position, buttonColor }: Props) {
const [isQuizShown, setIsQuizShown] = useState<boolean>(false); const [isQuizShown, setIsQuizShown] = useState<boolean>(false);
return createPortal( return createPortal(
@ -53,6 +54,7 @@ export default function QuizSideButton({ quizId, position }: Props) {
position: "fixed", position: "fixed",
height: "70px", height: "70px",
width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`, width: `calc(min(calc(100% - ${PADDING * 2}px), 600px))`,
color: buttonColor,
}, },
position === "left" && { position === "left" && {
bottom: PADDING, bottom: PADDING,

@ -7,7 +7,9 @@ export class SideWidget {
root: Root | undefined; root: Root | undefined;
element = document.createElement("div"); element = document.createElement("div");
constructor({ quizId, position }: ComponentPropsWithoutRef<typeof QuizSideButton>) { constructor({ quizId, position, buttonColor }: ComponentPropsWithoutRef<typeof QuizSideButton> & {
buttonColor?: string;
}) {
this.element.style.setProperty("display", "none"); this.element.style.setProperty("display", "none");
document.body.appendChild(this.element); document.body.appendChild(this.element);
@ -17,6 +19,7 @@ export class SideWidget {
<QuizSideButton <QuizSideButton
quizId={quizId} quizId={quizId}
position={position} position={position}
buttonColor={buttonColor}
/> />
); );
} }