Blueprint.js Counter Example - Blueprint-js Typing CST Test

Blueprint.js Counter Example — Blueprint-js Code

Demonstrates a simple counter layout using Blueprint.js components and React for interactivity.

import React, { useState } from 'react';
import { Button, Card, Elevation, H2 } from '@blueprintjs/core';
import '@blueprintjs/core/lib/css/blueprint.css';

const Counter = () => {
	const [count, setCount] = useState(0);
	const [isDark, setIsDark] = useState(false);

	return (
		<div className={isDark ? 'bp3-dark' : ''} style={{ display: 'flex', justifyContent: 'center', marginTop: '50px' }}>
		<Card elevation={Elevation.TWO} style={{ padding: '20px', textAlign: 'center' }}>
		<H2>Counter: {count}</H2>
		<Button intent='primary' onClick={() => setCount(count + 1)} style={{ margin: '5px' }}>+</Button>
		<Button intent='danger' onClick={() => setCount(count - 1)} style={{ margin: '5px' }}>-</Button>
		<Button onClick={() => setCount(0)} style={{ margin: '5px' }}>Reset</Button>
		<br /><br />
		<Button intent='warning' onClick={() => setIsDark(!isDark)}>Switch Theme</Button>
		</Card>
		</div>
	);
};

export default Counter;

Blueprint-js Language Guide

BlueprintJS is a React-based UI toolkit for building complex, data-dense, desktop-focused web applications. It emphasizes performance, usability, and a consistent design language for enterprise applications.

More Blueprint-js Typing Exercises

Practice Other Languages