@ant-design/icons#ArrowRightOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#ArrowRightOutlined.
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: BillingSubscribed.tsx From posthog-foss with MIT License | 6 votes |
|
function SubscriptionFailure(): JSX.Element {
const { sessionId } = useValues(billingSubscribedLogic)
return (
<>
<CloseCircleOutlined style={{ color: 'var(--danger)' }} className="title-icon" />
<h2 className="subtitle">Something went wrong</h2>
<p>
We couldn't start your subscription. Please try again with a{' '}
<b>different payment method or contact us</b> if the problem persists.
</p>
{sessionId && (
/* Note we include PostHog Cloud specifically (app.posthog.com) in case a self-hosted user
ended up here for some reason. Should not happen as these should be processed by license.posthog.com */
<Button
className="btn-bridge"
block
href={`https://app.posthog.com/billing/setup?session_id=${sessionId}`}
>
Try again
</Button>
)}
<div className="mt text-center">
<Link to="/">
Go to PostHog <ArrowRightOutlined />
</Link>
</div>
</>
)
}
Example #2
| Source File: SessionRecordings.tsx From posthog-foss with MIT License | 6 votes |
|
export function SessionsRecordings(): JSX.Element {
const { currentTeam } = useValues(teamLogic)
return (
<div>
<PageHeader title={<Row align="middle">Recordings</Row>} />
{currentTeam && !currentTeam?.session_recording_opt_in ? (
<Alert
style={{ marginBottom: 16, display: 'flex', alignItems: 'center' }}
message="Recordings are not yet enabled for this project"
description="To use this feature, please go to your project settings and enable it."
type="info"
showIcon
action={
<Button
type="primary"
onClick={() => {
router.actions.push(urls.projectSettings(), {}, 'session-recording')
}}
>
Go to settings <ArrowRightOutlined />
</Button>
}
/>
) : null}
<SessionRecordingsTable key="global" />
</div>
)
}
Example #3
| Source File: index.tsx From amiya with MIT License | 6 votes |
|
export default function Index() {
return (
<div className="home-root">
<div className="hero">
<div className="hero-content">
<h1>
<span className="title">
<span className="text">Amiya</span>
<span className="line"></span>
</span>
</h1>
<div className="desc">
<p>
<mark>Ant Design</mark> 的二次封装，提供页面级别的组件，保留原有功能样式，简化使用。
</p>
</div>
<a href="./guild/quick-start" className="btn">
去使用
<ArrowRightOutlined />
</a>
</div>
<div className="bg">
<div className="layer">
<div className="square square-left"></div>
<div className="square square-center"></div>
<div className="square square-top"></div>
<div className="circle circle-top"></div>
<div className="circle circle-center"></div>
</div>
</div>
</div>
</div>
)
}
Example #4
| Source File: PayCard.tsx From posthog-foss with MIT License | 5 votes |
|
export function PayCard({ title, caption, docsLink, identifier }: PayCardProps): JSX.Element | null {
const { preflight } = useValues(preflightLogic)
const { push } = useActions(router)
const [shown, setShown] = useState(false)
const storageKey = `pay-gate-dismissed-${identifier}`
const { reportPayGateDismissed, reportPayGateShown } = useActions(eventUsageLogic)
const handleClick = (): void => {
if (preflight?.cloud) {
push('/organization/billing')
} else {
window.open('https://posthog.com/pricing', '_blank')
}
}
const close = (e: React.MouseEvent): void => {
// TODO
e.stopPropagation()
setShown(false)
window.localStorage.setItem(storageKey, '1')
reportPayGateDismissed(identifier)
}
useEffect(() => {
if (!window.localStorage.getItem(storageKey)) {
setShown(true)
reportPayGateShown(identifier)
}
}, [])
if (!shown) {
return null
}
return (
<div className="pay-card">
<div className="close-button" onClick={close}>
<CloseOutlined />
</div>
<Row onClick={handleClick}>
<Col span={23}>
<h3>{title}</h3>
<p>
{caption}
{docsLink && (
<>
{' '}
<a
href={`${docsLink}?utm_medium=in-product&utm_campaign=${identifier}`}
target="_blank"
rel="noopener"
onClick={(e) => e.stopPropagation()}
>
Learn more <ArrowRightOutlined />
</a>
</>
)}
</p>
{preflight?.cloud ? (
<p>
Click to <b>set up your billing details and gain access to these features.</b>
</p>
) : (
<p>
Click to <b>explore license options.</b>
</p>
)}
</Col>
<Col span={1} style={{ display: 'flex', alignItems: 'center' }}>
<ArrowRightOutlined style={{ color: 'var(--muted-alt)', fontSize: '1.2em' }} />
</Col>
</Row>
</div>
)
}
Example #5
| Source File: InviteSignup.tsx From posthog-foss with MIT License | 5 votes |
|
function AuthenticatedAcceptInvite({ invite }: { invite: PrevalidatedInvite }): JSX.Element {
const { user } = useValues(userLogic)
const { acceptInvite } = useActions(inviteSignupLogic)
const { acceptedInviteLoading, acceptedInvite } = useValues(inviteSignupLogic)
return (
<div className="authenticated-invite">
<Space className="inner" direction="vertical" align="center">
<Row>
<h1 className="page-title">You have been invited to join {invite.organization_name}</h1>
</Row>
<Row>
<span>
You will accept the invite under your <b>existing PostHog account</b> ({user?.email})
</span>
</Row>
{user && (
<Row>
<div className="whoami-mock">
<div className="whoami-inner-container">
<WhoAmI user={user} />
</div>
</div>
</Row>
)}
<Row>
You can change organizations at any time by clicking on the dropdown at the top right corner of the
navigation bar.
</Row>
<div>
{!acceptedInvite ? (
<>
<Button
type="primary"
block
onClick={() => acceptInvite()}
disabled={acceptedInviteLoading}
>
Accept invite
</Button>
<div className="mt">
<Link to="/">
<ArrowLeftOutlined /> Go back to PostHog
</Link>
</div>
</>
) : (
<Button block onClick={() => (window.location.href = '/')}>
Go to PostHog <ArrowRightOutlined />
</Button>
)}
</div>
</Space>
</div>
)
}
Example #6
| Source File: multiRecordingButton.tsx From posthog-foss with MIT License | 5 votes |
|
export function MultiRecordingButton({ sessionRecordings, onOpenRecording }: MultiRecordingButtonProps): JSX.Element {
const [areRecordingsShown, setAreRecordingsShown] = useState(false)
const isSingleRecording = sessionRecordings.length === 1
/** A wrapper for the button, that handles differing behavior based on the number of recordings available:
* When there's only one recording, clicking opens the recording.
* When there are more recordings, clicking shows the dropdown.
*/
const ButtonWrapper: (props: { setRef: (ref: HTMLElement | null) => void; children: ReactNode }) => JSX.Element =
useCallback(
({ setRef, children }) => {
return isSingleRecording ? (
<div ref={setRef}>
<Link
onClick={(event) => {
event.stopPropagation()
onOpenRecording(sessionRecordings[0])
}}
>
{children}
</Link>
</div>
) : (
<div
ref={setRef}
onClick={(event) => {
event.stopPropagation()
setAreRecordingsShown((previousValue) => !previousValue)
}}
>
{children}
</div>
)
},
[sessionRecordings, setAreRecordingsShown]
)
return (
<Popup
visible={areRecordingsShown}
placement="bottom-end"
fallbackPlacements={['top-end']}
className="session-recordings-popup"
overlay={sessionRecordings.map((sessionRecording, index) => (
<Link
key={sessionRecording.session_id}
onClick={(event) => {
event.stopPropagation()
setAreRecordingsShown(false)
onOpenRecording(sessionRecording)
}}
>
<div className="session-recordings-popup-row">
<PlayCircleOutlined />
Recording {index + 1}
</div>
</Link>
))}
onClickOutside={() => {
setAreRecordingsShown(false)
}}
>
{({ setRef }) => (
<ButtonWrapper setRef={setRef}>
<Button
className={'session-recordings-button'}
data-attr="session-recordings-button"
icon={<PlayCircleOutlined />}
>
Watch recording
{isSingleRecording ? <ArrowRightOutlined /> : <DownOutlined />}
</Button>
</ButtonWrapper>
)}
</Popup>
)
}
Example #7
| Source File: NewOrder.tsx From mayoor with MIT License | 5 votes |
|
NewOrder: React.FC = () => {
const { t } = useTranslation();
const history = useHistory();
const highestOrderNumberQuery = useQuery<GetHighestOrderNumber>(GET_HIGHEST_ORDER_NUMBER);
const [createOrder, { loading }] = useMutation<CreateOrder, CreateOrderVariables>(
CREATE_ORDER,
{
onError: (err) => {
if (err.graphQLErrors[0].extensions?.code === 'ORDER_NUMBER_EXISTS') {
message.error(t('order_number_exists'));
}
},
onCompleted: (data) => {
message.success(
<>
{t('Order number {{number}} created', {
number: data.createOrder.number,
})}{' '}
<Button
type="link"
icon={<ArrowRightOutlined />}
onClick={() => history.push(`/orders/${data.createOrder.number}`)}
></Button>
</>,
);
},
},
);
const submitHandler = async (rawValues: OrderFormValues) => {
const { number, ...rest } = rawValues as ValidatedOrder; // gets triggered only when form is valid
await createOrder({
variables: {
number,
input: rest,
},
});
highestOrderNumberQuery.refetch();
};
const newOrderNumber = highestOrderNumberQuery.data
? (highestOrderNumberQuery.data.getHighestOrderNumber || 0) + 1
: null;
return (
<>
<PageTitle>{t('Add order')}</PageTitle>
<OrderForm
initialValues={getInitialValues(newOrderNumber)}
onSubmit={submitHandler}
extraCustomer={null}
isNumberEditable={true}
submitButton={
<Button
type="primary"
htmlType="submit"
style={{ marginTop: 10 }}
loading={loading}
data-test-id="add-order-submit-button"
>
{t('Add order')}
</Button>
}
/>
</>
);
}
Example #8
| Source File: palette.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
palette = () => (
<Palette>
<Category name="Text">
<Component name="Formatted Message">
<Variant>
<FormattedMessage />
</Variant>
</Component>
<Component name="Heading">
<Variant name="h1">
<Typography.Title></Typography.Title>
</Variant>
<Variant name="h2">
<Typography.Title level={2}></Typography.Title>
</Variant>
<Variant name="h3">
<Typography.Title level={3}></Typography.Title>
</Variant>
<Variant name="h4">
<Typography.Title level={4}></Typography.Title>
</Variant>
<Variant name="h5">
<Typography.Title level={5}></Typography.Title>
</Variant>
</Component>
<Component name="Text">
<Variant>
<Typography.Text></Typography.Text>
</Variant>
<Variant name="Secondary">
<Typography.Text type="secondary"></Typography.Text>
</Variant>
<Variant name="Success">
<Typography.Text type="success"></Typography.Text>
</Variant>
<Variant name="Warning">
<Typography.Text type="warning"></Typography.Text>
</Variant>
<Variant name="Danger">
<Typography.Text type="danger"></Typography.Text>
</Variant>
<Variant name="Disabled">
<Typography.Text disabled></Typography.Text>
</Variant>
</Component>
</Category>
<Category name="Layout">
<Component name="Divider">
<Variant>
<Divider />
</Variant>
</Component>
<Component name="Grid">
<Variant name="Simple Row">
<Row></Row>
</Variant>
<Variant name="Two columns">
<Row>
<Col span={12}></Col>
<Col span={12}></Col>
</Row>
</Variant>
<Variant name="Three columns">
<Row>
<Col span={8}></Col>
<Col span={8}></Col>
<Col span={8}></Col>
</Row>
</Variant>
</Component>
<Component name="Space">
<Variant>
<Space />
</Variant>
<Variant name="Small">
<Space size={"small"} />
</Variant>
<Variant name="Large">
<Space size={"large"} />
</Variant>
</Component>
</Category>
<Category name="Controls">
<Component name="Autocomplete">
<Variant>
<AutoComplete placeholder="input here" />
</Variant>
</Component>
<Component name="Button">
<Variant>
<Button></Button>
</Variant>
<Variant name="Primary">
<Button type="primary"></Button>
</Variant>
<Variant name="Link">
<Button type="link"></Button>
</Variant>
<Variant name="Dropdown">
<Dropdown
trigger={["click"]}
overlay={
<Menu>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
<Menu.Item></Menu.Item>
</Menu>
}
>
<Button></Button>
</Dropdown>
</Variant>
</Component>
<Component name="Checkbox">
<Variant>
<Checkbox />
</Variant>
</Component>
<Component name="Switch">
<Variant>
<Switch />
</Variant>
</Component>
<Component name="Radio Group">
<Variant>
<Radio.Group>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</Variant>
<Variant name="Button">
<Radio.Group>
<Radio.Button value={1}>A</Radio.Button>
<Radio.Button value={2}>B</Radio.Button>
<Radio.Button value={3}>C</Radio.Button>
<Radio.Button value={4}>D</Radio.Button>
</Radio.Group>
</Variant>
</Component>
<Component name="DatePicker">
<Variant>
<DatePicker />
</Variant>
<Variant name="Range">
<DatePicker.RangePicker />
</Variant>
</Component>
<Component name="TimePicker">
<Variant>
<TimePicker />
</Variant>
<Variant name="Range">
<TimePicker.RangePicker />
</Variant>
</Component>
<Component name="Input">
<Variant>
<Input />
</Variant>
<Variant name="Number">
<InputNumber />
</Variant>
</Component>
<Component name="Select">
<Variant>
<Select defaultValue="1">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
<Variant name="Multiple">
<Select defaultValue={["1"]} mode="multiple" allowClear>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
</Component>
<Component name="Link">
<Variant>
<Typography.Link href="" target="_blank"></Typography.Link>
</Variant>
</Component>
<Component name="Slider">
<Variant>
<Slider defaultValue={30} />
</Variant>
<Variant name="Range">
<Slider range defaultValue={[20, 50]} />
</Variant>
</Component>
</Category>
<Category name="Data Display">
<Component name="Field">
<Variant>
<Field
entityName={ENTITY_NAME}
disabled={readOnlyMode}
propertyName=""
formItemProps={{
style: { marginBottom: "12px" }
}}
/>
</Variant>
</Component>
<Component name="Card">
<Variant>
<Card />
</Variant>
<Variant name="With Title">
<Card>
<Card title="Card title">
<p>Card content</p>
</Card>
</Card>
</Variant>
<Variant name="My custom card">
<Card>
<Card title="Card title">
<p>Card content</p>
<Avatar />
</Card>
</Card>
</Variant>
</Component>
<Component name="Tabs">
<Variant>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Variant>
<Variant name="Tab Pane">
<Tabs.TabPane></Tabs.TabPane>
</Variant>
</Component>
<Component name="Collapse">
<Variant>
<Collapse defaultActiveKey="1">
<Collapse.Panel
header="This is panel header 1"
key="1"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 2"
key="2"
></Collapse.Panel>
<Collapse.Panel
header="This is panel header 3"
key="3"
></Collapse.Panel>
</Collapse>
</Variant>
</Component>
<Component name="Image">
<Variant>
<Image width={200} src="" />
</Variant>
</Component>
<Component name="Avatar">
<Variant>
<Avatar icon={<UserOutlined />} />
</Variant>
<Variant name="Image">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Variant>
</Component>
<Component name="Badge">
<Variant>
<Badge count={1}></Badge>
</Variant>
</Component>
<Component name="Statistic">
<Variant>
<Statistic title="Title" value={112893} />
</Variant>
</Component>
<Component name="Alert">
<Variant name="Success">
<Alert message="Text" type="success" />
</Variant>
<Variant name="Info">
<Alert message="Text" type="info" />
</Variant>
<Variant name="Warning">
<Alert message="Text" type="warning" />
</Variant>
<Variant name="Error">
<Alert message="Text" type="error" />
</Variant>
</Component>
<Component name="List">
<Variant>
<List
bordered
dataSource={[]}
renderItem={item => <List.Item></List.Item>}
/>
</Variant>
</Component>
</Category>
<Category name="Icons">
<Component name="Arrow">
<Variant name="Up">
<ArrowUpOutlined />
</Variant>
<Variant name="Down">
<ArrowDownOutlined />
</Variant>
<Variant name="Left">
<ArrowLeftOutlined />
</Variant>
<Variant name="Right">
<ArrowRightOutlined />
</Variant>
</Component>
<Component name="Question">
<Variant>
<QuestionOutlined />
</Variant>
<Variant name="Circle">
<QuestionCircleOutlined />
</Variant>
</Component>
<Component name="Plus">
<Variant>
<PlusOutlined />
</Variant>
<Variant name="Circle">
<PlusCircleOutlined />
</Variant>
</Component>
<Component name="Info">
<Variant>
<InfoOutlined />
</Variant>
<Variant name="Circle">
<InfoCircleOutlined />
</Variant>
</Component>
<Component name="Exclamation">
<Variant>
<ExclamationOutlined />
</Variant>
<Variant name="Circle">
<ExclamationCircleOutlined />
</Variant>
</Component>
<Component name="Close">
<Variant>
<CloseOutlined />
</Variant>
<Variant name="Circle">
<CloseCircleOutlined />
</Variant>
</Component>
<Component name="Check">
<Variant>
<CheckOutlined />
</Variant>
<Variant name="Circle">
<CheckCircleOutlined />
</Variant>
</Component>
<Component name="Edit">
<Variant>
<EditOutlined />
</Variant>
</Component>
<Component name="Copy">
<Variant>
<CopyOutlined />
</Variant>
</Component>
<Component name="Delete">
<Variant>
<DeleteOutlined />
</Variant>
</Component>
<Component name="Bars">
<Variant>
<BarsOutlined />
</Variant>
</Component>
<Component name="Bell">
<Variant>
<BellOutlined />
</Variant>
</Component>
<Component name="Clear">
<Variant>
<ClearOutlined />
</Variant>
</Component>
<Component name="Download">
<Variant>
<DownloadOutlined />
</Variant>
</Component>
<Component name="Upload">
<Variant>
<UploadOutlined />
</Variant>
</Component>
<Component name="Sync">
<Variant>
<SyncOutlined />
</Variant>
</Component>
<Component name="Save">
<Variant>
<SaveOutlined />
</Variant>
</Component>
<Component name="Search">
<Variant>
<SearchOutlined />
</Variant>
</Component>
<Component name="Settings">
<Variant>
<SettingOutlined />
</Variant>
</Component>
<Component name="Paperclip">
<Variant>
<PaperClipOutlined />
</Variant>
</Component>
<Component name="Phone">
<Variant>
<PhoneOutlined />
</Variant>
</Component>
<Component name="Mail">
<Variant>
<MailOutlined />
</Variant>
</Component>
<Component name="Home">
<Variant>
<HomeOutlined />
</Variant>
</Component>
<Component name="Contacts">
<Variant>
<ContactsOutlined />
</Variant>
</Component>
<Component name="User">
<Variant>
<UserOutlined />
</Variant>
<Variant name="Add">
<UserAddOutlined />
</Variant>
<Variant name="Remove">
<UserDeleteOutlined />
</Variant>
</Component>
<Component name="Team">
<Variant>
<TeamOutlined />
</Variant>
</Component>
</Category>
<Category name="Screens">
<Component name="ExampleCustomScreen">
<Variant>
<ExampleCustomScreen />
</Variant>
</Component>
<Component name="CustomEntityFilterTest">
<Variant>
<CustomEntityFilterTest />
</Variant>
</Component>
<Component name="CustomFormControls">
<Variant>
<CustomFormControls />
</Variant>
</Component>
<Component name="CustomDataDisplayComponents">
<Variant>
<CustomDataDisplayComponents />
</Variant>
</Component>
<Component name="CustomAppLayouts">
<Variant>
<CustomAppLayouts />
</Variant>
</Component>
<Component name="CustomControls">
<Variant>
<CustomControls />
</Variant>
</Component>
<Component name="ErrorBoundaryTests">
<Variant>
<ErrorBoundaryTests />
</Variant>
</Component>
<Component name="TestBlankScreen">
<Variant>
<TestBlankScreen />
</Variant>
</Component>
<Component name="CarEditor">
<Variant>
<CarEditor />
</Variant>
</Component>
<Component name="CarBrowserCards">
<Variant>
<CarBrowserCards />
</Variant>
</Component>
<Component name="CarBrowserList">
<Variant>
<CarBrowserList />
</Variant>
</Component>
<Component name="CarBrowserTable">
<Variant>
<CarBrowserTable />
</Variant>
</Component>
<Component name="CarCardsGrid">
<Variant>
<CarCardsGrid />
</Variant>
</Component>
<Component name="FavoriteCars">
<Variant>
<FavoriteCars />
</Variant>
</Component>
<Component name="CarCardsWithDetails">
<Variant>
<CarCardsWithDetails />
</Variant>
</Component>
<Component name="CarTableWithFilters">
<Variant>
<CarTableWithFilters />
</Variant>
</Component>
<Component name="CarMasterDetail">
<Variant>
<CarMasterDetail />
</Variant>
</Component>
<Component name="FormWizardCompositionO2O">
<Variant>
<FormWizardCompositionO2O />
</Variant>
</Component>
<Component name="FormWizardEditor">
<Variant>
<FormWizardEditor />
</Variant>
</Component>
<Component name="FormWizardBrowserTable">
<Variant>
<FormWizardBrowserTable />
</Variant>
</Component>
<Component name="CarMultiSelectionTable">
<Variant>
<CarMultiSelectionTable />
</Variant>
</Component>
<Component name="DatatypesTestEditor">
<Variant>
<DatatypesTestEditor />
</Variant>
</Component>
<Component name="DatatypesTestBrowserCards">
<Variant>
<DatatypesTestBrowserCards />
</Variant>
</Component>
<Component name="DatatypesTestBrowserList">
<Variant>
<DatatypesTestBrowserList />
</Variant>
</Component>
<Component name="DatatypesTestBrowserTable">
<Variant>
<DatatypesTestBrowserTable />
</Variant>
</Component>
<Component name="DatatypesTestCards">
<Variant>
<DatatypesTestCards />
</Variant>
</Component>
<Component name="AssociationO2OEditor">
<Variant>
<AssociationO2OEditor />
</Variant>
</Component>
<Component name="AssociationO2OBrowserTable">
<Variant>
<AssociationO2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationO2MEditor">
<Variant>
<AssociationO2MEditor />
</Variant>
</Component>
<Component name="AssociationO2MBrowserTable">
<Variant>
<AssociationO2MBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2OEditor">
<Variant>
<AssociationM2OEditor />
</Variant>
</Component>
<Component name="AssociationM2OBrowserTable">
<Variant>
<AssociationM2OBrowserTable />
</Variant>
</Component>
<Component name="AssociationM2MEditor">
<Variant>
<AssociationM2MEditor />
</Variant>
</Component>
<Component name="AssociationM2MBrowserTable">
<Variant>
<AssociationM2MBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2OEditor">
<Variant>
<CompositionO2OEditor />
</Variant>
</Component>
<Component name="CompositionO2OBrowserTable">
<Variant>
<CompositionO2OBrowserTable />
</Variant>
</Component>
<Component name="CompositionO2MEditor">
<Variant>
<CompositionO2MEditor />
</Variant>
</Component>
<Component name="CompositionO2MBrowserTable">
<Variant>
<CompositionO2MBrowserTable />
</Variant>
</Component>
<Component name="DeeplyNestedTestEntityEditor">
<Variant>
<DeeplyNestedTestEntityEditor />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityTable">
<Variant>
<DeeplyNestedO2MTestEntityTable />
</Variant>
</Component>
<Component name="DeeplyNestedO2MTestEntityEditor">
<Variant>
<DeeplyNestedO2MTestEntityEditor />
</Variant>
</Component>
<Component name="IntIdEditor">
<Variant>
<IntIdEditor />
</Variant>
</Component>
<Component name="IntIdBrowserTable">
<Variant>
<IntIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdBrowserCards">
<Variant>
<IntIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdBrowserList">
<Variant>
<IntIdBrowserList />
</Variant>
</Component>
<Component name="IntIdentityIdCards">
<Variant>
<IntIdentityIdCards />
</Variant>
</Component>
<Component name="IntIdentityIdEditor">
<Variant>
<IntIdentityIdEditor />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserTable">
<Variant>
<IntIdentityIdBrowserTable />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserCards">
<Variant>
<IntIdentityIdBrowserCards />
</Variant>
</Component>
<Component name="IntIdentityIdBrowserList">
<Variant>
<IntIdentityIdBrowserList />
</Variant>
</Component>
<Component name="StringIdCards">
<Variant>
<StringIdCards />
</Variant>
</Component>
<Component name="StringIdMgtCardsEdit">
<Variant>
<StringIdMgtCardsEdit />
</Variant>
</Component>
<Component name="StringIdBrowserCards">
<Variant>
<StringIdBrowserCards />
</Variant>
</Component>
<Component name="StringIdBrowserList">
<Variant>
<StringIdBrowserList />
</Variant>
</Component>
<Component name="StringIdBrowserTable">
<Variant>
<StringIdBrowserTable />
</Variant>
</Component>
<Component name="WeirdStringIdEditor">
<Variant>
<WeirdStringIdEditor />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserCards">
<Variant>
<WeirdStringIdBrowserCards />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserList">
<Variant>
<WeirdStringIdBrowserList />
</Variant>
</Component>
<Component name="WeirdStringIdBrowserTable">
<Variant>
<WeirdStringIdBrowserTable />
</Variant>
</Component>
<Component name="BoringStringIdEditor">
<Variant>
<BoringStringIdEditor />
</Variant>
</Component>
<Component name="BoringStringIdBrowserTable">
<Variant>
<BoringStringIdBrowserTable />
</Variant>
</Component>
<Component name="TrickyIdEditor">
<Variant>
<TrickyIdEditor />
</Variant>
</Component>
<Component name="TrickyIdBrowserTable">
<Variant>
<TrickyIdBrowserTable />
</Variant>
</Component>
</Category>
</Palette>
)
Example #9
| Source File: palette.tsx From jmix-frontend with Apache License 2.0 | 4 votes |
|
palette = () =>
<Palette>
<Category name="Text">
<Component name="Formatted Message">
<Variant>
<FormattedMessage />
</Variant>
</Component>
<Component name="Heading">
<Variant name='h1'>
<Typography.Title></Typography.Title>
</Variant>
<Variant name='h2'>
<Typography.Title level = {2}></Typography.Title>
</Variant>
<Variant name='h3'>
<Typography.Title level = {3}></Typography.Title>
</Variant>
<Variant name='h4'>
<Typography.Title level = {4}></Typography.Title>
</Variant>
<Variant name='h5'>
<Typography.Title level = {5}></Typography.Title>
</Variant>
</Component>
<Component name='Text'>
<Variant>
<Typography.Text></Typography.Text>
</Variant>
<Variant name = 'Secondary'>
<Typography.Text type="secondary"></Typography.Text>
</Variant>
<Variant name = 'Success'>
<Typography.Text type="success"></Typography.Text>
</Variant>
<Variant name = 'Warning'>
<Typography.Text type="warning"></Typography.Text>
</Variant>
<Variant name = 'Danger'>
<Typography.Text type="danger"></Typography.Text>
</Variant>
<Variant name = 'Disabled'>
<Typography.Text disabled></Typography.Text>
</Variant>
</Component>
</Category>
<Category name="Layout">
<Component name="Divider">
<Variant>
<Divider />
</Variant>
</Component>
<Component name="Grid">
<Variant name="Simple Row">
<Row></Row>
</Variant>
<Variant name="Two columns">
<Row>
<Col span={12}></Col>
<Col span={12}></Col>
</Row>
</Variant>
<Variant name="Three columns">
<Row>
<Col span={8}></Col>
<Col span={8}></Col>
<Col span={8}></Col>
</Row>
</Variant>
</Component>
<Component name="Space">
<Variant>
<Space />
</Variant>
<Variant name="Small">
<Space size={"small"} />
</Variant>
<Variant name="Large">
<Space size={"large"} />
</Variant>
</Component>
</Category>
<Category name="Controls">
<Component name="Autocomplete">
<Variant>
<AutoComplete placeholder="input here" />
</Variant>
</Component>
<Component name="Button">
<Variant>
<Button></Button>
</Variant>
<Variant name="Primary">
<Button type="primary" ></Button>
</Variant>
<Variant name="Link">
<Button type="link" ></Button>
</Variant>
<Variant name="Dropdown">
<Dropdown
trigger={['click']}
overlay={<Menu>
<Menu.Item>
</Menu.Item>
<Menu.Item>
</Menu.Item>
<Menu.Item>
</Menu.Item>
</Menu>}
>
<Button></Button>
</Dropdown>
</Variant>
</Component>
<Component name="Checkbox">
<Variant>
<Checkbox />
</Variant>
</Component>
<Component name='Switch'>
<Variant>
<Switch />
</Variant>
</Component>
<Component name='Radio Group'>
<Variant>
<Radio.Group>
<Radio value={1}>A</Radio>
<Radio value={2}>B</Radio>
<Radio value={3}>C</Radio>
<Radio value={4}>D</Radio>
</Radio.Group>
</Variant>
<Variant name = 'Button'>
<Radio.Group>
<Radio.Button value={1}>A</Radio.Button>
<Radio.Button value={2}>B</Radio.Button>
<Radio.Button value={3}>C</Radio.Button>
<Radio.Button value={4}>D</Radio.Button>
</Radio.Group>
</Variant>
</Component>
<Component name="DatePicker">
<Variant>
<DatePicker />
</Variant>
<Variant name="Range">
<DatePicker.RangePicker />
</Variant>
</Component>
<Component name="TimePicker">
<Variant>
<TimePicker />
</Variant>
<Variant name="Range">
<TimePicker.RangePicker />
</Variant>
</Component>
<Component name="Input">
<Variant>
<Input />
</Variant>
<Variant name='Number'>
<InputNumber />
</Variant>
</Component>
<Component name='Select'>
<Variant>
<Select defaultValue="1">
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
<Variant name='Multiple'>
<Select
defaultValue={["1"]}
mode="multiple"
allowClear
>
<Select.Option value="1">1</Select.Option>
<Select.Option value="2">2</Select.Option>
</Select>
</Variant>
</Component>
<Component name="Link">
<Variant>
<Typography.Link href="" target="_blank">
</Typography.Link>
</Variant>
</Component>
<Component name='Slider'>
<Variant>
<Slider defaultValue={30} />
</Variant>
<Variant name = 'Range'>
<Slider range defaultValue={[20, 50]}/>
</Variant>
</Component>
</Category>
<Category name="Data Display">
<Component name="Field">
<Variant>
<Field
entityName={ENTITY_NAME}
disabled={readOnlyMode}
propertyName=''
formItemProps={{
style: { marginBottom: "12px" }
}}
/>
</Variant>
</Component>
<Component name="Card">
<Variant>
<Card />
</Variant>
<Variant name="With Title">
<Card>
<Card title="Card title">
<p>Card content</p>
</Card>
</Card>
</Variant>
<Variant name="My custom card">
<Card>
<Card title="Card title">
<p>Card content</p>
<Avatar />
</Card>
</Card>
</Variant>
</Component>
<Component name="Tabs">
<Variant>
<Tabs defaultActiveKey="1">
<Tabs.TabPane tab="Tab 1" key="1">
Content of Tab Pane 1
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 2" key="2">
Content of Tab Pane 2
</Tabs.TabPane>
<Tabs.TabPane tab="Tab 3" key="3">
Content of Tab Pane 3
</Tabs.TabPane>
</Tabs>
</Variant>
<Variant name = "Tab Pane">
<Tabs.TabPane>
</Tabs.TabPane>
</Variant>
</Component>
<Component name="Collapse">
<Variant>
<Collapse defaultActiveKey='1'>
<Collapse.Panel header="This is panel header 1" key="1">
</Collapse.Panel>
<Collapse.Panel header="This is panel header 2" key="2">
</Collapse.Panel>
<Collapse.Panel header="This is panel header 3" key="3">
</Collapse.Panel>
</Collapse>
</Variant>
</Component>
<Component name="Image">
<Variant>
<Image
width={200}
src=""
/>
</Variant>
</Component>
<Component name="Avatar">
<Variant>
<Avatar icon={<UserOutlined />} />
</Variant>
<Variant name="Image">
<Avatar src="https://joeschmoe.io/api/v1/random" />
</Variant>
</Component>
<Component name="Badge">
<Variant>
<Badge count={1}>
</Badge>
</Variant>
</Component>
<Component name="Statistic">
<Variant>
<Statistic title="Title" value={112893} />
</Variant>
</Component>
<Component name="Alert">
<Variant name="Success">
<Alert message="Text" type="success" />
</Variant>
<Variant name="Info">
<Alert message="Text" type="info" />
</Variant>
<Variant name="Warning">
<Alert message="Text" type="warning" />
</Variant>
<Variant name="Error">
<Alert message="Text" type="error" />
</Variant>
</Component>
<Component name='List'>
<Variant>
<List
bordered
dataSource={[]}
renderItem={item => (
<List.Item>
</List.Item>
)}
/>
</Variant>
</Component>
</Category>
<Category name="Icons">
<Component name="Arrow">
<Variant name = 'Up'>
<ArrowUpOutlined />
</Variant>
<Variant name = 'Down'>
<ArrowDownOutlined />
</Variant>
<Variant name = 'Left'>
<ArrowLeftOutlined />
</Variant>
<Variant name = 'Right'>
<ArrowRightOutlined />
</Variant>
</Component>
<Component name = 'Question'>
<Variant>
<QuestionOutlined />
</Variant>
<Variant name = 'Circle'>
<QuestionCircleOutlined />
</Variant>
</Component>
<Component name = 'Plus'>
<Variant>
<PlusOutlined />
</Variant>
<Variant name = 'Circle'>
<PlusCircleOutlined />
</Variant>
</Component>
<Component name = 'Info'>
<Variant>
<InfoOutlined />
</Variant>
<Variant name = 'Circle'>
<InfoCircleOutlined />
</Variant>
</Component>
<Component name = 'Exclamation'>
<Variant>
<ExclamationOutlined />
</Variant>
<Variant name = 'Circle'>
<ExclamationCircleOutlined />
</Variant>
</Component>
<Component name = 'Close'>
<Variant>
<CloseOutlined />
</Variant>
<Variant name = 'Circle'>
<CloseCircleOutlined />
</Variant>
</Component>
<Component name = 'Check'>
<Variant>
<CheckOutlined />
</Variant>
<Variant name = 'Circle'>
<CheckCircleOutlined />
</Variant>
</Component>
<Component name = 'Edit'>
<Variant>
<EditOutlined />
</Variant>
</Component>
<Component name = 'Copy'>
<Variant>
<CopyOutlined />
</Variant>
</Component>
<Component name = 'Delete'>
<Variant>
<DeleteOutlined />
</Variant>
</Component>
<Component name = 'Bars'>
<Variant>
<BarsOutlined />
</Variant>
</Component>
<Component name = 'Bell'>
<Variant>
<BellOutlined />
</Variant>
</Component>
<Component name = 'Clear'>
<Variant>
<ClearOutlined />
</Variant>
</Component>
<Component name = 'Download'>
<Variant>
<DownloadOutlined />
</Variant>
</Component>
<Component name = 'Upload'>
<Variant>
<UploadOutlined />
</Variant>
</Component>
<Component name = 'Sync'>
<Variant>
<SyncOutlined />
</Variant>
</Component>
<Component name = 'Save'>
<Variant>
<SaveOutlined />
</Variant>
</Component>
<Component name = 'Search'>
<Variant>
<SearchOutlined />
</Variant>
</Component>
<Component name = 'Settings'>
<Variant>
<SettingOutlined />
</Variant>
</Component>
<Component name = 'Paperclip'>
<Variant>
<PaperClipOutlined />
</Variant>
</Component>
<Component name = 'Phone'>
<Variant>
<PhoneOutlined />
</Variant>
</Component>
<Component name = 'Mail'>
<Variant>
<MailOutlined />
</Variant>
</Component>
<Component name = 'Home'>
<Variant>
<HomeOutlined />
</Variant>
</Component>
<Component name = 'Contacts'>
<Variant>
<ContactsOutlined />
</Variant>
</Component>
<Component name = 'User'>
<Variant>
<UserOutlined />
</Variant>
<Variant name = 'Add'>
<UserAddOutlined />
</Variant>
<Variant name = 'Remove'>
<UserDeleteOutlined />
</Variant>
</Component>
<Component name = 'Team'>
<Variant>
<TeamOutlined />
</Variant>
</Component>
</Category>
</Palette>
Example #10
| Source File: VolumeTable.tsx From posthog-foss with MIT License | 4 votes |
|
export function VolumeTable({
type,
data,
}: {
type: EventTableType
data: Array<EventDefinition | PropertyDefinition>
}): JSX.Element {
const [searchTerm, setSearchTerm] = useState(false as string | false)
const [dataWithWarnings, setDataWithWarnings] = useState([] as VolumeTableRecord[])
const { user } = useValues(userLogic)
const { openDrawer } = useActions(definitionDrawerLogic)
const hasTaxonomyFeatures = user?.organization?.available_features?.includes(AvailableFeature.INGESTION_TAXONOMY)
const columns: ColumnsType<VolumeTableRecord> = [
{
title: `${capitalizeFirstLetter(type)} name`,
render: function Render(_, record): JSX.Element {
return (
<span>
<div style={{ display: 'flex', alignItems: 'baseline', paddingBottom: 4 }}>
<span className="ph-no-capture" style={{ paddingRight: 8 }}>
<PropertyKeyInfo
style={hasTaxonomyFeatures ? { fontWeight: 'bold' } : {}}
value={record.eventOrProp.name}
/>
</span>
{hasTaxonomyFeatures ? (
<ObjectTags tags={record.eventOrProp.tags || []} staticOnly />
) : null}
</div>
{hasTaxonomyFeatures &&
(isPosthogEvent(record.eventOrProp.name) ? null : (
<VolumeTableRecordDescription
id={record.eventOrProp.id}
description={record.eventOrProp.description}
type={type}
/>
))}
{record.warnings?.map((warning) => (
<Tooltip
key={warning}
color="orange"
title={
<>
<b>Warning!</b> {warning}
</>
}
>
<WarningOutlined style={{ color: 'var(--warning)', marginLeft: 6 }} />
</Tooltip>
))}
</span>
)
},
sorter: (a, b) => ('' + a.eventOrProp.name).localeCompare(b.eventOrProp.name || ''),
filters: [
{ text: 'Has warnings', value: 'warnings' },
{ text: 'No warnings', value: 'noWarnings' },
],
onFilter: (value, record) => (value === 'warnings' ? !!record.warnings.length : !record.warnings.length),
},
type === 'event' && hasTaxonomyFeatures
? {
title: 'Owner',
render: function Render(_, record): JSX.Element {
const owner = record.eventOrProp?.owner
return isPosthogEvent(record.eventOrProp.name) ? <>-</> : <Owner user={owner} />
},
}
: {},
type === 'event'
? {
title: function VolumeTitle() {
return (
<Tooltip
placement="right"
title="Total number of events over the last 30 days. Can be delayed by up to an hour."
>
30 day volume (delayed by up to an hour)
<InfoCircleOutlined className="info-indicator" />
</Tooltip>
)
},
render: function RenderVolume(_, record) {
return <span className="ph-no-capture">{compactNumber(record.eventOrProp.volume_30_day)}</span>
},
sorter: (a, b) =>
a.eventOrProp.volume_30_day == b.eventOrProp.volume_30_day
? (a.eventOrProp.volume_30_day || -1) - (b.eventOrProp.volume_30_day || -1)
: (a.eventOrProp.volume_30_day || -1) - (b.eventOrProp.volume_30_day || -1),
}
: {},
{
title: function QueriesTitle() {
return (
<Tooltip
placement="right"
title={`Number of queries in PostHog that included a filter on this ${type}`}
>
30 day queries (delayed by up to an hour)
<InfoCircleOutlined className="info-indicator" />
</Tooltip>
)
},
render: function Render(_, item) {
return <span className="ph-no-capture">{compactNumber(item.eventOrProp.query_usage_30_day)}</span>
},
sorter: (a, b) =>
a.eventOrProp.query_usage_30_day == b.eventOrProp.query_usage_30_day
? (a.eventOrProp.query_usage_30_day || -1) - (b.eventOrProp.query_usage_30_day || -1)
: (a.eventOrProp.query_usage_30_day || -1) - (b.eventOrProp.query_usage_30_day || -1),
},
hasTaxonomyFeatures
? {
render: function Render(_, item) {
return (
<>
{isPosthogEvent(item.eventOrProp.name) ? null : (
<Button
type="link"
icon={<ArrowRightOutlined style={{ color: '#5375FF' }} />}
onClick={() => openDrawer(type, item.eventOrProp.id)}
/>
)}
</>
)
},
}
: {},
]
useEffect(() => {
setDataWithWarnings(
data.map((eventOrProp: EventOrPropType): VolumeTableRecord => {
const record = { eventOrProp } as VolumeTableRecord
record.warnings = []
if (eventOrProp.name?.endsWith(' ')) {
record.warnings.push(`This ${type} ends with a space.`)
}
if (eventOrProp.name?.startsWith(' ')) {
record.warnings.push(`This ${type} starts with a space.`)
}
return record
}) || []
)
}, [data])
return (
<>
<Input.Search
allowClear
enterButton
style={{ marginTop: '1.5rem', maxWidth: 400, width: 'initial', flexGrow: 1 }}
onChange={(e) => {
setSearchTerm(e.target.value)
}}
placeholder={`Filter ${type === 'property' ? 'properties' : 'events'}....`}
/>
<br />
<br />
<Table
dataSource={searchTerm ? search(dataWithWarnings, searchTerm) : dataWithWarnings}
columns={columns}
rowKey={(item) => item.eventOrProp.name}
size="small"
style={{ marginBottom: '4rem' }}
pagination={{ pageSize: 100, hideOnSinglePage: true }}
onRow={(record) =>
hasTaxonomyFeatures && !isPosthogEvent(record.eventOrProp.name)
? { onClick: () => openDrawer(type, record.eventOrProp.id), style: { cursor: 'pointer' } }
: {}
}
/>
</>
)
}
Example #11
| Source File: FunnelBarGraph.tsx From posthog-foss with MIT License | 4 votes |
|
export function FunnelBarGraph({ color = 'white' }: { color?: string }): JSX.Element {
const { insightProps } = useValues(insightLogic)
const { dashboardItemId } = insightProps
const logic = funnelLogic(insightProps)
const {
filters,
visibleStepsWithConversionMetrics: steps,
stepReference,
barGraphLayout: layout,
clickhouseFeaturesEnabled,
aggregationTargetLabel,
isModalActive,
} = useValues(logic)
const { openPersonsModalForStep } = useActions(logic)
// If the layout is vertical, we render bars using the table as a legend. See FunnelStepTable
if (layout === FunnelLayout.vertical) {
return <FunnelStepTable />
}
// Everything rendered after is a funnel in top-to-bottom mode.
return (
<div
data-attr="funnel-bar-graph"
className={clsx(
'funnel-bar-graph',
FunnelLayout.horizontal,
color && color !== 'white' && 'colored',
color
)}
style={insightProps.syncWithUrl ? { minHeight: 450 } : {}}
>
{steps.map((step, stepIndex) => {
const basisStep = getReferenceStep(steps, stepReference, stepIndex)
const previousStep = getReferenceStep(steps, FunnelStepReference.previous, stepIndex)
const showLineBefore = stepIndex > 0
const showLineAfter = stepIndex < steps.length - 1
const breakdownMaxIndex = getBreakdownMaxIndex(
Array.isArray(step.nested_breakdown) ? step.nested_breakdown : undefined
)
const breakdownSum =
(Array.isArray(step.nested_breakdown) &&
step.nested_breakdown?.reduce((sum, item) => sum + item.count, 0)) ||
0
const isBreakdown =
Array.isArray(step.nested_breakdown) &&
step.nested_breakdown?.length !== undefined &&
!(step.nested_breakdown.length === 1 && step.nested_breakdown[0].breakdown_value === 'Baseline')
const dropOffCount = step.order > 0 ? steps[stepIndex - 1].count - step.count : 0
return (
<section key={step.order} className="funnel-step">
<div className="funnel-series-container">
<div className={`funnel-series-linebox ${showLineBefore ? 'before' : ''}`} />
{filters.funnel_order_type === StepOrderValue.UNORDERED ? (
<SeriesGlyph variant="funnel-step-glyph">
<IconInfinity style={{ fill: 'var(--primary_alt)', width: 14 }} />
</SeriesGlyph>
) : (
<SeriesGlyph variant="funnel-step-glyph">{humanizeOrder(step.order)}</SeriesGlyph>
)}
<div className={`funnel-series-linebox ${showLineAfter ? 'after' : ''}`} />
</div>
<header>
<div style={{ display: 'flex', maxWidth: '100%', flexGrow: 1 }}>
<div className="funnel-step-title">
{filters.funnel_order_type === StepOrderValue.UNORDERED ? (
<span>Completed {humanizeOrder(step.order)} steps</span>
) : (
<EntityFilterInfo filter={getActionFilterFromFunnelStep(step)} />
)}
</div>
{clickhouseFeaturesEnabled &&
filters.funnel_order_type !== StepOrderValue.UNORDERED &&
stepIndex > 0 &&
step.action_id === steps[stepIndex - 1].action_id && <DuplicateStepIndicator />}
<FunnelStepDropdown index={stepIndex} />
</div>
<div className={`funnel-step-metadata funnel-time-metadata ${FunnelLayout.horizontal}`}>
{step.average_conversion_time && step.average_conversion_time >= 0 + Number.EPSILON ? (
<AverageTimeInspector
onClick={() => {}}
averageTime={step.average_conversion_time}
aggregationTargetLabel={aggregationTargetLabel}
disabled
/>
) : null}
</div>
</header>
<div className="funnel-inner-viz">
<div className={clsx('funnel-bar-wrapper', { breakdown: isBreakdown })}>
{isBreakdown ? (
<>
{step?.nested_breakdown?.map((breakdown, index) => {
const barSizePercentage = breakdown.count / basisStep.count
return (
<Bar
key={`${breakdown.action_id}-${step.breakdown_value}-${index}`}
isBreakdown={true}
breakdownIndex={index}
breakdownMaxIndex={breakdownMaxIndex}
breakdownSumPercentage={
index === breakdownMaxIndex && breakdownSum
? breakdownSum / basisStep.count
: undefined
}
percentage={barSizePercentage}
name={breakdown.name}
onBarClick={() =>
openPersonsModalForStep({
step,
converted: true,
})
}
disabled={!isModalActive}
popoverTitle={
<div style={{ wordWrap: 'break-word' }}>
<PropertyKeyInfo value={step.name} />
{' • '}
{(Array.isArray(breakdown.breakdown)
? breakdown.breakdown.join(', ')
: breakdown.breakdown) || 'Other'}
</div>
}
popoverMetrics={[
{
title: 'Completed step',
value: pluralize(
breakdown.count,
aggregationTargetLabel.singular,
aggregationTargetLabel.plural
),
},
{
title: 'Conversion rate (total)',
value:
formatDisplayPercentage(
breakdown.conversionRates.total
) + '%',
},
{
title: `Conversion rate (from step ${humanizeOrder(
previousStep.order
)})`,
value:
formatDisplayPercentage(
breakdown.conversionRates.fromPrevious
) + '%',
visible: step.order !== 0,
},
{
title: 'Dropped off',
value: pluralize(
breakdown.droppedOffFromPrevious,
aggregationTargetLabel.singular,
aggregationTargetLabel.plural
),
visible:
step.order !== 0 &&
breakdown.droppedOffFromPrevious > 0,
},
{
title: `Dropoff rate (from step ${humanizeOrder(
previousStep.order
)})`,
value:
formatDisplayPercentage(
1 - breakdown.conversionRates.fromPrevious
) + '%',
visible:
step.order !== 0 &&
breakdown.droppedOffFromPrevious > 0,
},
{
title: 'Average time on step',
value: humanFriendlyDuration(
breakdown.average_conversion_time
),
visible: !!breakdown.average_conversion_time,
},
]}
aggregationTargetLabel={aggregationTargetLabel}
/>
)
})}
<div
className="funnel-bar-empty-space"
onClick={() => openPersonsModalForStep({ step, converted: false })} // dropoff value for steps is negative
style={{
flex: `${1 - breakdownSum / basisStep.count} 1 0`,
cursor: `${
clickhouseFeaturesEnabled && !dashboardItemId ? 'pointer' : ''
}`,
}}
/>
</>
) : (
<>
<Bar
percentage={step.conversionRates.fromBasisStep}
name={step.name}
onBarClick={() => openPersonsModalForStep({ step, converted: true })}
disabled={!isModalActive}
popoverTitle={<PropertyKeyInfo value={step.name} />}
popoverMetrics={[
{
title: 'Completed step',
value: pluralize(
step.count,
aggregationTargetLabel.singular,
aggregationTargetLabel.plural
),
},
{
title: 'Conversion rate (total)',
value: formatDisplayPercentage(step.conversionRates.total) + '%',
},
{
title: `Conversion rate (from step ${humanizeOrder(
previousStep.order
)})`,
value:
formatDisplayPercentage(step.conversionRates.fromPrevious) +
'%',
visible: step.order !== 0,
},
{
title: 'Dropped off',
value: pluralize(
step.droppedOffFromPrevious,
aggregationTargetLabel.singular,
aggregationTargetLabel.plural
),
visible: step.order !== 0 && step.droppedOffFromPrevious > 0,
},
{
title: `Dropoff rate (from step ${humanizeOrder(
previousStep.order
)})`,
value:
formatDisplayPercentage(1 - step.conversionRates.fromPrevious) +
'%',
visible: step.order !== 0 && step.droppedOffFromPrevious > 0,
},
{
title: 'Average time on step',
value: humanFriendlyDuration(step.average_conversion_time),
visible: !!step.average_conversion_time,
},
]}
aggregationTargetLabel={aggregationTargetLabel}
/>
<div
className="funnel-bar-empty-space"
onClick={() => openPersonsModalForStep({ step, converted: false })} // dropoff value for steps is negative
style={{
flex: `${1 - step.conversionRates.fromBasisStep} 1 0`,
cursor: `${
clickhouseFeaturesEnabled && !dashboardItemId ? 'pointer' : ''
}`,
}}
/>
</>
)}
</div>
<div className="funnel-conversion-metadata funnel-step-metadata">
<div className="step-stat">
<div className="center-flex">
<ValueInspectorButton
onClick={() => openPersonsModalForStep({ step, converted: true })}
disabled={!isModalActive}
>
<span className="value-inspector-button-icon">
<ArrowRightOutlined style={{ color: 'var(--success)' }} />
</span>
<b>
{humanizeStepCount(step.count)}{' '}
{pluralize(
step.count,
aggregationTargetLabel.singular,
aggregationTargetLabel.plural,
false
)}
</b>
</ValueInspectorButton>
<span className="text-muted-alt">
(
{formatDisplayPercentage(
step.order > 0 ? step.count / steps[stepIndex - 1].count : 1
)}
%)
</span>
</div>
<div className="text-muted-alt conversion-metadata-caption" style={{ flexGrow: 1 }}>
completed step
</div>
</div>
<div
className="step-stat"
style={stepIndex === 0 ? { visibility: 'hidden' } : undefined}
>
<div className="center-flex">
<ValueInspectorButton
onClick={() => openPersonsModalForStep({ step, converted: false })}
disabled={!isModalActive}
>
<span className="value-inspector-button-icon">
<ArrowBottomRightOutlined style={{ color: 'var(--danger)' }} />
</span>
<b>
{humanizeStepCount(dropOffCount)}{' '}
{pluralize(
dropOffCount,
aggregationTargetLabel.singular,
aggregationTargetLabel.plural,
false
)}
</b>
</ValueInspectorButton>
<span className="text-muted-alt">
(
{formatDisplayPercentage(
step.order > 0 ? 1 - step.count / steps[stepIndex - 1].count : 0
)}
%)
</span>
</div>
<div className="text-muted-alt conversion-metadata-caption">dropped off</div>
</div>
</div>
</div>
</section>
)
})}
</div>
)
}
Example #12
| Source File: OnboardingSetup.tsx From posthog-foss with MIT License | 4 votes |
|
export function OnboardingSetup(): JSX.Element {
const {
stepProjectSetup,
stepInstallation,
projectModalShown,
stepVerification,
currentSection,
teamInviteAvailable,
progressPercentage,
slackCalled,
} = useValues(onboardingSetupLogic)
const { switchToNonDemoProject, setProjectModalShown, completeOnboarding, callSlack } =
useActions(onboardingSetupLogic)
const { showInviteModal } = useActions(inviteLogic)
const { currentTeam, currentTeamLoading } = useValues(teamLogic)
const { updateCurrentTeam } = useActions(teamLogic)
const { currentOrganizationLoading } = useValues(organizationLogic)
const UTM_TAGS = 'utm_medium=in-product&utm_campaign=onboarding-setup-2822'
return (
<div className="onboarding-setup">
{currentSection ? (
<>
<Row gutter={16}>
<Col span={18}>
<PageHeader
title="Setup"
caption="Get your PostHog instance up and running with all the bells and whistles"
/>
</Col>
<Col span={6} style={{ display: 'flex', alignItems: 'center' }}>
<Progress percent={progressPercentage} strokeColor="var(--purple)" strokeWidth={16} />
</Col>
</Row>
<Collapse defaultActiveKey={currentSection} expandIconPosition="right" accordion>
<Panel
header={
<PanelHeader
title="Event Ingestion"
caption="First things first, you need to connect PostHog to your website. You’ll be able to add more sources later."
stepNumber={1}
/>
}
key="1"
>
<div className="step-list">
<OnboardingStep
label="Set up project"
icon={<ProjectOutlined />}
title="Step 1"
identifier="set-up-project"
completed={stepProjectSetup}
handleClick={() => setProjectModalShown(true)}
/>
<OnboardingStep
label="Install PostHog"
icon={<CodeOutlined />}
title="Step 2"
identifier="install-posthog"
disabled={!stepProjectSetup}
completed={stepInstallation}
handleClick={() => switchToNonDemoProject('/ingestion')}
/>
<OnboardingStep
label="Verify your events"
icon={<CheckOutlined />}
title="Step 3"
identifier="verify-events"
disabled={!stepProjectSetup || !stepInstallation}
completed={stepVerification}
handleClick={() => switchToNonDemoProject('/ingestion/verify')}
/>
</div>
</Panel>
<Panel
header={
<PanelHeader
title="Configuration"
caption="Tune the settings of PostHog to make sure it works best for you and your team."
stepNumber={2}
/>
}
key="2"
collapsible={currentSection < 2 ? 'disabled' : undefined}
>
<div className="step-list">
<OnboardingStep
title="Enable session recording"
icon={<PlaySquareOutlined />}
identifier="session-recording"
handleClick={() =>
updateCurrentTeam({
session_recording_opt_in: !currentTeam?.session_recording_opt_in,
})
}
caption={
<>
Play user interactions as if you were right there with them.{' '}
<Link
to={`https://posthog.com/docs/features/session-recording?${UTM_TAGS}`}
rel="noopener"
target="_blank"
>
Learn more
</Link>
.
</>
}
customActionElement={
<div style={{ fontWeight: 'bold' }}>
{currentTeam?.session_recording_opt_in ? (
<span style={{ color: 'var(--success)' }}>Enabled</span>
) : (
<span style={{ color: 'var(--danger)' }}>Disabled</span>
)}
<Switch
checked={currentTeam?.session_recording_opt_in}
loading={currentTeamLoading}
style={{ marginLeft: 6 }}
/>
</div>
}
analyticsExtraArgs={{
new_session_recording_enabled: !currentTeam?.session_recording_opt_in,
}}
/>
<OnboardingStep
title="Join us on Slack"
icon={<SlackOutlined />}
identifier="slack"
handleClick={() => {
callSlack()
window.open(`https://posthog.com/slack?s=app&${UTM_TAGS}`, '_blank')
}}
caption="Fastest way to reach the PostHog team and the community."
customActionElement={
<Button type={slackCalled ? 'default' : 'primary'} icon={<SlackOutlined />}>
Join us
</Button>
}
/>
{teamInviteAvailable && (
<OnboardingStep
title="Invite your team members"
icon={<UsergroupAddOutlined />}
identifier="invite-team"
handleClick={showInviteModal}
caption="Spread the knowledge, share insights with everyone in your team."
customActionElement={
<Button type="primary" icon={<PlusOutlined />}>
Invite my team
</Button>
}
/>
)}
</div>
<div className="text-center" style={{ marginTop: 32 }}>
<Button
type="default"
onClick={completeOnboarding}
loading={currentOrganizationLoading}
data-attr="onboarding-setup-complete"
>
Finish setup
</Button>
</div>
</Panel>
</Collapse>
<CreateProjectModal
isVisible={projectModalShown}
onClose={() => setProjectModalShown(false)}
title="Set up your first project"
caption={
<div className="mb">
<div>
Enter a <b>name</b> for your first project
</div>
<div className="text-muted">
It's helpful to separate your different apps in multiple projects. Read more about
our recommendations and{' '}
<Link
to={`https://posthog.com/docs/features/organizations?${UTM_TAGS}`}
rel="noopener"
target="_blank"
>
best practices <IconOpenInNew />
</Link>
</div>
</div>
}
/>
</>
) : (
<div className="already-completed">
<CheckCircleOutlined className="completed-icon" />{' '}
<h2 className="">Your organization is set up!</h2>
<div className="text-muted">
Looks like your organization is good to go. If you still need some help, check out{' '}
<Link
to={`https://posthog.com/docs?${UTM_TAGS}&utm_message=onboarding-completed`}
target="_blank"
>
our docs <IconOpenInNew />
</Link>
</div>
<div style={{ marginTop: 32 }}>
<LinkButton type="primary" to="/" data-attr="onbording-completed-insights">
Go to insights <ArrowRightOutlined />
</LinkButton>
</div>
</div>
)}
</div>
)
}
Example #13
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #14
| Source File: Cases.tsx From XFlow with MIT License | 4 votes |
|
Cases: React.FC<CasesProps> = ({ cases = [], style = {}, className }) => {
let slider: any;
const clickPrevious = () => {
slider.slickPrev();
};
const clickNext = () => {
slider.slickNext();
};
const getCases = () => {
let buttons: any;
if (cases.length > 1) {
buttons = (
<div className={styles.buttons}>
<div className={styles.controlButton} onClick={clickPrevious}>
<ArrowLeftOutlined className={styles.controlButtonIcon} style={{ fontSize: '16px' }} />
</div>
<div className={styles.controlButton} onClick={clickNext} style={{ marginLeft: '-1px' }}>
<ArrowRightOutlined className={styles.controlButtonIcon} style={{ fontSize: '16px' }} />
</div>
</div>
);
}
const children = cases.map(app => {
const linkDiv = (
<div className={styles.detailWrapper} style={{ display: app.link ? 'block' : 'none' }}>
{app.link && app.link.startsWith('http') ? (
<a className={styles.detail} href={app.link} target="_blank" rel="noopener noreferrer">
查看详情
</a>
) : (
<Link className={styles.detail} to={app.link ? app.link : ''}>
查看详情
</Link>
)}
</div>
);
return (
<div className={styles.appWrapper} key={app.title}>
<img className={styles.appTeaser} src={app.image} alt={app.title} />
<div className={styles.appLeft}>
<div className={styles.appContent}>
{/* <img
className={styles.appLogo}
src={app.logo}
alt="logo"
style={{
borderRadius: app.isAppLogo ? '15px' : '0px',
boxShadow: app.isAppLogo ? '0px 12px 24px #CED4D9' : '0px 0px 0px',
}}
/> */}
<p className={styles.appTitle}>{app.title}</p>
<p className={styles.appDescription}>{app.description}</p>
{linkDiv}
</div>
{buttons}
</div>
</div>
);
});
return children;
};
const sliderSettings = {
dots: cases.length > 1,
infinite: true,
slidesToShow: 1,
adaptiveHeight: true,
speed: 500,
cssEase: 'linear',
arrows: false,
autoplay: true,
autoplaySpeed: 3000,
fade: true,
};
return (
<div className={classNames(styles.wrapper, className)} style={style}>
<Slider
{...sliderSettings}
className={styles.slider}
ref={c => {
slider = c;
}}
>
{getCases()}
</Slider>
</div>
);
}
Example #15
| Source File: NavBarMobile.tsx From foodie with MIT License | 4 votes |
|
NavBarMobile: React.FC<IProps> = ({ theme, isAuth, auth, openModal }) => {
const [isOpenSearch, setOpenSearch] = useState(false);
const [isOpenMenu, setOpenMenu] = useState(false);
const { pathname } = useLocation();
const history = useHistory();
const onClickMenuItem = () => {
setOpenMenu(false);
}
const clickSearchItemCallback = (user: IUser) => {
setOpenSearch(false);
history.push(`/user/${user.username}`);
}
return isOpenSearch ? (
<div className="fixed top-0 left-0 flex w-full items-center bg-indigo-700 z-9999 py-2 pr-2 shadow-xl">
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-indigo-500"
onClick={() => setOpenSearch(false)}
>
<ArrowLeftOutlined className="text-white" style={{ fontSize: '18px' }} />
</div>
<SearchInput
clickItemCallback={clickSearchItemCallback}
inputClassName="w-full"
/>
</div>
) : (
<nav className="contain flex justify-between z-9999 align-center w-100 border-b border-transparent bg-white dark:bg-indigo-1000 text-gray-700 h-60px py-2 fixed top-0 left-0 w-full shadow-md laptop:shadow-sm dark:border-gray-800">
<div className="flex items-center space-x-8">
{/* ---- LOGO -------- */}
<Link
to={{
pathname: '/',
state: { from: pathname }
}}
>
<img
src={logo}
alt=""
className="w-24"
style={{ filter: `brightness(${theme === 'dark' ? 3.5 : 1})` }}
/>
</Link>
</div>
{/* ---- NAVICONS FOR MOBILE ---- */}
<div className="flex items-center space-x-4 laptop:hidden">
{isAuth && (
<>
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-indigo-1100"
>
<Messages isAuth={isAuth} />
</div>
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:hover:bg-indigo-1100"
>
<Notification isAuth={isAuth} />
</div>
</>
)}
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
onClick={() => setOpenSearch(true)}
>
<SearchOutlined style={{ fontSize: '20px' }} />
</div>
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
onClick={() => setOpenMenu(true)}
>
<MenuOutlined style={{ fontSize: '20px' }} />
</div>
</div>
{/* ---- NAV DRAWER FOR MOBILE --- */}
<div className={`flex flex-col w-full h-screen fixed top-0 right-0 transition-transform transform ${isOpenMenu ? 'translate-x-0' : 'translate-x-full'} bg-white dark:bg-indigo-1000 laptop:hidden`}>
<div className="flex items-center justify-between px-4">
<div className="flex items-center space-x-4">
<h1 className="dark:text-white">Menu</h1>
<ThemeToggler />
</div>
<div
className="p-2 rounded-full flex items-center justify-center cursor-pointer hover:bg-gray-200 dark:text-white dark:hover:bg-indigo-1100"
onClick={() => setOpenMenu(false)}
>
<CloseOutlined style={{ fontSize: '20px' }} />
</div>
</div>
{isAuth ? (
<ul className="divide-y divide-gray-100 dark:divide-gray-800">
<li className="px-4 py-3 pb-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex font-medium dark:text-indigo-400"
onClick={onClickMenuItem}
to={`/user/${auth.username}`}
>
<Avatar url={auth.profilePicture?.url} size="lg" className="mr-2" />
<div className="flex flex-col">
<span>{auth.username}</span>
<span className="text-gray-400 text-xs">View Profile</span>
</div>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex items-center text-black dark:text-white"
onClick={onClickMenuItem}
to={`/user/${auth.username}/following`}
>
<TeamOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm">Following</h6>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex items-center text-black dark:text-white"
onClick={onClickMenuItem}
to={`/user/${auth.username}/followers`}
>
<TeamOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm">Followers</h6>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex items-center text-black dark:text-white"
onClick={onClickMenuItem}
to={`/user/${auth.username}/bookmarks`}
>
<StarOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm">Bookmarks</h6>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<Link
className="flex items-center text-black dark:text-white"
onClick={onClickMenuItem}
to={SUGGESTED_PEOPLE}
>
<UsergroupAddOutlined className="text-indigo-700 dark:text-indigo-400" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm">Suggested People</h6>
</Link>
</li>
<li className="p-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100">
<div
className="flex items-center text-black dark:text-white"
onClick={() => {
openModal();
setOpenMenu(false);
}}
>
<LogoutOutlined className="text-red-500" style={{ fontSize: '30px', marginRight: '25px' }} />
<h6 className="text-sm text-red-500">Logout</h6>
</div>
</li>
</ul>
) : (
<ul className="divide-y divide-gray-100 dark:divide-gray-800">
<li className="px-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100 flex items-center justify-start">
<ArrowRightOutlined className="dark:text-white" />
<Link
className="p-4 font-medium dark:text-indigo-400 flex-grow"
to={LOGIN}
>
Login
</Link>
</li>
<li className="px-4 cursor-pointer hover:bg-indigo-100 dark:hover:bg-indigo-1100 flex items-center justify-start">
<ArrowRightOutlined className="dark:text-white" />
<Link
className="p-4 font-medium dark:text-indigo-400 flex-grow"
to={REGISTER}
>
Register
</Link>
</li>
</ul>
)}
{/* --- COPYRIGHT -- */}
<span className="text-gray-400 text-xs absolute bottom-8 left-0 right-0 mx-auto text-center">
©Copyright {new Date().getFullYear()} Foodie
</span>
</div>
</nav>
)
}
