Skip to content

Commit 2b40a2c

Browse files
rishabhsharma1997rishabhsharma1997
committed
feat: added catalog card and icons
Signed-off-by: rishabhsharma1997 <[email protected]>
1 parent 7424585 commit 2b40a2c

File tree

20 files changed

+566
-0
lines changed

20 files changed

+566
-0
lines changed

‎src/custom/CatalogCard/CatalogCard.tsx

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
import { styled } from '@mui/material';
2+
import React from 'react';
3+
import {
4+
CloneIcon,
5+
CommunityClassIcon,
6+
DesignIcon,
7+
OfficialClassIcon,
8+
OpenIcon,
9+
ShareIcon
10+
} from '../../icons';
11+
import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon';
12+
import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
13+
import { DownloadIcon } from '../../icons/Download';
14+
import {
15+
DesignCard,
16+
DesignDetailsDiv,
17+
DesignInnerCard,
18+
DesignName,
19+
DesignType,
20+
MetricsContainerFront,
21+
MetricsCount,
22+
MetricsDiv,
23+
StyledClassWrapper,
24+
StyledInnerClassWrapper
25+
} from './style';
26+
27+
export const DesignCardUrl = styled('a')(() => ({
28+
textDecoration: 'none'
29+
}));
30+
31+
type CatalogCardProps = {
32+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
33+
pattern: any;
34+
patternType: string;
35+
url: string;
36+
cardHeight: string;
37+
cardWidth: string;
38+
cardStyles: React.CSSProperties;
39+
type: string;
40+
};
41+
42+
export const ClassToIconMap = {
43+
community: <CommunityClassIcon width="16px" height="12px" />,
44+
official: <OfficialClassIcon width="16px" height="12px" />,
45+
verified: <VerificationClassIcon width="16px" height="12px" />
46+
};
47+
48+
const ClassWrap = ({ catalogClassName }: { catalogClassName: string }) => {
49+
if (!catalogClassName) return <></>;
50+
51+
return (
52+
<StyledClassWrapper>
53+
<StyledInnerClassWrapper catalogClassName={catalogClassName}>
54+
{catalogClassName}
55+
</StyledInnerClassWrapper>
56+
</StyledClassWrapper>
57+
);
58+
};
59+
const CatalogCard: React.FC<CatalogCardProps> = ({
60+
pattern,
61+
patternType,
62+
cardHeight,
63+
cardWidth,
64+
cardStyles,
65+
url
66+
}) => {
67+
const outerStyles = {
68+
height: cardHeight,
69+
width: cardWidth,
70+
...cardStyles
71+
};
72+
return (
73+
<DesignCardUrl href={url} target="_blank" rel="noreferrer">
74+
<DesignCard outerStyles={outerStyles}>
75+
<DesignInnerCard className="innerCard">
76+
<ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
77+
<DesignType>{patternType}</DesignType>
78+
<DesignDetailsDiv>
79+
<DesignName
80+
style={{
81+
margin: '3rem 0 1.59rem 0',
82+
textAlign: 'center'
83+
}}
84+
>
85+
{pattern.name}
86+
</DesignName>
87+
<div
88+
style={{
89+
background: 'rgba(231, 239, 243, 0.40)',
90+
display: 'flex',
91+
alignItems: 'center',
92+
justifyContent: 'center',
93+
padding: '0.5rem',
94+
width: '100%',
95+
borderRadius: '0.5rem'
96+
}}
97+
>
98+
<DesignIcon height={'118'} width={'120'} />
99+
</div>
100+
</DesignDetailsDiv>
101+
<MetricsContainerFront>
102+
<MetricsDiv>
103+
<DownloadIcon width={18} height={18} />
104+
<MetricsCount>{pattern.download_count}</MetricsCount>
105+
</MetricsDiv>
106+
<MetricsDiv>
107+
<CloneIcon width={18} height={18} fill={'#51636B'} />
108+
<MetricsCount>{pattern.clone_count}</MetricsCount>
109+
</MetricsDiv>
110+
<MetricsDiv>
111+
<OpenIcon width={18} height={18} fill={'#51636B'} />
112+
<MetricsCount>{pattern.view_count}</MetricsCount>
113+
</MetricsDiv>
114+
<MetricsDiv>
115+
<DeploymentsIcon width={18} height={18} />
116+
<MetricsCount>{pattern.deployment_count}</MetricsCount>
117+
</MetricsDiv>
118+
<MetricsDiv>
119+
<ShareIcon width={18} height={18} fill={'#51636B'} />
120+
<MetricsCount>{pattern.share_count}</MetricsCount>
121+
</MetricsDiv>
122+
</MetricsContainerFront>
123+
</DesignInnerCard>
124+
</DesignCard>
125+
</DesignCardUrl>
126+
);
127+
};
128+
129+
export default CatalogCard;

