pro/src/components/icon/picker/IconList.tsx

import type { FC } from 'react'
import { memo } from 'react'
import { createStyles } from '@/theme'

import IconThumbnail from './IconThumbnail'
import { getIconName } from './icons.ts'
import {  usePickerContext } from './context.tsx'

/******************************************************
 *********************** Style *************************
 ******************************************************/

const useStyles = createStyles(
        ({ css }) =>
                css`
                    display: grid;
                    grid-template-columns: repeat(4, 1fr);
                `,
)

/******************************************************
 ************************* Dom *************************
 ******************************************************/

const IconList: FC = () => {
    const { actions: { displayListSelector } } = usePickerContext()


    const { styles } = useStyles()

    return (
            <div className={styles}>
                {displayListSelector().map((icon) => (
                        <IconThumbnail key={getIconName(icon)} icon={icon}/>
                ))}
            </div>
    )
}

export default memo(IconList)