function PointerBoxDemo(props) {
const [pos, setPos] = React.useState('top')
return (
<Box>
<Heading as="h3" fontSize={3}>Caret Position</Heading>
<CaretSelector current={pos} onChange={setPos} />
<Relative pt={4}>
<PointerBox m={4} p={2} minHeight={100} bg="green.1" borderColor="green.5" caret={pos}> Content </PointerBox>
</Relative>
</Box>
)
}
function CaretSelector(props) {
const choices = [
'top', 'bottom', 'left', 'right',
'left-bottom', 'left-top', 'right-bottom', 'right-top',
'top-left', 'bottom-left', 'top-right', 'bottom-right'
].map((dir) => (
<label>
<input key={dir} type='radio' name='caret' value={dir}
checked={dir === props.current} onChange={() => props.onChange(dir)} /> {dir}
</label>
))
return (
<Grid gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
{choices}
</Grid>
)
}
render(<PointerBoxDemo />)