@ant-design/icons#ApiTwoTone TypeScript Examples
The following examples show how to use
@ant-design/icons#ApiTwoTone.
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: App.tsx From pcap2socks-gui with MIT License | 5 votes |
|
renderInterface = () => {
return (
<div className="content-content">
<Row className="content-content-row" gutter={[16, 16]} justify="center">
<Col className="content-content-col" span={24}>
<ApiTwoTone className="content-content-icon" />
</Col>
</Row>
<Row className="content-content-row" gutter={[16, 32]} justify="center">
<Col className="content-content-col" span={24}>
<Paragraph>
<Title level={3}>网卡</Title>
<Paragraph type="secondary" style={{ marginBottom: "0" }}>
pcap2socks 将监听指定的网卡中的所有网络流量，其中源设备的网络流量将被转发到代理服务器。
</Paragraph>
<Paragraph type="secondary">
通常，你可以选择此设备用于上网的网卡，但如果你的源设备通过此设备的移动热点上网，请选择这张用于网络共享的网卡。
</Paragraph>
</Paragraph>
</Col>
</Row>
<Row className="content-content-row" gutter={[16, 0]} justify="center">
<Col className="content-content-col" xs={24} sm={18} md={12}>
<RowSelect
label="网卡"
options={this.state.interfaces.map((ele) => {
return { label: ele.alias ? ele.alias : ele.name, value: ele.name };
})}
value={this.state.interface}
onChange={(value) => {
const inter = this.state.interfaces.find((ele) => ele.name === value);
let mtu = 0;
if (inter) {
mtu = Math.min(1500, inter.mtu);
}
this.setState({ interface: value, mtu: mtu });
}}
/>
<RowInput
label="MTU"
valueTooltip="MTU 的合法范围为 576 到 1500，如果你不清楚 MTU，请保留默认值"
value={this.state.mtu}
onChange={(value) => {
this.setState({ mtu: Number(value) });
}}
/>
</Col>
</Row>
<Row gutter={[16, 16]} justify="center"></Row>
</div>
);
};
Example #2
| Source File: index.tsx From posthog-foss with MIT License | 4 votes |
|
export function PreflightCheck(): JSX.Element {
const { preflight, preflightLoading, preflightMode } = useValues(preflightLogic)
const { setPreflightMode } = useActions(preflightLogic)
const isReady =
preflight &&
preflight.django &&
preflight.db &&
preflight.redis &&
preflight.celery &&
(preflightMode === 'experimentation' || preflight.plugins)
const checks = [
{
id: 'database',
name: 'Database (Postgres)',
status: preflight?.db,
},
{
id: 'backend',
name: 'Backend server (Django)',
status: preflight?.django,
},
{
id: 'redis',
name: 'Cache & queue (Redis)',
status: preflight?.redis,
},
{
id: 'celery',
name: 'Background jobs (Celery)',
status: preflight?.celery,
},
{
id: 'plugins',
name: 'Plugin server (Node)',
status: preflight?.plugins,
caption: preflightMode === 'experimentation' ? 'Required in production environments' : '',
failedState: preflightMode === 'experimentation' ? 'warning' : 'error',
},
{
id: 'frontend',
name: 'Frontend build (Webpack)',
status: true, // If this code is ran, the front-end is already built
},
{
id: 'tls',
name: 'SSL/TLS certificate',
status: window.location.protocol === 'https:',
caption:
preflightMode === 'experimentation'
? 'Not required for development or testing'
: 'Install before ingesting real user data',
failedState: preflightMode === 'experimentation' ? 'not-required' : 'warning',
},
] as CheckInterface[]
const handlePreflightFinished = (): void => {
router.actions.push(urls.signup())
}
return (
<div style={{ minHeight: '100vh' }}>
<Row
style={{
display: 'flex',
justifyContent: 'center',
paddingTop: 32,
paddingBottom: 32,
backgroundColor: '#eeefe9',
}}
>
<img src={posthogLogo} style={{ width: 157, height: 30 }} />
</Row>
<Row style={{ display: 'flex', justifyContent: 'center', paddingBottom: 16 }}>
<PageHeader title="Lets get started..." />
</Row>
<Row style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ width: 960 }}>
<Steps current={0}>
<Step title="Preflight check" subTitle="1 min" description="Prepare your instance" />
<Step
title="Event capture"
subTitle="15 mins"
description="Set up your app to capture events"
/>
<Step
title="Setup your team"
subTitle="5 mins"
description="Invite your team and start discovering insights"
/>
</Steps>
</div>
</Row>
<Row style={{ display: 'flex', justifyContent: 'center' }}>
<div style={{ display: 'flex', alignItems: 'center', flexDirection: 'column' }}>
<img src={suprisedHog} style={{ maxHeight: '100%', width: 320 }} />
<p>Any questions?</p>
<Button type="default" data-attr="support" data-source="preflight">
<a href="https://posthog.com/support" target="_blank" rel="noreferrer">
Get support
</a>
</Button>
</div>
<div
style={{
display: 'flex',
justifyContent: 'flex-start',
margin: '0 32px',
flexDirection: 'column',
paddingTop: 32,
}}
>
<Card style={{ width: '100%' }}>
<Row style={{ display: 'flex', justifyContent: 'space-between', lineHeight: '32px' }}>
{!preflightMode ? (
<b style={{ fontSize: 16 }}>Select launch mode</b>
) : (
<>
<b style={{ fontSize: 16 }}>
<span>
<span
style={{ color: blue.primary, cursor: 'pointer' }}
onClick={() => setPreflightMode(null)}
>
Select launch mode
</span>{' '}
> {capitalizeFirstLetter(preflightMode)}
</span>
</b>
<Button
type="default"
data-attr="preflight-refresh"
icon={<SyncOutlined />}
onClick={() => window.location.reload()}
disabled={preflightLoading || !preflight}
>
Refresh
</Button>
</>
)}
</Row>
{!preflightMode && (
<div>We're excited to have you here. What's your plan for this installation?</div>
)}
<div
className="text-center"
style={{ padding: '24px 0', display: 'flex', justifyContent: 'center', maxWidth: 533 }}
>
{!preflightMode && (
<>
<Button
type="default"
data-attr="preflight-experimentation"
size="large"
onClick={() => setPreflightMode('experimentation')}
icon={<ApiTwoTone />}
>
Just playing
</Button>
<Button
type="primary"
style={{ marginLeft: 16 }}
size="large"
data-attr="preflight-live"
onClick={() => setPreflightMode('live')}
icon={<RocketFilled />}
>
Live implementation
</Button>
</>
)}
{preflightMode && (
<>
<Row>
{checks.map((item) => (
<PreflightItem key={item.id} {...item} />
))}
</Row>
</>
)}
</div>
</Card>
{preflightMode && (
<>
<div className="space-top text-center" data-attr="preflightStatus">
{isReady ? (
<b style={{ color: green.primary }}>All systems go!</b>
) : (
<b>Checks in progress…</b>
)}
</div>
<div className="text-center" style={{ marginBottom: 64 }}>
<Button
type="primary"
data-attr="preflight-complete"
data-source={preflightMode}
disabled={!isReady}
onClick={handlePreflightFinished}
>
Continue
</Button>
</div>
</>
)}
</div>
</Row>
</div>
)
}
