You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
29 lines
1.1 KiB
29 lines
1.1 KiB
5 days ago
|
import { Box } from '@/components/ui/box';
|
||
|
|
import { Button, ButtonText } from '@/components/ui/button';
|
||
|
|
import { Center } from '@/components/ui/center';
|
||
|
|
import { HStack } from '@/components/ui/hstack';
|
||
|
|
import { Text } from '@/components/ui/text';
|
||
|
|
import { VStack } from '@/components/ui/vstack';
|
||
|
|
import { useCounterDispatch, useCounterState } from '@/states/ConterProvider';
|
||
|
|
|
||
|
|
export default function IndexPage() {
|
||
|
|
const state = useCounterState();
|
||
|
|
const dispatch = useCounterDispatch();
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Box className="flex-1 justify-center items-center">
|
||
|
|
<Center style={{ width: '50%', height: '30%' }} className="p-3 bg-secondary-500 h-1/2 w-1/2">
|
||
|
|
<Text className="text-lg font-semibold">Count: {state.count}</Text>
|
||
|
|
<HStack className="gap-2">
|
||
|
|
<Button className="w-[200px]" onPress={() => dispatch({ type: 'INCREMENT' })}>
|
||
|
|
<ButtonText>+</ButtonText>
|
||
|
|
</Button>
|
||
|
|
<Button className="w-[150px]" onPress={() => dispatch({ type: 'DECREMENT' })}>
|
||
|
|
<ButtonText>-</ButtonText>
|
||
|
|
</Button>
|
||
|
|
</HStack>
|
||
|
|
</Center>
|
||
|
|
</Box>
|
||
|
|
);
|
||
|
|
}
|