42 lines
979 B
TypeScript
42 lines
979 B
TypeScript
import { useTour } from "@reactour/tour";
|
|
import clsx from "clsx";
|
|
import { FC, HTMLAttributes, ReactNode } from "react";
|
|
|
|
import { Button } from "../Button";
|
|
import styles from "./styles.module.css";
|
|
|
|
export interface GuidedTourStepProps
|
|
extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
|
|
title: string;
|
|
content: ReactNode;
|
|
showClose?: boolean;
|
|
}
|
|
|
|
export const GuidedTourStep: FC<GuidedTourStepProps> = ({
|
|
className,
|
|
content,
|
|
showClose,
|
|
title,
|
|
...props
|
|
}) => {
|
|
const { setIsOpen } = useTour();
|
|
|
|
return (
|
|
<div className={clsx([styles.guidedTourStep, className])} {...props}>
|
|
<p className={styles.title}>{title}</p>
|
|
<div className={styles.content}>{content}</div>
|
|
{showClose && (
|
|
<Button
|
|
className={styles.closeButton}
|
|
size="small"
|
|
variant="outline"
|
|
themed
|
|
onClick={() => setIsOpen(false)}
|
|
>
|
|
Start Playing!
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|