aboutsummaryrefslogtreecommitdiffstats
path: root/src/views/TestView/IconPicker.jsx
diff options
context:
space:
mode:
authorLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-06-30 18:55:39 -0400
committerLibravatar Mo Tarbin <mhed.t91@gmail.com>2024-06-30 18:55:39 -0400
commit2657469964e24ffbeb905024532120395f6e797c (patch)
tree2fe9db8a4ecfa92d854ca94f7586d81163c8bd25 /src/views/TestView/IconPicker.jsx
downloaddonetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.gz
donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.tar.bz2
donetick-frontend-2657469964e24ffbeb905024532120395f6e797c.zip
move to Donetick Org, First commit frontend
Diffstat (limited to 'src/views/TestView/IconPicker.jsx')
-rw-r--r--src/views/TestView/IconPicker.jsx58
1 files changed, 58 insertions, 0 deletions
diff --git a/src/views/TestView/IconPicker.jsx b/src/views/TestView/IconPicker.jsx
new file mode 100644
index 0000000..d1bf229
--- /dev/null
+++ b/src/views/TestView/IconPicker.jsx
@@ -0,0 +1,58 @@
+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