‎src/custom/CatalogCard/index.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
import CatalogCard from './CatalogCard';
2+
3+
export { CatalogCard };

‎src/custom/CatalogCard/style.tsx

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
import { styled, Typography } from '@mui/material';
2+
3+
type DesignCardProps = {
4+
outerStyles: React.CSSProperties;
5+
};
6+
type StyledInnerClassWrapperProps = {
7+
catalogClassName: string;
8+
};
9+
export const StyledClassWrapper = styled('div')(() => ({
10+
width: '85px',
11+
height: '88px',
12+
overflow: 'hidden',
13+
position: 'absolute',
14+
top: '-3px',
15+
left: '-3px'
16+
}));
17+
18+
export const StyledInnerClassWrapper = styled('div')<StyledInnerClassWrapperProps>(({
19+
catalogClassName,
20+
theme
21+
}) => {
22+
const mapToColor: Record<string, string> = {
23+
community: theme.palette.icon.secondary,
24+
official: theme.palette.background.cta?.default || '#EBC017',
25+
verified: theme.palette.background.brand?.default || ''
26+
};
27+
return {
28+
font: 'bold 10px sans-serif',
29+
WebkitTransform: 'rotate(-45deg)',
30+
textAlign: 'center',
31+
transform: 'rotate(-45deg)',
32+
position: 'relative',
33+
padding: '4px 0',
34+
top: '15px',
35+
left: '-30px',
36+
width: '120px',
37+
display: 'flex',
38+
flexDirection: 'row',
39+
justifyContent: 'center',
40+
alignItems: 'center',
41+
backgroundColor: mapToColor[catalogClassName],
42+
color: '#fff'
43+
};
44+
});
45+
46+
export const DesignCard = styled('div')<DesignCardProps>(({ outerStyles }) => ({
47+
position: 'relative',
48+
borderRadius: '1rem',
49+
textAlign: 'center',
50+
transformStyle: 'preserve-3d',
51+
transition: 'all .9s ease-out',
52+
marginBottom: '1.25rem',
53+
display: 'inline-flex',
54+
perspective: '1000px',
55+
'&:hover': {
56+
cursor: 'pointer',
57+
transform: 'translateY(-2%)'
58+
},
59+
['@media (max-width:1200px)']: {
60+
height: '18.75rem'
61+
},
62+
...outerStyles
63+
}));
64+
export const DesignInnerCard = styled('div')(({ theme }) => ({
65+
position: 'relative',
66+
width: '100%',
67+
height: '100%',
68+
textAlign: 'center',
69+
transition: 'transform 0.6s',
70+
boxShadow:
71+
theme.palette.mode === 'dark'
72+
? '0 4px 8px 0 rgba(255, 255, 255, 0.1)'
73+
: '0 4px 8px 0 rgba(0,0,0,0.2)',
74+
borderRadius: '0.9375rem'
75+
}));
76+
export const DesignType = styled('span')(({ theme }) => ({
77+
position: 'absolute',
78+
top: '0',
79+
right: '0',
80+
minWidth: '3rem',
81+
padding: '0 0.75rem',
82+
fontSize: '0.875rem',
83+
textTransform: 'capitalize',
84+
background: theme.palette.background.brand?.default,
85+
color: theme.palette.text.inverse,
86+
borderRadius: '0 1rem 0 2rem'
87+
}));
88+
export const MetricsCount = styled('p')(({ theme }) => ({
89+
fontSize: '1rem',
90+
textTransform: 'capitalize',
91+
margin: '0rem',
92+
lineHeight: '1.5',
93+
textAlign: 'center',
94+
color: theme.palette.text.secondary,
95+
fontWeight: '600'
96+
}));
97+
export const DesignName = styled(Typography)(({ theme }) => ({
98+
fontWeight: 'bold',
99+
textTransform: 'capitalize',
100+
color: theme.palette.text.default,
101+
fontSize: '1.125rem',
102+
marginTop: '2rem',
103+
padding: '0rem 1rem', // "0rem 1.5rem"
104+
position: 'relative',
105+
overflow: 'hidden',
106+
whiteSpace: 'nowrap',
107+
textOverflow: 'ellipsis',
108+
// textAlign: "center",
109+
textAlign: 'left',
110+
'& :after': {
111+
content: "''",
112+
textAlign: 'right',
113+
position: 'absolute',
114+
bottom: '0',
115+
right: '0',
116+
width: '70%',
117+
background: 'linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)'
118+
}
119+
}));
120+
export const MetricsContainerFront = styled('div')(({ theme }) => ({
121+
display: 'flex',
122+
justifyContent: 'space-around',
123+
// borderTop: "0.851px solid #C9DBE3",
124+
fontSize: '0.2rem',
125+
color: theme.palette.text.secondary,
126+
// margin: "-0.8rem 0.7rem 0",
127+
padding: '0.9rem 0.1rem',
128+
background: theme.palette.background.secondary,
129+
position: 'absolute',
130+
bottom: '0px',
131+
marginTop: '1.2rem',
132+
borderRadius: '0 0 0.9375rem 0.9375rem',
133+
width: '100%'
134+
}));
135+
export const MetricsDiv = styled('div')(() => ({
136+
display: 'flex',
137+
alignItems: 'center',
138+
gap: '4px',
139+
fontSize: '0.2rem',
140+
color: 'rgba(26, 26, 26, .8)',
141+
margin: '0rem',
142+
padding: '0.1rem'
143+
}));
144+
export const DesignDetailsDiv = styled('div')(() => ({
145+
height: 'max-content',
146+
display: 'flex',
147+
marginTop: '-1rem',
148+
flexDirection: 'column',
149+
padding: '0rem 1rem',
150+
justifyContent: 'start',
151+
alignItems: 'start',
152+
['@media (max-width:1200px)']: {
153+
height: 'max-content'
154+
}
155+
}));
156+
export const CardFront = styled('div')(({ theme }) => ({
157+
boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
158+
background: `linear-gradient(to left bottom, #EBEFF1,#f4f5f7, #f7f7f9, #fff, #fff, #fff,#fff,#fff, #fff, #f7f7f9, #f4f5f7, #EBEFF1)`,
159+
width: '100%',
160+
height: '100%',
161+
WebkitBackfaceVisibility: 'hidden',
162+
borderRadius: '0.9375rem',
163+
backfaceVisibility: 'hidden'
164+
}));

