Ant Design Counter Example - Ant-design Typing CST Test

Ant Design Counter Example — Ant-design Code

Demonstrates a simple counter layout using Ant Design components and React for interactivity.

import React, { useState } from 'react';
import { Button, Typography, Space, ConfigProvider, theme } from 'antd';

const { Title } = Typography;

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

	return (
		<ConfigProvider theme={{ token: { colorPrimary: isDark ? '#1f1f1f' : '#1890ff' }, algorithm: isDark ? theme.darkAlgorithm : theme.defaultAlgorithm }}>
		<div style={{ textAlign: 'center', marginTop: '50px' }}>
		<Title level={2}>Counter: {count}</Title>
		<Space>
		<Button type='primary' onClick={() => setCount(count + 1)}>+</Button>
		<Button type='primary' danger onClick={() => setCount(count - 1)}>-</Button>
		<Button onClick={() => setCount(0)}>Reset</Button>
		</Space>
		<br /><br />
		<Button type='default' onClick={() => setIsDark(!isDark)}>Switch Theme</Button>
		</div>
		</ConfigProvider>
	);
};

export default Counter;

Ant-design Language Guide

Ant Design (AntD) is a comprehensive, enterprise-class UI design system and React component library for building modern web applications. It provides high-quality prebuilt components, design guidelines, and a unified visual language.

More Ant-design Typing Exercises

Practice Other Languages