59 lines
1.7 KiB
JavaScript
59 lines
1.7 KiB
JavaScript
import * as allIcons from '@mui/icons-material' // Import all icons using * as
|
|
import { Grid, Input, SvgIcon } from '@mui/joy'
|
|
import React, { useEffect, useState } from 'react'
|
|
|
|
function MuiIconPicker({ onIconSelect }) {
|
|
const [searchTerm, setSearchTerm] = useState('')
|
|
const [filteredIcons, setFilteredIcons] = useState([])
|
|
const outlined = Object.keys(allIcons).filter(name =>
|
|
name.includes('Outlined'),
|
|
)
|
|
useEffect(() => {
|
|
// Filter icons based on the search term
|
|
setFilteredIcons(
|
|
outlined.filter(name =>
|
|
name
|
|
.toLowerCase()
|
|
.includes(searchTerm ? searchTerm.toLowerCase() : false),
|
|
),
|
|
)
|
|
}, [searchTerm])
|
|
|
|
const handleIconClick = iconName => {
|
|
onIconSelect(iconName) // Callback for selected icon
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
{/* Autocomplete component for searching */}
|
|
{JSON.stringify({ 1: searchTerm, filteredIcons: filteredIcons })}
|
|
<Input
|
|
onChange={(event, newValue) => {
|
|
setSearchTerm(newValue)
|
|
}}
|
|
/>
|
|
{/* Grid to display icons */}
|
|
<Grid container spacing={2}>
|
|
{filteredIcons.map(iconName => {
|
|
const IconComponent = allIcons[iconName]
|
|
if (IconComponent) {
|
|
// Add this check to prevent errors
|
|
return (
|
|
<Grid item key={iconName} xs={3} sm={2} md={1}>
|
|
<SvgIcon
|
|
component={IconComponent}
|
|
onClick={() => handleIconClick(iconName)}
|
|
style={{ cursor: 'pointer' }}
|
|
/>
|
|
</Grid>
|
|
)
|
|
}
|
|
return null // Return null for non-icon exports
|
|
})}
|
|
</Grid>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default MuiIconPicker
|