You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
40 lines
1.1 KiB
40 lines
1.1 KiB
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)
|