48 lines
3.2 KiB
TypeScript
48 lines
3.2 KiB
TypeScript
|
import {Radio} from "antd";
|
||
|
|
|
||
|
|
type Faicon = {
|
||
|
|
selectedIcon: string;
|
||
|
|
handleClick(value: string): void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function FaiconSelect(props: Faicon) {
|
||
|
|
const faIcons: string[] = [
|
||
|
|
'fa-list', 'fa-list-alt', 'fa-table', 'fa-heart', 'fa-user-md', 'fa-heartbeat', 'fa-file', 'fa-money',
|
||
|
|
'fa-taxi', 'fa-tags', 'fa-tag', 'fa-tv', 'fa-user', 'fa-users', 'fa-star', 'fa-support',
|
||
|
|
'fa-address-book', 'fa-bandcamp', 'fa-address-card', 'fa-bath', 'fa-eercast', 'fa-adjust', 'fa-asl-interpreting', 'fa-anchor',
|
||
|
|
'fa-archive', 'fa-area-chart', 'fa-assistive-listening-systems', 'fa-asterisk', 'fa-audio-description', 'fa-automobile', 'fa-balance-scale',
|
||
|
|
'fa-ban', 'fa-bank', 'fa-bar-chart', 'fa-barcode', 'fa-bars', 'fa-battery', 'fa-bicycle', 'fa-bug',
|
||
|
|
'fa-calculator', 'fa-calendar', 'fa-camera', 'fa-car', 'fa-check-square', 'fa-child', 'fa-clock-o', 'fa-cloud',
|
||
|
|
'fa-coffee', 'fa-cogs', 'fa-cog', 'fa-comments', 'fa-copyright', 'fa-database', 'fa-dashboard', 'fa-desktop',
|
||
|
|
'fa-envelope', 'fa-fax', 'fa-female', 'fa-file-code-o', 'fa-file-archive-o', 'fa-file-image-o', 'fa-file-audio-o', 'fa-file-excel-o',
|
||
|
|
'fa-file-pdf-o', 'fa-file-movie-o', 'fa-file-powerpoint-o', 'fa-file-word-o', 'fa-flag', 'fa-film', 'fa-folder', 'fa-globe',
|
||
|
|
'fa-free-code-camp', 'fa-list-ol', 'fa-list-ul', 'fa-paperclip', 'fa-unlink', 'fa-sliders', 'fa-sitemap', 'fa-terminal',
|
||
|
|
'fa-telegram', 'fa-meetup', 'fa-ravelry', 'fa-superpowers', 'fa-window-restore', 'fa-window-maximize', 'fa-linode', 'fa-handshake-o',
|
||
|
|
'fa-wpexplorer', 'fa-comment', 'fa-comment-o', 'fa-commenting', 'fa-commenting-o', 'fa-comments-o',
|
||
|
|
'fa-microchip', 'fa-podcast', 'fa-at', 'fa-cloud-download', 'fa-cloud-upload', 'fa-code', 'fa-code-fork', 'fa-compass',
|
||
|
|
'fa-creative-commons', 'fa-diamond', 'fa-exclamation-circle', 'fa-exclamation-triangle', 'fa-keyboard-o', 'fa-language', 'fa-laptop', 'fa-leaf',
|
||
|
|
'fa-lemon-o', 'fa-legal', 'fa-lightbulb-o', 'fa-line-chart', 'fa-lock', 'fa-magic', 'fa-magnet', 'fa-map',
|
||
|
|
'fa-map-marker', 'fa-map-o', 'fa-map-pin', 'fa-map-signs', 'fa-meh-o', 'fa-microphone', 'fa-mobile', 'fa-moon-o',
|
||
|
|
'fa-mortar-board', 'fa-motorcycle', 'fa-music', 'fa-paper-plane', 'fa-paw', 'fa-object-group', 'fa-pie-chart', 'fa-qrcode',
|
||
|
|
'fa-recycle', 'fa-road', 'fa-rocket', 'fa-shopping-bag', 'fa-signing', 'fa-street-view', 'fa-thumb-tack', 'fa-ticket',
|
||
|
|
'fa-tint', 'fa-tree', 'fa-trophy', 'fa-truck', 'fa-umbrella', 'fa-universal-access', 'fa-user-secret', 'fa-video-camera',
|
||
|
|
]
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div>
|
||
|
|
<Radio.Group style={{width: '100%'}} defaultValue={props.selectedIcon} onChange={(e) => {
|
||
|
|
props.handleClick(e.target.value);
|
||
|
|
}}>
|
||
|
|
{
|
||
|
|
faIcons.map(item => <Radio value={`fa ${item}`} key={item}>
|
||
|
|
<span
|
||
|
|
style={{display: 'inline-block', width: '50px', fontSize: '20px', textAlign: 'center'}}>
|
||
|
|
<i className={`fa ${item}`}></i>
|
||
|
|
</span>
|
||
|
|
</Radio>)
|
||
|
|
}
|
||
|
|
</Radio.Group>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|