‎src/custom/index.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ import { TransferList } from './TransferModal/TransferList';
3737
import { TransferListProps } from './TransferModal/TransferList/TransferList';
3838
import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
3939

40+
export { CatalogCard } from './CatalogCard';
4041
export { StyledChartDialog } from './ChartDialog';
4142
export { LearningContent } from './LearningContent';
4243
export { SetupPreReq } from './SetupPrerequisite';

‎src/icons/ContentClassIcons/CommunityClassIcon.tsx

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import { FC } from 'react';
2+
import { CustomIconProps } from '../types';
3+
export const CommunityClassIcon: FC<CustomIconProps> = ({
4+
width = '16',
5+
height = '13',
6+
secondaryFill = '#293B43',
7+
primaryFill = '#647176',
8+
style = {}
9+
}) => (
10+
<svg
11+
style={style}
12+
xmlns="http://www.w3.org/2000/svg"
13+
height={height}
14+
viewBox="0 0 16 13"
15+
width={width}
16+
>
17+
<path
18+
d="M12.2766 4.69141C11.656 4.69141 11.0624 4.85321 10.5497 5.12287C10.5446 5.20494 10.5356 5.28627 10.5228 5.36662C10.387 6.2221 10.594 7.73615 11.1773 8.37646C11.4175 8.64006 11.6242 8.93297 11.7909 9.24871H15.7032C15.8651 9.24871 16 9.11388 16 8.95208V8.38579C16 6.36332 14.3271 4.69141 12.2766 4.69141Z"
19+
fill={secondaryFill}
20+
/>
21+
<path
22+
d="M3.72344 4.69141C1.67285 4.69141 0 6.36331 0 8.41275V8.97905C0 9.14084 0.134907 9.27568 0.296796 9.27568H4.23609C4.40826 8.94965 4.62303 8.64795 4.87325 8.37773C5.45802 7.74624 5.64335 6.28753 5.48869 5.44087C5.46973 5.33709 5.45681 5.23097 5.45025 5.12287C4.91062 4.85321 4.34401 4.69141 3.72344 4.69141Z"
23+
fill={secondaryFill}
24+
/>
25+
<path
26+
d="M7.98491 2.99219C6.87867 2.99219 5.98828 3.88207 5.98828 4.98769C5.98828 6.09331 6.87867 6.9832 7.98491 6.9832C9.09115 6.9832 9.98154 6.09331 9.98154 4.98769C9.98154 3.88207 9.09115 2.99219 7.98491 2.99219Z"
27+
fill={primaryFill}
28+
/>
29+
<path
30+
d="M7.98516 7.54688C5.93457 7.54688 4.26172 9.21878 4.26172 11.2682V11.8345C4.26172 11.9963 4.39663 12.1311 4.55851 12.1311H11.4118C11.5737 12.1311 11.7086 11.9963 11.7086 11.8345V11.2682C11.7086 9.19182 10.0357 7.54688 7.98516 7.54688Z"
31+
fill={primaryFill}
32+
/>
33+
<path
34+
d="M12.2779 0.132812C11.1716 0.132812 10.2812 1.0227 10.2812 2.12832C10.2812 3.23393 11.1716 4.12382 12.2779 4.12382C13.3841 4.12382 14.2745 3.23393 14.2745 2.12832C14.2745 1.0227 13.3841 0.132812 12.2779 0.132812Z"
35+
fill={secondaryFill}
36+
/>
37+
<path
38+
d="M3.72319 0.132812C2.61695 0.132812 1.72656 1.0227 1.72656 2.12832C1.72656 3.23393 2.61695 4.12382 3.72319 4.12382C4.82943 4.12382 5.71982 3.23393 5.71982 2.12832C5.71982 1.0227 4.80245 0.132812 3.72319 0.132812Z"
39+
fill={secondaryFill}
40+
/>
41+
</svg>
42+
);
43+
44+
export default CommunityClassIcon;

