Last active
September 14, 2023 06:50
-
-
Save jacques-blom/c9dd9dac7a0f04203a067c399974bc6d to your computer and use it in GitHub Desktop.
Selectors Example - Starting Point
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { | |
| Box, | |
| FormControl, | |
| FormLabel, | |
| Heading, | |
| HStack, | |
| Icon, | |
| NumberInput, | |
| NumberInputField, | |
| Switch, | |
| } from '@chakra-ui/react' | |
| import {ArrowRight} from 'react-feather' | |
| import {atom, useRecoilState} from 'recoil' | |
| const exchangeRate = 0.83 | |
| export const Selectors = () => { | |
| return ( | |
| <div style={{padding: 20}}> | |
| <Heading size="lg" mb={2}> | |
| Currency converter | |
| </Heading> | |
| <InputStack> | |
| <CurrencyInput label="usd" amount={0} /> | |
| <CurrencyInput label="eur" amount={0} /> | |
| </InputStack> | |
| <Commission /> | |
| </div> | |
| ) | |
| } | |
| // You can ignore everything below this line. | |
| // It's just a bunch of UI components that we're using in this example. | |
| const InputStack: React.FC = ({children}) => { | |
| return ( | |
| <HStack | |
| width="300px" | |
| mb={4} | |
| spacing={4} | |
| divider={ | |
| <Box border="0 !important" height="40px" alignItems="center" display="flex"> | |
| <Icon as={ArrowRight} /> | |
| </Box> | |
| } | |
| align="flex-end" | |
| > | |
| {children} | |
| </HStack> | |
| ) | |
| } | |
| const CurrencyInput = ({ | |
| amount, | |
| onChange, | |
| label, | |
| }: { | |
| label: string | |
| amount: number | |
| onChange?: (amount: number) => void | |
| }) => { | |
| let symbol = label === 'usd' ? '$' : '€' | |
| return ( | |
| <FormControl id={label.toUpperCase()}> | |
| <FormLabel>{label.toUpperCase()}</FormLabel> | |
| <NumberInput | |
| value={`${symbol} ${amount}`} | |
| onChange={(value) => { | |
| const withoutSymbol = value.split(' ')[0] | |
| onChange?.(parseFloat(withoutSymbol || '0')) | |
| }} | |
| > | |
| <NumberInputField /> | |
| </NumberInput> | |
| </FormControl> | |
| ) | |
| } | |
| const commissionEnabledAtom = atom({ | |
| key: 'commissionEnabled', | |
| default: false, | |
| }) | |
| const commissionAtom = atom({ | |
| key: 'commission', | |
| default: 5, | |
| }) | |
| const Commission = () => { | |
| const [enabled, setEnabled] = useRecoilState(commissionEnabledAtom) | |
| const [commission, setCommission] = useRecoilState(commissionAtom) | |
| return ( | |
| <Box width="300px"> | |
| <FormControl display="flex" alignItems="center" mb={2}> | |
| <FormLabel htmlFor="includeCommission" mb="0"> | |
| Include forex commission? | |
| </FormLabel> | |
| <Switch | |
| id="includeCommission" | |
| isChecked={enabled} | |
| onChange={(event) => setEnabled(event.currentTarget.checked)} | |
| /> | |
| </FormControl> | |
| <NumberInput | |
| isDisabled={!enabled} | |
| value={commission} | |
| onChange={(value) => setCommission(parseFloat(value || '0'))} | |
| > | |
| <NumberInputField /> | |
| </NumberInput> | |
| </Box> | |
| ) | |
| } | |
| const addCommission = (amount: number, commission: number) => { | |
| return amount / (1 - commission / 100) | |
| } | |
| const removeCommission = (amount: number, commission: number) => { | |
| return amount * (1 - commission / 100) | |
| } |
thank you for your wonderful free course of recoil
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
thank you very much for your help in your free course of recoil ! i'm on selector video hurry 🐱🏍