[filigran-ui] Add searchbar for icons #13
Conversation
| const [searchTerm, setSearchTerm] = useState(''); | ||
|
|
||
| const handleIconClick = (Icon : React.ComponentType<any> ,icon : string) => { | ||
| setSelectedIcon(<Icon className="w-20 h-20"/>); |
There was a problem hiding this comment.
I think you can have only one state instead of 3.
You can use icon as a string.
If there is any icon set you can consider that you need to "open the modal" and from the popup you can get the Icon from the string.
It will avoid to have 3 state for one and the same purpose (showing the icon)
| const allIcons = Object.keys(FiligranIcon).filter((key) => key !== 'default') | ||
|
|
||
| const filteredIcons = useMemo(() => { |
There was a problem hiding this comment.
Great 👍 , nice to have put useMemo here 👍
| setSelectedIcon(null); | ||
| setSelectedIconLabel(''); | ||
| } | ||
|
|
||
| const allIcons = Object.keys(FiligranIcon).filter((key) => key !== 'default') |
There was a problem hiding this comment.
My mistake, but we can place the allIcons outside the component since we don't need to rerender it every time. We should also remove it from the dependencies of useMemo
| const Icon = FiligranIcon[icon] | ||
| return <Icon className="h-16 w-16" /> | ||
| const Icon = FiligranIcon[icon] as React.ComponentType<any>; | ||
| return <Icon className="h-16 w-16 hover:border-[1px] border-blue rounded-lg" onClick={() => handleIconClick(Icon,icon)} /> |
There was a problem hiding this comment.
I think it would be better to use border-primary border p-s
Border by default is 1px.
Padding would make a little spacing between the icon and the border.
Primary is still the blue you set but in case we are changing the theme I would prefer to set primary instead
| } | ||
| return ( | ||
| <div className='container'> | ||
| <SearchBar | ||
| value={searchTerm} |
| } | ||
| return ( | ||
| <div className='container'> |
There was a problem hiding this comment.
not sure that "container" is working anymore. I remove the tailwindcss-typography plugin I want to use our own theme now.
But in case that it's not really use, you can wrap with <></>
|
|
||
| const handleCopy = () => { | ||
| const statement = `import { ${iconName} } from '@filigran-ui';`; | ||
| navigator.clipboard.writeText(statement) |
There was a problem hiding this comment.
could we use the toast component instead ?
https://filigranhq.github.io/filigran-ui/docs/components/toast
The implementation come from :
https://ui.shadcn.com/docs/components/toast
| }; | ||
|
|
||
| return ( | ||
| <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black bg-opacity-50" onClick={handleBackgroundClick}> |
There was a problem hiding this comment.
You can use instead.
https://filigranhq.github.io/filigran-ui/docs/components/dialog
I would prefer to use our own component of the ui-library to make sense.
|
|
||
| const SearchBar: React.FC<SearchBarProps> = ({ value, onChange, placeholder = 'Search icons...' }) => { | ||
| return ( | ||
| <div className="relative w-full max-w-md mx-auto mb-6"> |
There was a problem hiding this comment.
Can you use the input of the Filigran-ui ?
jpkha
force-pushed
the
main
branch
4 times, most recently
from
0221267
to
384b8b0
Compare
Summary
This pull request adds Searchbar and Code usage for icons.
Changes Made
Screenshots
Please review the implementation and provide feedback on the design and functionality. Suggestions for improvement are welcome!