| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  | import type { FC } from 'react' | 
					
						
							|  |  |  | import classNames from 'classnames' | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-05-19 17:36:44 +08:00
										 |  |  | import data from '@emoji-mart/data' | 
					
						
							|  |  |  | import { init } from 'emoji-mart' | 
					
						
							| 
									
										
										
										
											2023-06-01 23:19:36 +08:00
										 |  |  | import style from './style.module.css' | 
					
						
							| 
									
										
										
										
											2023-05-19 17:36:44 +08:00
										 |  |  | 
 | 
					
						
							|  |  |  | init({ data }) | 
					
						
							|  |  |  | 
 | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  | export type AppIconProps = { | 
					
						
							| 
									
										
										
										
											2024-01-23 19:31:56 +08:00
										 |  |  |   size?: 'xs' | 'tiny' | 'small' | 'medium' | 'large' | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  |   rounded?: boolean | 
					
						
							|  |  |  |   icon?: string | 
					
						
							|  |  |  |   background?: string | 
					
						
							|  |  |  |   className?: string | 
					
						
							|  |  |  |   innerIcon?: React.ReactNode | 
					
						
							| 
									
										
										
										
											2023-05-19 17:36:44 +08:00
										 |  |  |   onClick?: () => void | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | const AppIcon: FC<AppIconProps> = ({ | 
					
						
							|  |  |  |   size = 'medium', | 
					
						
							|  |  |  |   rounded = false, | 
					
						
							| 
									
										
										
										
											2023-05-19 17:36:44 +08:00
										 |  |  |   icon, | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  |   background, | 
					
						
							|  |  |  |   className, | 
					
						
							|  |  |  |   innerIcon, | 
					
						
							| 
									
										
										
										
											2023-05-19 17:36:44 +08:00
										 |  |  |   onClick, | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  | }) => { | 
					
						
							|  |  |  |   return ( | 
					
						
							|  |  |  |     <span | 
					
						
							|  |  |  |       className={classNames( | 
					
						
							|  |  |  |         style.appIcon, | 
					
						
							|  |  |  |         size !== 'medium' && style[size], | 
					
						
							|  |  |  |         rounded && style.rounded, | 
					
						
							|  |  |  |         className ?? '', | 
					
						
							|  |  |  |       )} | 
					
						
							|  |  |  |       style={{ | 
					
						
							|  |  |  |         background, | 
					
						
							|  |  |  |       }} | 
					
						
							| 
									
										
										
										
											2023-05-19 17:36:44 +08:00
										 |  |  |       onClick={onClick} | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  |     > | 
					
						
							| 
									
										
										
										
											2023-06-01 23:19:36 +08:00
										 |  |  |       {innerIcon || ((icon && icon !== '') ? <em-emoji id={icon} /> : <em-emoji id='🤖' />)} | 
					
						
							| 
									
										
										
										
											2023-05-15 08:51:32 +08:00
										 |  |  |     </span> | 
					
						
							|  |  |  |   ) | 
					
						
							|  |  |  | } | 
					
						
							|  |  |  | 
 | 
					
						
							|  |  |  | export default AppIcon |