From 2657469964e24ffbeb905024532120395f6e797c Mon Sep 17 00:00:00 2001
From: Mo Tarbin <mhed.t91@gmail.com>
Date: Sun, 30 Jun 2024 18:55:39 -0400
Subject: move to Donetick Org, First commit frontend

---
 src/views/TestView/IconPicker.jsx | 58 +++++++++++++++++++++++++++++++++++++++
 src/views/TestView/Test.jsx       | 11 ++++++++
 2 files changed, 69 insertions(+)
 create mode 100644 src/views/TestView/IconPicker.jsx
 create mode 100644 src/views/TestView/Test.jsx

(limited to 'src/views/TestView')

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
diff --git a/src/views/TestView/Test.jsx b/src/views/TestView/Test.jsx
new file mode 100644
index 0000000..0494e93
--- /dev/null
+++ b/src/views/TestView/Test.jsx
@@ -0,0 +1,11 @@
+import MuiIconPicker from './IconPicker'
+
+const TestView = () => {
+  return (
+    <div>
+      <MuiIconPicker />
+    </div>
+  )
+}
+
+export default TestView
-- 
cgit