generated from RedHatInsights/frontend-starter-app
/
SubscriptionPortfolio.tsx
83 lines (79 loc) · 2.48 KB
/
SubscriptionPortfolio.tsx
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
import React from 'react';
import { Button, Card, Flex, FlexItem } from '@patternfly/react-core';
import './Overview.scss';
import PlusCircleIcon from '@patternfly/react-icons/dist/js/icons/plus-circle-icon';
import RHELIcon from '../../static/images/rhel.svg';
import OpenShiftIcon from '../../static/images/openshift.svg';
import AnsibleIcon from '../../static/images/ansible.svg';
const PortfolioCard = ({
href,
src,
product,
}: {
product: string;
src: string;
href: string;
}) => (
<FlexItem flex={{ default: 'flex_1' }}>
<Card className="subscription-portfolio__card">
<a
className="subscription-portfolio__card-padding"
target="_blank"
href={href}
rel="noreferrer"
>
<Button className="subscription-portfolio__button">
<img className="subscription-portfolio--image-size" src={src}></img>
<span>Red Hat</span>
<br />
<span className="pf-u-pl-md pf-u-pr-md">{product}</span>
</Button>
</a>
</Card>
</FlexItem>
);
const SubscriptionPortfolio = () => {
return (
<Flex
display={{ default: 'inlineFlex' }}
className="subscription-portfolio--flex"
>
<PortfolioCard
href="https://www.redhat.com/en/technologies/linux-platforms/enterprise-linux"
src={RHELIcon}
product="Enterprise Linux"
/>
<PortfolioCard
href="https://www.redhat.com/en/technologies/cloud-computing/openshift"
src={OpenShiftIcon}
product="OpenShift"
/>
<PortfolioCard
href="https://www.redhat.com/en/technologies/management/ansible"
src={AnsibleIcon}
product="Ansible Automation Platform"
/>
<FlexItem
flex={{ default: 'flex_1' }}
className="subscription-card-margin"
>
<Card className="subscription-portfolio__card">
<a
className="subscription-portfolio__card-padding"
target="_blank"
href="https://www.redhat.com/en/technologies/all-products"
rel="noreferrer"
>
<Button className="subscription-portfolio__button">
<PlusCircleIcon className="subscription-portfolio--image-size subscription-portfolio--icon-color" />
<span>View all</span>
<br />
<span className="pf-u-pl-md pf-u-pr-md">Red Hat Products</span>
</Button>
</a>
</Card>
</FlexItem>
</Flex>
);
};
export default SubscriptionPortfolio;