Skip to content

Instantly share code, notes, and snippets.

@igeligel
Created June 15, 2021 19:57
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save igeligel/995da28a7ea59cb0254cf23bc3521c78 to your computer and use it in GitHub Desktop.
Save igeligel/995da28a7ea59cb0254cf23bc3521c78 to your computer and use it in GitHub Desktop.
const DyanmicSelector = () => (
<Box paddingTop={"12"}>
<Heading as="h1" color={"gray.700"}>
Account Setup
</Heading>
<RadioGroup
value={selectedOption}
marginTop={"6"}
paddingX={"8"}
paddingY={"6"}
borderRadius={"xl"}
boxShadow={"xl"}
background={"white"}
borderTopColor={"cyan.100"}
borderTopWidth={"3px"}
>
<VStack
display={"flex"}
width={"100%"}
spacing={"0"}
divider={<Divider />}
borderColor={"gray.100"}
borderWidth={"1px"}
borderRadius={"md"}
>
<Box
width={"100%"}
display={"flex"}
cursor={"pointer"}
onClick={() => {
setSelectedOption("PERSONAL");
}}
padding={"4"}
>
<Radio value="PERSONAL" cursor={"pointer"}>
<Text cursor={"pointer"}>Personal Account</Text>
</Radio>
</Box>
<Box
borderColor={"gray.100"}
borderWidth={"1px"}
display={"flex"}
width={"100%"}
flexDirection={"column"}
onClick={() => {
setSelectedOption("BUSINESS");
}}
cursor={"pointer"}
padding={"4"}
>
<Radio value="BUSINESS" cursor={"pointer"} width={"100%"}>
<Text cursor={"pointer"}>Business</Text>
</Radio>
<Collapse in={selectedOption === "BUSINESS"} animateOpacity>
<FormControl id="company-name" isRequired marginTop={"3"}>
<FormLabel>Name</FormLabel>
<Input
placeholder="tooltipr Inc."
value={businessName}
onChange={(event) => {
setBusinessName(event.target.value);
}}
/>
</FormControl>
</Collapse>
</Box>
</VStack>
<Box marginTop={"3"} display={"flex"} justifyContent={"flex-end"}>
<Button disabled={selectedOption === "BUSINESS" && businessName === ""}>
Continue
</Button>
</Box>
</RadioGroup>
</Box>
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment