export function ComplexListInsetVariantStory()

in src/stories/ActionList.stories.tsx [145:218]


export function ComplexListInsetVariantStory(): JSX.Element {
  const StyledDiv = styled.div`
    ${sx}
  `
  return (
    <>
      <h1>Complex List</h1>
      <h2>Inset Variant</h2>
      <ErsatzOverlay>
        <ActionList
          groupMetadata={[
            {groupId: '0'},
            {groupId: '1', header: {title: 'Live query', variant: 'filled'}},
            {groupId: '2', header: {title: 'Layout', variant: 'subtle'}, showItemDividers: true},
            {groupId: '3', renderItem: props => <ActionList.Item style={{fontWeight: 'bold'}} {...props} />},
            {
              groupId: '4',
              renderItem: ({leadingVisual: LeadingVisual, ...props}) => (
                <ActionList.Item
                  {...props}
                  leadingVisual={() => (
                    <StyledDiv sx={{'&>svg': {fill: 'white'}}}>
                      {LeadingVisual && <LeadingVisual></LeadingVisual>}
                    </StyledDiv>
                  )}
                />
              ),
              renderGroup: ({sx: sxProps, ...props}) => (
                <ActionList.Group {...props} sx={{...sxProps, backgroundColor: 'cornflowerblue', color: 'white'}} />
              )
            }
          ]}
          items={[
            {leadingVisual: TypographyIcon, text: 'Rename', groupId: '0'},
            {
              leadingVisual: VersionsIcon,
              text: 'Duplicate',
              description: 'Create a copy',
              descriptionVariant: 'inline',
              groupId: '0'
            },
            {
              leadingVisual: SearchIcon,
              text: 'repo:github/memex,github/github',
              groupId: '1',
              renderItem: props => <ActionList.Item style={{color: 'rebeccapurple'}} {...props} />
            },
            {
              leadingVisual: NoteIcon,
              text: 'Table',
              description: 'Information-dense table optimized for operations across teams',
              descriptionVariant: 'block',
              groupId: '2'
            },
            {
              leadingVisual: ProjectIcon,
              text: 'Board',
              description: 'Kanban-style board focused on visual states',
              descriptionVariant: 'block',
              groupId: '2'
            },
            {
              leadingVisual: FilterIcon,
              text: 'Save sort and filters to current view',
              groupId: '3'
            },
            {leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
            {leadingVisual: GearIcon, text: 'View settings', groupId: '4'}
          ]}
        />
      </ErsatzOverlay>
    </>
  )
}