import React from 'react' ; import { Tooltip } from '@workday/canvas-kit-react/tooltip' ; import { Card } from '@workday/canvas-kit-react/card' ; import { Placement } from '@workday/canvas-kit-react/popup' ; export const Placements = ( ) => { const placementStyles = { display : 'flex' , justifyContent : 'space-around' , } ; const createPlacement = ( placement , index ) => { return ( < Tooltip title = "Add" placement = { placement as Placement } key = { index } > < Card style = { { display : 'flex' , width : 80 , height : 80 , justifyContent : 'space-around' , alignItems : 'center' , } } > < Card . Body > { placement } < /Card.Body> < /Card> < /Tooltip>); } ; return ( < div style = { { padding : 100 , display : 'grid' , gridTemplateColumns : '80px 320px 80px' , gridTemplateRows : '80px 320px 80px' , } } > < div /> < div style = { { ... placementStyles , flexDirection : 'row' } } > { [ 'top-start' , 'top' , 'top-end' ] . map ( createPlacement ) } < /div> < div / > < div style = { { ... placementStyles , flexDirection : 'column' } } > { [ 'left-start' , 'left' , 'left-end' ] . map ( createPlacement ) } < /div> < div / > < div style = { { ... placementStyles , flexDirection : 'column' } } > { [ 'right-start' , 'right' , 'right-end' ] . map ( createPlacement ) } < /div> < div / > < div style = { { ... placementStyles , flexDirection : 'row' } } > { [ 'bottom-start' , 'bottom' , 'bottom-end' ] . map ( createPlacement ) } < /div> < div / > < /div>); } ;