‎src/icons/ContentClassIcons/OfficialClassIcon.tsx

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { FC } from 'react';
2+
import { IconProps } from '../types';
3+
export const OfficialClassIcon: FC<IconProps> = ({
4+
width = '16',
5+
height = '13',
6+
fill = '#293B43',
7+
style = {}
8+
}) => (
9+
<svg
10+
style={style}
11+
xmlns="http://www.w3.org/2000/svg"
12+
height={height}
13+
viewBox="0 0 12 13"
14+
width={width}
15+
>
16+
<path
17+
fill-rule="evenodd"
18+
clip-rule="evenodd"
19+
d="M1.85613 1.20703L10.1439 1.20703C10.6167 1.20703 11 1.59034 11 2.06316V4.65658C11 7.6542 9.03375 10.2969 6.16254 11.1583C6.05652 11.1901 5.94349 11.1901 5.83746 11.1583C2.96626 10.2969 1 7.6542 1 4.65658V2.06316C1 1.59033 1.3833 1.20703 1.85613 1.20703ZM6.56129 5.43269L6 3.70601L5.43872 5.43269L3.62236 5.43269L5.09182 6.49984L4.53054 8.22651L6 7.15937L7.46947 8.22651L6.90818 6.49984L8.37764 5.43269L6.56129 5.43269Z"
20+
fill={fill}
21+
/>
22+
</svg>
23+
);
24+
25+
export default OfficialClassIcon;

0 commit comments

Comments
 (0)