export function ComplexListFullVariantStory()

in src/stories/ActionList2/fixtures.stories.tsx [407:485]


export function ComplexListFullVariantStory(): JSX.Element {
  return (
    <>
      <h1>Complex List</h1>
      <h2>Full Variant</h2>
      <ErsatzOverlay>
        <ActionList variant="full">
          <ActionList.Item>
            <ActionList.LeadingVisual>
              <TypographyIcon />
            </ActionList.LeadingVisual>
            Rename
          </ActionList.Item>
          <ActionList.Item>
            <ActionList.LeadingVisual>
              <VersionsIcon />
            </ActionList.LeadingVisual>
            Duplicate
            <ActionList.Description>Create a copy</ActionList.Description>
          </ActionList.Item>

          <ActionList.Group title="Live query" variant="filled">
            <ActionList.Item style={{color: 'rebeccapurple'}}>
              <ActionList.LeadingVisual>
                <SearchIcon />
              </ActionList.LeadingVisual>
              repo:github/memex,github/github
            </ActionList.Item>
          </ActionList.Group>
          <ActionList.Divider />
          <ActionList.Group title="Layout" variant="subtle">
            <ActionList.Item>
              <ActionList.LeadingVisual>
                <NoteIcon />
              </ActionList.LeadingVisual>
              Table
              <ActionList.Description variant="block">
                Information-dense table optimized for operations across teams
              </ActionList.Description>
            </ActionList.Item>
            <ActionList.Item>
              <ActionList.LeadingVisual>
                <ProjectIcon />
              </ActionList.LeadingVisual>
              Board
              <ActionList.Description variant="block">
                Kanban-style board focused on visual states
              </ActionList.Description>
            </ActionList.Item>
          </ActionList.Group>
          <ActionList.Divider />
          <ActionList.Group>
            <ActionList.Item style={{fontWeight: 'bold'}}>
              <ActionList.LeadingVisual>
                <FilterIcon />
              </ActionList.LeadingVisual>
              Save sort and filters to current view
            </ActionList.Item>
            <ActionList.Item style={{fontWeight: 'bold'}}>
              <ActionList.LeadingVisual>
                <FilterIcon />
              </ActionList.LeadingVisual>
              Save sort and filters to new view
            </ActionList.Item>
          </ActionList.Group>
          <ActionList.Divider />
          <ActionList.Group sx={{backgroundColor: 'accent.emphasis'}}>
            <ActionList.Item sx={{color: 'white'}}>
              <ActionList.LeadingVisual sx={{color: 'white'}}>
                <GearIcon />
              </ActionList.LeadingVisual>
              View settings
            </ActionList.Item>
          </ActionList.Group>
        </ActionList>
      </ErsatzOverlay>
    </>
  )
}