Please wait while the accessibility scan is running ...
() => {
const [timesClicked, setTimesClicked] = useState<number>(0);
function onButtonClick(): void {
setTimesClicked(prev => prev + 1);
}
return (
<Flex direction="column" className="playground">
<img
src="https://vibe.monday.com/logo.svg"
alt="Vibe Logo"
className="vibe-logo"
/>
<Flex direction="column" align="center" justify="center" gap="xs">
<Heading type="h3" align="center">
Playground
</Heading>
<Text type="text2" ellipsis={false}>
Craft, Experiment, and Innovate with Vibe.
</Text>
</Flex>
<Button
kind="secondary"
size="small"
onClick={onButtonClick}
className="count-button"
>
Clicked {timesClicked} time{timesClicked === 1 ? "" : "s"}
</Button>
<Text type="text3" ellipsis={false} color="secondary">
Can't see the editor? Click 'D' on your keyboard
</Text>
</Flex>
);
}