import {useState, useCallback} from 'react';
import * as stylex from '@stylexjs/stylex';
import {Button} from '@astryxdesign/core/Button';
import {Text} from '@astryxdesign/core/Text';
const styles = stylex.create({
container: {
display: 'flex',
flexDirection: 'column',
gap: 8,
padding: 16,
},
counter: {
fontSize: 48,
fontWeight: 700,
fontVariantNumeric: 'tabular-nums',
},
});
export default function Counter() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(prev => prev + 1);
}, []);
const reset = useCallback(() => {
setCount(0);
}, []);
return (
<div {...stylex.props(styles.container)}>
<Text type="label">Counter</Text>
<span {...stylex.props(styles.counter)}>
{count}
</span>
<Button label="Increment" onClick={increment} />
<Button label="Reset" variant="secondary" onClick={reset} />
</div>
);
}