function PointerBoxDemo(props) {
const [pos, setPos] = React.useState('top')
return (
<Box>
<Heading as="h3" sx={{fontSize: 3}}>
Caret Position
</Heading>
<CaretSelector current={pos} onChange={setPos} />
<Box position="relative">
<PointerBox
minHeight={100}
caret={pos}
sx={{m: 4, p: 2, bg: 'success.subtle', borderColor: 'success.emphasis'}}
>
Content
</PointerBox>
</Box>
</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 key={dir}>
<input
type="radio"
name="caret"
value={dir}
checked={dir === props.current}
onChange={() => props.onChange(dir)}
/>{' '}
{dir}
</label>
))
return (
<Box display="grid" gridTemplateColumns="repeat(4, auto)" gridGap={3} my={2}>
{choices}
</Box>
)
}
render(<PointerBoxDemo />)