diff --git a/packages/core/admin/admin/src/pages/MarketplacePage/PluginCard/index.js b/packages/core/admin/admin/src/pages/MarketplacePage/PluginCard/index.js index c0a0d1aaba..0e0e7054a6 100644 --- a/packages/core/admin/admin/src/pages/MarketplacePage/PluginCard/index.js +++ b/packages/core/admin/admin/src/pages/MarketplacePage/PluginCard/index.js @@ -4,26 +4,70 @@ import styled from 'styled-components'; import { Box } from '@strapi/design-system/Box'; import { Stack } from '@strapi/design-system/Stack'; 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` - display: block; - width: 64px; - height: 64px; - object-fit: contain; - border-radius: 6px; +const Wrapper = styled(Box)` + .logo { + display: block; + width: 64px; + height: 64px; + 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 { id, attributes } = plugin; return ( - - - - {attributes.name} - {attributes.description} - - + + +
+ {`${attributes.name} + + {attributes.name} + + + {attributes.description} + +
+ + } + variant="tertiary" + > + Learn more + + + +
+
); };