export const Default = () => {
const alignments = [
'top',
'right',
'bottom',
'left',
'top-start',
'top-end',
'right-start',
'right-end',
'bottom-start',
'bottom-end',
'left-start',
'left-end',
] as const;
return (
<Box
display="flex"
flexWrap="wrap"
gap="1W"
flexDirection="row"
width="100%"
style={{
justifyContent: 'center',
alignItems: 'center',
}}
>
{alignments.map(alignment => (
<Popover
key={alignment}
placement={alignment}
renderTrigger={() => <Button variant="secondary" title={alignment} />}
>
<Typography>Contenu du popover</Typography>
</Popover>
))}
</Box>
);
};