@ant-design/icons#ProjectOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#ProjectOutlined.
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: minu.tsx From yugong with MIT License | 6 votes |
|
menu: MenuDataItem[] = [
{
path: '/',
name: '首页',
icon: <DashboardOutlined />,
},
{
path: '/project',
name: '创建项目',
icon: <ProjectOutlined />
}
]
Example #2
| Source File: index.tsx From posthog-foss with MIT License | 5 votes |
|
/** Return a simple label component with timezone conversion UI. */
function TZLabelRaw({
time,
showSeconds,
formatString,
}: {
time: string | dayjs.Dayjs
showSeconds?: boolean
formatString?: string
}): JSX.Element {
const parsedTime = dayjs.isDayjs(time) ? time : dayjs(time)
const { currentTeam } = useValues(teamLogic)
const DATE_OUTPUT_FORMAT = !showSeconds ? BASE_OUTPUT_FORMAT : `${BASE_OUTPUT_FORMAT}:ss`
const timeStyle = showSeconds ? { minWidth: 192 } : undefined
const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
const handleVisibleChange = (visible: boolean): void => {
if (visible) {
reportTimezoneComponentViewed('label', currentTeam?.timezone, shortTimeZone())
}
}
const PopoverContent = (
<div className="tz-label-popover">
<TZConversionHeader />
<div className="divider" />
<div className="timezones">
<Row className="timezone">
<Col className="name">
<LaptopOutlined /> {shortTimeZone(undefined, parsedTime.toDate())}
</Col>
<Col className="scope">Your device</Col>
<Col className="time" style={timeStyle}>
{parsedTime.format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
{currentTeam && (
<Row className="timezone">
<Col className="name">
<ProjectOutlined /> {shortTimeZone(currentTeam.timezone, parsedTime.toDate())}
</Col>
<Col className="scope">Project</Col>
<Col className="time" style={timeStyle}>
{parsedTime.tz(currentTeam.timezone).format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
)}
{currentTeam?.timezone !== 'UTC' && (
<Row className="timezone">
<Col className="name">
<GlobalOutlined /> UTC
</Col>
<Col className="scope" />
<Col className="time" style={timeStyle}>
{parsedTime.tz('UTC').format(DATE_OUTPUT_FORMAT)}
</Col>
</Row>
)}
</div>
</div>
)
return (
<Popover content={PopoverContent} onVisibleChange={handleVisibleChange}>
<span className="tz-label">
{formatString ? humanFriendlyDetailedTime(parsedTime, undefined, formatString) : parsedTime.fromNow()}
</span>
</Popover>
)
}
Example #3
| Source File: index.tsx From posthog-foss with MIT License | 5 votes |
|
/** Return an explainer component for analytics visualization pages. */
function TZIndicatorRaw({
style,
placement,
}: {
style?: React.CSSProperties
placement?: TooltipPlacement
}): JSX.Element {
const { currentTeam } = useValues(teamLogic)
const { reportTimezoneComponentViewed } = useActions(eventUsageLogic)
const handleVisibleChange = (visible: boolean): void => {
if (visible) {
reportTimezoneComponentViewed('indicator', currentTeam?.timezone, shortTimeZone())
}
}
const PopoverContent = (
<div className="tz-label-popover">
<TZConversionHeader />
<p style={{ maxWidth: 320 }}>
All graphs are calculated and presented in UTC (GMT timezone).
<br />
Conversion to your local timezones are shown below.
</p>
<div className="divider" />
<div className="timezones">
<Row className="timezone">
<Col className="name">
<LaptopOutlined /> {shortTimeZone(undefined)}
</Col>
<Col className="scope">Your device</Col>
<Col className="time" style={{ minWidth: 100, fontWeight: 'bold' }}>
{humanTzOffset()}
</Col>
</Row>
{currentTeam && (
<Row className="timezone">
<Col className="name">
<ProjectOutlined /> {shortTimeZone(currentTeam.timezone)}
</Col>
<Col className="scope">Project</Col>
<Col className="time" style={{ minWidth: 100, fontWeight: 'bold' }}>
{humanTzOffset(currentTeam.timezone)}
</Col>
</Row>
)}
</div>
</div>
)
return (
<Popover content={PopoverContent} onVisibleChange={handleVisibleChange} placement={placement}>
<span className="tz-indicator" style={style}>
<GlobalOutlined /> UTC
</span>
</Popover>
)
}
Example #4
| Source File: AnnotationMarker.tsx From posthog-foss with MIT License | 4 votes |
|
export function AnnotationMarker({
elementId,
label,
annotations = [],
left,
top,
onCreate,
onDelete,
onClick,
size = 25,
color,
accessoryColor,
insightId,
currentDateMarker,
onClose,
dynamic,
onCreateAnnotation,
graphColor,
index,
getPopupContainer,
}: AnnotationMarkerProps): JSX.Element | null {
const popupRef = useRef<HTMLDivElement | null>(null)
const [focused, setFocused] = useState(false)
const [textInput, setTextInput] = useState('')
const [applyAll, setApplyAll] = useState(true)
const [textAreaVisible, setTextAreaVisible] = useState(false)
const [hovered, setHovered] = useState(false)
const { reportAnnotationViewed } = useActions(eventUsageLogic)
const visible = focused || (!dynamic && hovered)
useEffect(() => {
if (visible) {
reportAnnotationViewed(annotations)
} else {
reportAnnotationViewed(null)
/* We report a null value to cancel (if applicable) the report because the annotation was closed */
}
}, [visible])
const { user } = useValues(userLogic)
const { currentTeam } = useValues(teamLogic)
const { currentOrganization } = useValues(organizationLogic)
const { diffType, groupedAnnotations } = useValues(annotationsLogic({ insightId }))
function closePopup(): void {
setFocused(false)
onClose?.()
}
useEscapeKey(closePopup, [focused])
const _color = color || 'var(--primary)'
const _accessoryColor = accessoryColor || 'white'
function deselect(e: MouseEvent): void {
if (popupRef.current && coordinateContains(e, popupRef.current.getBoundingClientRect())) {
return
}
closePopup()
}
useEffect(() => {
document.addEventListener('mousedown', deselect)
return () => {
document.removeEventListener('mousedown', deselect)
}
}, [])
if (
dynamic &&
Object.keys(groupedAnnotations)
.map((key) => dayjs(key))
.some((marker) => marker.isSame(dayjs(currentDateMarker).startOf(diffType as dayjs.OpUnitType)))
) {
return null
}
return (
<Popover
trigger="click"
visible={visible}
defaultVisible={false}
getPopupContainer={() => (getPopupContainer ? getPopupContainer() : document.body)}
content={
dynamic ? (
<div ref={popupRef}>
<div style={{ padding: '12px 16px' }}>
<span style={{ marginBottom: 12 }}>{dayjs(currentDateMarker).format('MMMM Do YYYY')}</span>
<TextArea
maxLength={300}
style={{ marginBottom: 12 }}
rows={4}
value={textInput}
onChange={(e) => setTextInput(e.target.value)}
autoFocus
/>
<Checkbox
checked={applyAll}
onChange={(e) => {
setApplyAll(e.target.checked)
}}
>
Create for all charts
</Checkbox>
<Row justify="end">
<Button
style={{ marginRight: 10 }}
onClick={() => {
closePopup()
setTextInput('')
}}
>
Cancel
</Button>
<Button
type="primary"
onClick={() => {
onCreateAnnotation && onCreateAnnotation(textInput, applyAll)
closePopup()
setTextInput('')
}}
>
Add
</Button>
</Row>
</div>
</div>
) : (
<div ref={popupRef} style={{ minWidth: 300 }}>
<div style={{ overflowY: 'auto', maxHeight: '80vh', padding: '12px 16px 0 16px' }}>
{[...annotations]
.sort(
(annotationA, annotationB) =>
dayjs(annotationA.created_at).unix() - dayjs(annotationB.created_at).unix()
)
.map((data) => (
<div key={data.id} style={{ marginBottom: 25 }}>
<Row justify="space-between" align="middle">
<div>
<b style={{ marginRight: 5 }}>
{data.created_by &&
(data.created_by.first_name || data.created_by.email)}
</b>
<i style={{ color: 'gray', marginRight: 6 }}>
{humanFriendlyDetailedTime(data.created_at)}
</i>
{data.scope === AnnotationScope.Project ? (
<Tooltip
title={`This annotation is shown on all charts in project ${currentTeam?.name}`}
>
<ProjectOutlined />
</Tooltip>
) : data.scope === AnnotationScope.Organization ? (
<Tooltip
title={`This annotation is shown on all charts in organization ${currentOrganization?.name}`}
>
<DeploymentUnitOutlined />
</Tooltip>
) : null}
</div>
{(!data.created_by || data.created_by.uuid === user?.uuid) && (
<DeleteOutlined
className="button-border clickable text-danger"
onClick={() => onDelete?.(data)}
/>
)}
</Row>
<span>{data.content}</span>
</div>
))}
</div>
<div style={{ padding: '12px 16px', borderTop: '1px solid #f0f0f0' }}>
{textAreaVisible ? (
<>
<TextArea
maxLength={300}
style={{ marginBottom: 12 }}
rows={4}
value={textInput}
onChange={(e) => setTextInput(e.target.value)}
autoFocus
/>
<Checkbox
checked={applyAll}
onChange={(e) => {
setApplyAll(e.target.checked)
}}
>
Create for all charts
</Checkbox>
<Row justify="end">
<Button style={{ marginRight: 10 }} onClick={() => setTextAreaVisible(false)}>
Cancel
</Button>
<Button
type="primary"
onClick={() => {
onCreate && onCreate(textInput, applyAll)
setTextInput('')
setTextAreaVisible(false)
}}
>
Add
</Button>
</Row>
</>
) : (
<Row justify="end">
<Button
type="primary"
onClick={() => {
setTextAreaVisible(true)
}}
>
Add Note
</Button>
</Row>
)}
</div>
</div>
)
}
title={
<Row justify="space-between" align="middle" style={{ lineHeight: '30px' }}>
{label}
{focused && (
<CloseOutlined
className="button-border clickable"
onClick={() => {
setFocused(false)
onClose?.()
}}
/>
)}
</Row>
}
>
<div
style={{
position: 'absolute',
left: left,
top: top,
width: size,
height: size,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
backgroundColor:
focused || dynamic || hovered || elementId === currentDateMarker
? _color
: (graphColor ? dashboardColors[graphColor] : null) || 'white',
borderRadius: 5,
cursor: 'pointer',
border: dynamic ? undefined : '1px solid ' + _color,
zIndex:
dynamic || hovered || elementId === currentDateMarker ? styles.zGraphAnnotationPrompt : index,
boxShadow: dynamic ? '0 0 5px 4px rgba(0, 0, 0, 0.2)' : undefined,
}}
onClick={() => {
onClick?.()
setFocused(true)
}}
onMouseOver={() => setHovered(true)}
onMouseLeave={() => setHovered(false)}
>
{(annotations?.length || 0) > 0 ? (
<span
style={{
color: focused || hovered || elementId === currentDateMarker ? _accessoryColor : _color,
fontSize: 12,
}}
>
{annotations.length}
</span>
) : (
<PlusOutlined style={{ color: _accessoryColor }} />
)}
</div>
</Popover>
)
}
Example #5
| Source File: commandPaletteLogic.ts From posthog-foss with MIT License | 4 votes |
|
commandPaletteLogic = kea<
commandPaletteLogicType<
Command,
CommandFlow,
CommandRegistrations,
CommandResult,
CommandResultDisplayable,
RegExpCommandPairs
>
>({
path: ['lib', 'components', 'CommandPalette', 'commandPaletteLogic'],
connect: {
actions: [personalAPIKeysLogic, ['createKey']],
values: [teamLogic, ['currentTeam'], userLogic, ['user']],
logic: [preflightLogic], // used in afterMount, which does not auto-connect
},
actions: {
hidePalette: true,
showPalette: true,
togglePalette: true,
setInput: (input: string) => ({ input }),
onArrowUp: true,
onArrowDown: (maxIndex: number) => ({ maxIndex }),
onMouseEnterResult: (index: number) => ({ index }),
onMouseLeaveResult: true,
executeResult: (result: CommandResult) => ({ result }),
activateFlow: (flow: CommandFlow | null) => ({ flow }),
backFlow: true,
registerCommand: (command: Command) => ({ command }),
deregisterCommand: (commandKey: string) => ({ commandKey }),
setCustomCommand: (commandKey: string) => ({ commandKey }),
deregisterScope: (scope: string) => ({ scope }),
},
reducers: {
isPaletteShown: [
false,
{
hidePalette: () => false,
showPalette: () => true,
togglePalette: (previousState) => !previousState,
},
],
keyboardResultIndex: [
0,
{
setInput: () => 0,
executeResult: () => 0,
activateFlow: () => 0,
backFlow: () => 0,
onArrowUp: (previousIndex) => (previousIndex > 0 ? previousIndex - 1 : 0),
onArrowDown: (previousIndex, { maxIndex }) => (previousIndex < maxIndex ? previousIndex + 1 : maxIndex),
},
],
hoverResultIndex: [
null as number | null,
{
activateFlow: () => null,
backFlow: () => null,
onMouseEnterResult: (_, { index }) => index,
onMouseLeaveResult: () => null,
onArrowUp: () => null,
onArrowDown: () => null,
},
],
input: [
'',
{
setInput: (_, { input }) => input,
activateFlow: () => '',
backFlow: () => '',
executeResult: () => '',
},
],
activeFlow: [
null as CommandFlow | null,
{
activateFlow: (currentFlow, { flow }) =>
flow ? { ...flow, scope: flow.scope ?? currentFlow?.scope, previousFlow: currentFlow } : null,
backFlow: (currentFlow) => currentFlow?.previousFlow ?? null,
},
],
rawCommandRegistrations: [
{} as CommandRegistrations,
{
registerCommand: (commands, { command }) => {
return { ...commands, [command.key]: command }
},
deregisterCommand: (commands, { commandKey }) => {
const { [commandKey]: _, ...cleanedCommands } = commands // eslint-disable-line
return cleanedCommands
},
},
],
},
listeners: ({ actions, values }) => ({
showPalette: () => {
posthog.capture('palette shown', { isMobile: isMobile() })
},
togglePalette: () => {
if (values.isPaletteShown) {
posthog.capture('palette shown', { isMobile: isMobile() })
}
},
executeResult: ({ result }: { result: CommandResult }) => {
if (result.executor === true) {
actions.activateFlow(null)
actions.hidePalette()
} else {
const possibleFlow = result.executor?.() || null
actions.activateFlow(possibleFlow)
if (!possibleFlow) {
actions.hidePalette()
}
}
// Capture command execution, without useless data
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { icon, index, ...cleanedResult }: Record<string, any> = result
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { resolver, ...cleanedCommand } = cleanedResult.source
cleanedResult.source = cleanedCommand
cleanedResult.isMobile = isMobile()
posthog.capture('palette command executed', cleanedResult)
},
deregisterScope: ({ scope }) => {
for (const command of Object.values(values.commandRegistrations)) {
if (command.scope === scope) {
actions.deregisterCommand(command.key)
}
}
},
setInput: async ({ input }, breakpoint) => {
await breakpoint(300)
if (input.length > 8) {
const response = await api.get('api/person/?key_identifier=' + encodeURIComponent(input))
const person = response.results[0]
if (person) {
actions.registerCommand({
key: `person-${person.distinct_ids[0]}`,
resolver: [
{
icon: UserOutlined,
display: `View person ${input}`,
executor: () => {
const { push } = router.actions
push(urls.person(person.distinct_ids[0]))
},
},
],
scope: GLOBAL_COMMAND_SCOPE,
})
}
}
},
}),
selectors: {
isSqueak: [
(selectors) => [selectors.input],
(input: string) => {
return input.trim().toLowerCase() === 'squeak'
},
],
activeResultIndex: [
(selectors) => [selectors.keyboardResultIndex, selectors.hoverResultIndex],
(keyboardResultIndex: number, hoverResultIndex: number | null) => {
return hoverResultIndex ?? keyboardResultIndex
},
],
commandRegistrations: [
(selectors) => [
selectors.rawCommandRegistrations,
dashboardsModel.selectors.nameSortedDashboards,
teamLogic.selectors.currentTeam,
],
(rawCommandRegistrations: CommandRegistrations, dashboards: DashboardType[]): CommandRegistrations => ({
...rawCommandRegistrations,
custom_dashboards: {
key: 'custom_dashboards',
resolver: dashboards.map((dashboard: DashboardType) => ({
key: `dashboard_${dashboard.id}`,
icon: LineChartOutlined,
display: `Go to Dashboard: ${dashboard.name}`,
executor: () => {
const { push } = router.actions
push(urls.dashboard(dashboard.id))
},
})),
scope: GLOBAL_COMMAND_SCOPE,
},
}),
],
regexpCommandPairs: [
(selectors) => [selectors.commandRegistrations],
(commandRegistrations: CommandRegistrations) => {
const array: RegExpCommandPairs = []
for (const command of Object.values(commandRegistrations)) {
if (command.prefixes) {
array.push([new RegExp(`^\\s*(${command.prefixes.join('|')})(?:\\s+(.*)|$)`, 'i'), command])
} else {
array.push([null, command])
}
}
return array
},
],
commandSearchResults: [
(selectors) => [
selectors.isPaletteShown,
selectors.regexpCommandPairs,
selectors.input,
selectors.activeFlow,
selectors.isSqueak,
],
(
isPaletteShown: boolean,
regexpCommandPairs: RegExpCommandPairs,
argument: string,
activeFlow: CommandFlow | null,
isSqueak: boolean
) => {
if (!isPaletteShown || isSqueak) {
return []
}
if (activeFlow) {
return resolveCommand(activeFlow, argument)
}
let directResults: CommandResult[] = []
let prefixedResults: CommandResult[] = []
for (const [regexp, command] of regexpCommandPairs) {
if (regexp) {
const match = argument.match(regexp)
if (match && match[1]) {
prefixedResults = [...prefixedResults, ...resolveCommand(command, match[2], match[1])]
}
}
directResults = [...directResults, ...resolveCommand(command, argument)]
}
const allResults = directResults.concat(prefixedResults)
let fusableResults: CommandResult[] = []
let guaranteedResults: CommandResult[] = []
for (const result of allResults) {
if (result.guarantee) {
guaranteedResults.push(result)
} else {
fusableResults.push(result)
}
}
fusableResults = uniqueBy(fusableResults, (result) => result.display)
guaranteedResults = uniqueBy(guaranteedResults, (result) => result.display)
const fusedResults = argument
? new Fuse(fusableResults, {
keys: ['display', 'synonyms'],
})
.search(argument)
.slice(0, RESULTS_MAX)
.map((result) => result.item)
: sample(fusableResults, RESULTS_MAX - guaranteedResults.length)
return guaranteedResults.concat(fusedResults)
},
],
commandSearchResultsGrouped: [
(selectors) => [selectors.commandSearchResults, selectors.activeFlow],
(commandSearchResults: CommandResult[], activeFlow: CommandFlow | null) => {
const resultsGrouped: {
[scope: string]: CommandResult[]
} = {}
if (activeFlow) {
resultsGrouped[activeFlow.scope ?? '?'] = []
}
for (const result of commandSearchResults) {
const scope: string = result.source.scope ?? '?'
if (!(scope in resultsGrouped)) {
resultsGrouped[scope] = []
} // Ensure there's an array to push to
resultsGrouped[scope].push({ ...result })
}
let rollingGroupIndex = 0
let rollingResultIndex = 0
const resultsGroupedInOrder: [string, CommandResultDisplayable[]][] = []
for (const [group, results] of Object.entries(resultsGrouped)) {
resultsGroupedInOrder.push([group, []])
for (const result of results) {
resultsGroupedInOrder[rollingGroupIndex][1].push({ ...result, index: rollingResultIndex++ })
}
rollingGroupIndex++
}
return resultsGroupedInOrder
},
],
},
events: ({ actions }) => ({
afterMount: () => {
const { push } = router.actions
const goTo: Command = {
key: 'go-to',
scope: GLOBAL_COMMAND_SCOPE,
prefixes: ['open', 'visit'],
resolver: [
{
icon: FundOutlined,
display: 'Go to Dashboards',
executor: () => {
push(urls.dashboards())
},
},
{
icon: RiseOutlined,
display: 'Go to Insights',
executor: () => {
push(urls.savedInsights())
},
},
{
icon: RiseOutlined,
display: 'Go to Trends',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.TRENDS }))
},
},
{
icon: FunnelPlotOutlined,
display: 'Go to Funnels',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.FUNNELS }))
},
},
{
icon: GatewayOutlined,
display: 'Go to Retention',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.RETENTION }))
},
},
{
icon: InteractionOutlined,
display: 'Go to Paths',
executor: () => {
// TODO: Don't reset insight on change
push(urls.insightNew({ insight: InsightType.PATHS }))
},
},
{
icon: ContainerOutlined,
display: 'Go to Events',
executor: () => {
push(urls.events())
},
},
{
icon: AimOutlined,
display: 'Go to Actions',
executor: () => {
push(urls.actions())
},
},
{
icon: UserOutlined,
display: 'Go to Persons',
synonyms: ['people'],
executor: () => {
push(urls.persons())
},
},
{
icon: UsergroupAddOutlined,
display: 'Go to Cohorts',
executor: () => {
push(urls.cohorts())
},
},
{
icon: FlagOutlined,
display: 'Go to Feature Flags',
synonyms: ['feature flags', 'a/b tests'],
executor: () => {
push(urls.featureFlags())
},
},
{
icon: MessageOutlined,
display: 'Go to Annotations',
executor: () => {
push(urls.annotations())
},
},
{
icon: TeamOutlined,
display: 'Go to Team members',
synonyms: ['organization', 'members', 'invites', 'teammates'],
executor: () => {
push(urls.organizationSettings())
},
},
{
icon: ProjectOutlined,
display: 'Go to Project settings',
executor: () => {
push(urls.projectSettings())
},
},
{
icon: SmileOutlined,
display: 'Go to My settings',
synonyms: ['account'],
executor: () => {
push(urls.mySettings())
},
},
{
icon: ApiOutlined,
display: 'Go to Plugins',
synonyms: ['integrations'],
executor: () => {
push(urls.plugins())
},
},
{
icon: DatabaseOutlined,
display: 'Go to System status page',
synonyms: ['redis', 'celery', 'django', 'postgres', 'backend', 'service', 'online'],
executor: () => {
push(urls.systemStatus())
},
},
{
icon: PlusOutlined,
display: 'Create action',
executor: () => {
push(urls.createAction())
},
},
{
icon: LogoutOutlined,
display: 'Log out',
executor: () => {
userLogic.actions.logout()
},
},
],
}
const debugClickhouseQueries: Command = {
key: 'debug-clickhouse-queries',
scope: GLOBAL_COMMAND_SCOPE,
resolver:
userLogic.values.user?.is_staff ||
userLogic.values.user?.is_impersonated ||
preflightLogic.values.preflight?.is_debug ||
preflightLogic.values.preflight?.instance_preferences?.debug_queries
? {
icon: PlusOutlined,
display: 'Debug queries (ClickHouse)',
executor: () => {
debugCHQueries()
},
}
: [],
}
const calculator: Command = {
key: 'calculator',
scope: GLOBAL_COMMAND_SCOPE,
resolver: (argument) => {
// don't try evaluating if there's no argument or if it's a plain number already
if (!argument || !isNaN(+argument)) {
return null
}
try {
const result = +Parser.evaluate(argument)
return isNaN(result)
? null
: {
icon: CalculatorOutlined,
display: `= ${result}`,
guarantee: true,
executor: () => {
copyToClipboard(result.toString(), 'calculation result')
},
}
} catch {
return null
}
},
}
const openUrls: Command = {
key: 'open-urls',
scope: GLOBAL_COMMAND_SCOPE,
prefixes: ['open', 'visit'],
resolver: (argument) => {
const results: CommandResultTemplate[] = (teamLogic.values.currentTeam?.app_urls ?? []).map(
(url: string) => ({
icon: LinkOutlined,
display: `Open ${url}`,
synonyms: [`Visit ${url}`],
executor: () => {
open(url)
},
})
)
if (argument && isURL(argument)) {
results.push({
icon: LinkOutlined,
display: `Open ${argument}`,
synonyms: [`Visit ${argument}`],
executor: () => {
open(argument)
},
})
}
results.push({
icon: LinkOutlined,
display: 'Open PostHog Docs',
synonyms: ['technical documentation'],
executor: () => {
open('https://posthog.com/docs')
},
})
return results
},
}
const createPersonalApiKey: Command = {
key: 'create-personal-api-key',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: KeyOutlined,
display: 'Create Personal API Key',
executor: () => ({
instruction: 'Give your key a label',
icon: TagOutlined,
scope: 'Creating Personal API Key',
resolver: (argument) => {
if (argument?.length) {
return {
icon: KeyOutlined,
display: `Create Key "${argument}"`,
executor: () => {
personalAPIKeysLogic.actions.createKey(argument)
push(urls.mySettings(), {}, 'personal-api-keys')
},
}
}
return null
},
}),
},
}
const createDashboard: Command = {
key: 'create-dashboard',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: FundOutlined,
display: 'Create Dashboard',
executor: () => ({
instruction: 'Name your new dashboard',
icon: TagOutlined,
scope: 'Creating Dashboard',
resolver: (argument) => {
if (argument?.length) {
return {
icon: FundOutlined,
display: `Create Dashboard "${argument}"`,
executor: () => {
dashboardsModel.actions.addDashboard({ name: argument, show: true })
},
}
}
return null
},
}),
},
}
const shareFeedback: Command = {
key: 'share-feedback',
scope: GLOBAL_COMMAND_SCOPE,
resolver: {
icon: CommentOutlined,
display: 'Share Feedback',
synonyms: ['send opinion', 'ask question', 'message posthog', 'github issue'],
executor: () => ({
scope: 'Sharing Feedback',
resolver: [
{
display: 'Send Message Directly to PostHog',
icon: CommentOutlined,
executor: () => ({
instruction: "What's on your mind?",
icon: CommentOutlined,
resolver: (argument) => ({
icon: SendOutlined,
display: 'Send',
executor: !argument?.length
? undefined
: () => {
posthog.capture('palette feedback', { message: argument })
return {
resolver: {
icon: CheckOutlined,
display: 'Message Sent!',
executor: true,
},
}
},
}),
}),
},
{
icon: VideoCameraOutlined,
display: 'Schedule Quick Call',
executor: () => {
open('https://calendly.com/posthog-feedback')
},
},
{
icon: ExclamationCircleOutlined,
display: 'Create GitHub Issue',
executor: () => {
open('https://github.com/PostHog/posthog/issues/new/choose')
},
},
],
}),
},
}
actions.registerCommand(goTo)
actions.registerCommand(openUrls)
actions.registerCommand(debugClickhouseQueries)
actions.registerCommand(calculator)
actions.registerCommand(createPersonalApiKey)
actions.registerCommand(createDashboard)
actions.registerCommand(shareFeedback)
},
beforeUnmount: () => {
actions.deregisterCommand('go-to')
actions.deregisterCommand('open-urls')
actions.deregisterCommand('debug-clickhouse-queries')
actions.deregisterCommand('calculator')
actions.deregisterCommand('create-personal-api-key')
actions.deregisterCommand('create-dashboard')
actions.deregisterCommand('share-feedback')
},
}),
})
Example #6
| Source File: index.tsx From posthog-foss with MIT License | 4 votes |
|
function CreateAnnotationModal(props: CreateAnnotationModalProps): JSX.Element {
const [scope, setScope] = useState<AnnotationScope>(AnnotationScope.Project)
const [textInput, setTextInput] = useState('')
const [modalMode, setModalMode] = useState<ModalMode>(ModalMode.CREATE)
const [selectedDate, setDate] = useState<dayjs.Dayjs>(dayjs())
useEffect(() => {
if (props.annotation) {
setModalMode(ModalMode.EDIT)
setTextInput(props.annotation.content)
} else {
setModalMode(ModalMode.CREATE)
setTextInput('')
}
}, [props.annotation])
const _onSubmit = (input: string, date: dayjs.Dayjs): void => {
props.onSubmit(input, date)
// Reset input
setTextInput('')
setDate(dayjs())
setScope(AnnotationScope.Project)
}
return (
<Modal
footer={[
<Button key="create-annotation-cancel" onClick={(): void => props.onCancel()}>
Cancel
</Button>,
<Button
type="primary"
key="create-annotation-submit"
data-attr="create-annotation-submit"
onClick={(): void => {
_onSubmit(textInput, selectedDate)
}}
>
{modalMode === ModalMode.CREATE ? 'Submit' : 'Update'}
</Button>,
]}
closable={false}
visible={props.visible}
onCancel={props.onCancel}
title={modalMode === ModalMode.CREATE ? 'Create annotation' : 'Edit ennotation'}
>
{modalMode === ModalMode.CREATE ? (
<span>
This annotation will appear on all
<Dropdown
overlay={
<Menu activeKey={scope} onSelect={(e) => setScope(e.key as AnnotationScope)}>
<Menu.Item key={AnnotationScope.Project} icon={<ProjectOutlined />}>
Project
</Menu.Item>
<Menu.Item key={AnnotationScope.Organization} icon={<DeploymentUnitOutlined />}>
Organization
</Menu.Item>
</Menu>
}
>
<Button style={{ marginLeft: 8, marginRight: 8 }}>
{annotationScopeToName.get(scope)} <DownOutlined />
</Button>
</Dropdown>{' '}
charts
</span>
) : (
<Row justify="space-between">
<span>Change existing annotation text</span>
{!props.annotation?.deleted ? (
<DeleteOutlined
className="text-danger"
onClick={(): void => {
props.onDelete()
}}
/>
) : (
<RedoOutlined
className="button-border clickable"
onClick={(): void => {
props.onRestore()
}}
/>
)}
</Row>
)}
<br />
{modalMode === ModalMode.CREATE && (
<div>
Date:
<DatePicker
style={{ marginTop: 16, marginLeft: 8, marginBottom: 16 }}
getPopupContainer={(trigger): HTMLElement => trigger.parentElement as HTMLElement}
value={selectedDate}
onChange={(date): void => setDate(date as dayjs.Dayjs)}
allowClear={false}
/>
</div>
)}
<TextArea
data-attr="create-annotation-input"
maxLength={300}
style={{ marginBottom: 12, marginTop: 5 }}
rows={4}
value={textInput}
onChange={(e): void => setTextInput(e.target.value)}
/>
</Modal>
)
}
Example #7
| 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 #8
| 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>
);
}
