-
-
Notifications
You must be signed in to change notification settings - Fork 7.6k
/
index.js
127 lines (120 loc) 路 4.49 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
import React, { useEffect } from 'react';
import { useIntl } from 'react-intl';
import styled from 'styled-components';
import { Helmet } from 'react-helmet';
import { pxToRem, CheckPagePermissions, useTracking } from '@strapi/helper-plugin';
import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
import { Flex } from '@strapi/design-system/Flex';
import { Box } from '@strapi/design-system/Box';
import { Stack } from '@strapi/design-system/Stack';
import { LinkButton } from '@strapi/design-system/LinkButton';
import { Main } from '@strapi/design-system/Main';
import { Typography } from '@strapi/design-system/Typography';
import ExternalLink from '@strapi/icons/ExternalLink';
import adminPermissions from '../../permissions';
import MarketplacePicture from './assets/marketplace-coming-soon.png';
const CenterTypography = styled(Typography)`
text-align: center;
`;
const Img = styled.img`
width: ${190 / 16}rem;
`;
const StackCentered = styled(Stack)`
align-items: center;
`;
const MarketPlacePage = () => {
const { formatMessage } = useIntl();
const { trackUsage } = useTracking();
useEffect(() => {
trackUsage('didGoToMarketplace');
}, [trackUsage]);
return (
<CheckPagePermissions permissions={adminPermissions.marketplace.main}>
<Layout>
<Main>
<Helmet
title={formatMessage({
id: 'admin.pages.MarketPlacePage.helmet',
defaultMessage: 'Marketplace - Plugins',
})}
/>
<HeaderLayout
title={formatMessage({
id: 'global.marketplace',
defaultMessage: 'Marketplace',
})}
subtitle={formatMessage({
id: 'admin.pages.MarketPlacePage.subtitle',
defaultMessage: 'Get more out of Strapi',
})}
/>
<ContentLayout>
<StackCentered
spacing={0}
hasRadius
background="neutral0"
shadow="tableShadow"
paddingTop={10}
paddingBottom={10}
>
<Box paddingBottom={7}>
<Img
alt={formatMessage({
id: 'admin.pages.MarketPlacePage.illustration',
defaultMessage: 'marketplace illustration',
})}
src={MarketplacePicture}
/>
</Box>
<Typography variant="alpha">
{formatMessage({
id: 'admin.pages.MarketPlacePage.coming-soon.1',
defaultMessage: 'A new way to make Strapi awesome.',
})}
</Typography>
<Typography variant="alpha" textColor="primary700">
{formatMessage({
id: 'admin.pages.MarketPlacePage.published',
defaultMessage: 'Finally here.',
})}
</Typography>
<Flex maxWidth={pxToRem(620)} paddingTop={3}>
<CenterTypography variant="epsilon" textColor="neutral600">
{formatMessage({
id: 'admin.pages.MarketPlacePage.content.subtitle.published',
defaultMessage:
'The web marketplace helps you get the most of Strapi. In addition, we are working hard to offer the best experience to discover and install plugins, directly from the app.',
})}
</CenterTypography>
</Flex>
<Stack paddingTop={6} horizontal spacing={2}>
<LinkButton
href="https://market.strapi.io"
size="L"
variant="primary"
endIcon={<ExternalLink />}
>
{formatMessage({
id: 'admin.pages.MarketPlacePage.submit.market.link',
defaultMessage: 'Visit the web marketplace',
})}
</LinkButton>
<LinkButton
href="https://market.strapi.io/submit-plugin"
size="L"
variant="secondary"
>
{formatMessage({
id: 'admin.pages.MarketPlacePage.submit.plugin.link',
defaultMessage: 'Submit your plugin',
})}
</LinkButton>
</Stack>
</StackCentered>
</ContentLayout>
</Main>
</Layout>
</CheckPagePermissions>
);
};
export default MarketPlacePage;