@mui/icons-material#WbSunny TypeScript Examples
The following examples show how to use
@mui/icons-material#WbSunny.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Footer.tsx From website with Apache License 2.0 | 5 votes |
|
SunnyIcon = styled(WbSunny)`
vertical-align: middle;
margin-right: 5px;
`
Example #2
| Source File: Worlds.tsx From NekoMaid with MIT License | 4 votes |
|
Worlds: React.FC = () => {
const plugin = usePlugin()
const globalData = useGlobalData()
const [worlds, setWorlds] = useState<World[]>([])
const [selected, setSelected] = useState('')
const [open, setOpen] = useState(false)
const update = () => plugin.emit('worlds:fetch', (data: World[]) => {
setWorlds(data)
if (data.length) setSelected(old => data.some(it => it.id === old) ? old : '')
})
useEffect(() => {
const offUpdate = plugin.on('worlds:update', update)
update()
return () => { offUpdate() }
}, [])
const sw = worlds.find(it => it.id === selected)
const getSwitch = (name: string, configId = name) => sw
? <ListItem
secondaryAction={<Switch disabled={!globalData.hasMultiverse} checked={(sw as any)[name]}
onChange={e => {
plugin.emit('worlds:set', sw.id, configId, e.target.checked.toString())
success()
}}
/>}><ListItemText primary={(lang.worlds as any)[name]} /></ListItem>
: null
return <Box sx={{ minHeight: '100%', py: 3 }}>
<Toolbar />
<Container maxWidth={false}>
<Grid container spacing={3}>
<Grid item lg={8} md={12} xl={9} xs={12}>
<Card>
<CardHeader title={lang.worlds.title} />
<Divider />
<Box sx={{ position: 'relative' }}>
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell padding='checkbox' />
<TableCell>{lang.worlds.name}</TableCell>
{globalData.hasMultiverse && <TableCell>{lang.worlds.alias}</TableCell>}
<TableCell>{lang.worlds.players}</TableCell>
<TableCell>{lang.worlds.chunks}</TableCell>
<TableCell>{lang.worlds.entities}</TableCell>
<TableCell>{lang.worlds.tiles}</TableCell>
<TableCell>{lang.worlds.time}</TableCell>
<TableCell>{lang.worlds.weather}</TableCell>
</TableRow>
</TableHead>
<TableBody>
{worlds.map(it => <TableRow key={it.id}>
<TableCell padding='checkbox'><Checkbox checked={selected === it.id} onClick={() => setSelected(it.id)} /></TableCell>
<TableCell><Tooltip title={it.id}><span>{it.name}</span></Tooltip></TableCell>
{globalData.hasMultiverse && <TableCell>{it.alias}
<IconButton size='small' onClick={() => dialog(lang.inputValue, lang.worlds.alias).then(res => {
if (res == null) return
plugin.emit('worlds:set', it.id, 'alias', res)
success()
})}><Edit fontSize='small' /></IconButton>
</TableCell>}
<TableCell>{it.players}</TableCell>
<TableCell>{it.chunks}</TableCell>
<TableCell>{it.entities}</TableCell>
<TableCell>{it.tiles}</TableCell>
<TableCell><Countdown time={it.time} max={24000} interval={50} /></TableCell>
<TableCell><IconButton size='small' onClick={() => {
plugin.emit('worlds:weather', it.id)
success()
}}>
{React.createElement((it.weather === 1 ? WeatherRainy : it.weather === 2 ? WeatherLightningRainy : WbSunny) as any)}
</IconButton></TableCell>
</TableRow>)}
</TableBody>
</Table>
</TableContainer>
</Box>
</Card>
</Grid>
<Grid item lg={4} md={6} xl={3} xs={12}>
<Card>
<CardHeader
title={lang.operations}
sx={{ position: 'relative' }}
action={<Tooltip title={lang.worlds.save} placement='left'>
<IconButton
size='small'
onClick={() => {
if (!sw) return
plugin.emit('worlds:save', sw.id)
success()
}}
sx={cardActionStyles}
><Save /></IconButton>
</Tooltip>}
/>
<Divider />
<Box sx={{ position: 'relative' }}>
{sw
? <List sx={{ width: '100%' }} component='nav'>
<ListItem secondaryAction={<ToggleButtonGroup
exclusive
color='primary'
size='small'
value={sw.difficulty}
onChange={(_, value) => {
plugin.emit('worlds:difficulty', sw.id, value)
success()
}}
>
{difficulties.map(it => <ToggleButton value={it.toUpperCase()} key={it}>{minecraft['options.difficulty.' + it]}</ToggleButton>)}
</ToggleButtonGroup>}><ListItemText primary={minecraft['options.difficulty']} /></ListItem>
<ListItem secondaryAction={<Switch checked={sw.pvp} onChange={e => {
plugin.emit('worlds:pvp', sw.id, e.target.checked)
success()
}} />}><ListItemText primary='PVP' /></ListItem>
{getSwitch('allowAnimals', 'spawning.animals.spawn')}
{getSwitch('allowMonsters', 'spawning.monsters.spawn')}
{globalData.hasMultiverse && <>
{getSwitch('allowFlight')}
{getSwitch('autoHeal')}
{getSwitch('hunger')}
</>}
<ListItem secondaryAction={globalData.canSetViewDistance
? <IconButton
onClick={() => dialog({
content: lang.inputValue,
input: {
error: true,
type: 'number',
helperText: lang.invalidValue,
validator: (it: string) => /^\d+$/.test(it) && +it > 1 && +it < 33
}
}).then(res => {
if (!res) return
plugin.emit('worlds:viewDistance', sw.id, parseInt(res as any))
success()
})}
><Edit /></IconButton>
: undefined}>
<ListItemText primary={lang.worlds.viewDistance + ': ' + sw.viewDistance} />
</ListItem>
<ListItem><ListItemText primary={minecraft['selectWorld.enterSeed']} secondary={sw.seed} /></ListItem>
<ListItemButton onClick={() => setOpen(!open)}>
<ListItemText primary={minecraft['selectWorld.gameRules']} />
{open ? <ExpandLess /> : <ExpandMore />}
</ListItemButton>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component='div' dense disablePadding>
{sw.rules.map(([key, value]) => {
const isTrue = value === 'true'
const isBoolean = isTrue || value === 'false'
const isNumber = /^\d+$/.test(value)
return <ListItem
key={key}
sx={{ pl: 4 }}
secondaryAction={isBoolean
? <Switch
checked={isTrue}
onChange={e => {
plugin.emit('worlds:rule', sw.id, key, e.target.checked.toString())
success()
}}
/>
: <IconButton
onClick={() => dialog({
content: lang.inputValue,
input: isNumber
? {
error: true,
type: 'number',
helperText: lang.invalidValue,
validator: (it: string) => /^\d+$/.test(it)
}
: { }
}).then(res => {
if (res == null) return
plugin.emit('worlds:rule', sw.id, key, res)
success()
})}
><Edit /></IconButton>}
>
<ListItemText primary={(minecraft['gamerule.' + key] || key) + (isBoolean ? '' : ': ' + value)} />
</ListItem>
})}
</List>
</Collapse>
</List>
: <CardContent><Empty /></CardContent>
}
</Box>
</Card>
</Grid>
</Grid>
</Container>
</Box>
}
Example #3
| Source File: router.tsx From Search-Next with GNU General Public License v3.0 | 4 votes |
|
routers: Router[] = [
{
path: '/',
title: '首页',
component: lazy(() => import('@pages/index')),
},
{
path: 'navigation/:classify',
title: '导航',
component: lazy(() => import('@pages/navigation')),
},
{
path: 'setting',
title: '设置',
exact: false,
component: SettingPage,
routes: [
{
title: '账户',
path: 'auth',
component: Auth,
routes: [
{
title: '账户信息',
icon: <ManageAccounts />,
path: 'info',
component: Info,
},
{
title: '其他账户',
icon: <SupervisorAccount />,
path: 'others',
component: Others,
},
],
},
{
title: '个性化',
path: 'personalise',
component: Personalise,
routes: [
{
title: '背景',
icon: <PhotoLibrary />,
path: 'background',
component: Background,
},
{
title: 'Logo',
icon: <Brush />,
path: 'logo',
component: Logo,
},
{
title: '主题',
icon: <ColorLens />,
path: 'theme',
component: Theme,
},
],
},
{
title: '功能',
icon: <FeaturedPlayList />,
path: 'features',
component: Features,
routes: [
{
title: '导航页',
icon: <NavigationIcon />,
path: 'navigation',
component: Navigation,
},
{
title: '通知与消息',
icon: <MessageIcon />,
path: 'message',
component: Message,
routes: [
{
title: '版本更新',
icon: <NewReleases />,
path: 'release',
component: ReleasesView,
},
],
},
],
},
{
title: '数据',
path: 'data',
component: Data,
routes: [
{
title: '备份与恢复',
icon: <SettingsBackupRestore />,
path: 'backup',
component: Backup,
},
],
},
{
title: '实验室',
path: 'lab',
component: Lab,
routes: [
{
title: '第三方API',
icon: <Api />,
path: 'otherApis',
component: OtherApis,
},
{
title: '搜索引擎',
icon: <Search />,
path: 'search-engine',
component: Engine,
routes: [
{
title: '搜索引擎详情',
icon: <Search />,
path: 'engine-detail/:id',
component: EngineDetail,
},
],
},
{
title: '天气',
icon: <WbSunny />,
path: 'weather',
component: Weather,
status: 'process',
},
{
title: '搜索框',
icon: <Search />,
path: 'search-bar',
component: SearchBar,
status: 'process',
},
],
},
{
title: '关于',
path: 'about',
component: About,
routes: [
{
title: '历史版本记录',
icon: <Update />,
path: 'releases',
component: Releases,
},
{
title: '历史提交记录',
icon: <Update />,
path: 'commits',
component: Commits,
},
{
title: '用户体验计划',
icon: <BugReportOutlined />,
path: 'beta',
component: Beta,
},
{
title: '项目依赖',
icon: <FolderOutlined />,
path: 'dependencies',
component: Dependencies,
},
],
},
],
},
{
path: '/help/:text',
title: '帮助',
component: lazy(() => import('@pages/help')),
},
]
