yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 08:19:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

Finish plugin card integration

Browse Source
This commit is contained in:
Rémi de Juvigny 2022-02-16 13:59:06 +01:00
parent 0bba3f168d
commit 0aeafa8e1a
1 changed files with 57 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
packages/core/admin/admin/src/pages/MarketplacePage/PluginCard/index.js
View File

@ -4,26 +4,70 @@ import styled from 'styled-components';
import { Box } from '@strapi/design-system/Box'; import { Box } from '@strapi/design-system/Box';
import { Stack } from '@strapi/design-system/Stack'; import { Stack } from '@strapi/design-system/Stack';
import { Typography } from '@strapi/design-system/Typography'; import { Typography } from '@strapi/design-system/Typography';
import { Button } from '@strapi/design-system/Button';
import { LinkButton } from '@strapi/design-system/LinkButton';
import { Flex } from '@strapi/design-system/Flex';
import ExternalLink from '@strapi/icons/ExternalLink';
import Duplicate from '@strapi/icons/Duplicate';
const Logo = styled.img` const Wrapper = styled(Box)`
display: block; .logo {
width: 64px; display: block;
height: 64px; width: 64px;
object-fit: contain; height: 64px;
border-radius: 6px; object-fit: contain;
border-radius: 6px;
}
.name {
display: block;
margin-top: ${({ theme }) => theme.spaces[5]};
}
.description {
margin-top: ${({ theme }) => theme.spaces[3]};
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
`; `;
const PluginCard = ({ plugin }) => { const PluginCard = ({ plugin }) => {
const { id, attributes } = plugin; const { id, attributes } = plugin;
return ( return (
<Box padding={5} hasRadius background="neutral0" key={id} shadow="tableShadow"> <Wrapper padding={5} hasRadius background="neutral0" key={id} shadow="tableShadow">
<Stack size={5}> <Flex
<Logo src={attributes.logo.url} alt={`${attributes.name} logo`} /> justifyContent="space-between"
<Typography variant="delta">{attributes.name}</Typography> direction="column"
<Typography variant="omega">{attributes.description}</Typography> alignItems="flex-end"
</Stack> style={{ height: '100%' }}
</Box> >
<div style={{ width: '100%' }}>
<img className="logo" src={attributes.logo.url} alt={`${attributes.name} logo`} />
<Typography variant="delta" className="name">
{attributes.name}
</Typography>
<Typography variant="omega" className="description" textColor="neutral600">
{attributes.description}
</Typography>
</div>
<Stack horizontal size={2} paddingTop={3}>
<LinkButton
size="S"
href={`https://market.strapi.io/plugins/${attributes.slug}`}
endIcon={<ExternalLink />}
variant="tertiary"
>
Learn more
</LinkButton>
<Button size="S" endIcon={<Duplicate />} variant="secondary">
Copy install command
</Button>
</Stack>
</Flex>
</Wrapper>
); );
}; };