Skip to content

Commit 6a59994

Browse files
captain-Akshaycaptain-Akshay
authored
Merge pull request #664 from rishabhsharma1997/master
feat: added catalog card and icons
2 parents 7424585 + e59bacf commit 6a59994

File tree

20 files changed

+545
-0
lines changed

20 files changed

+545
-0
lines changed

‎src/custom/CatalogCard/CatalogCard.tsx

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
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+
ImageWrapper,
21+
MetricsContainerFront,
22+
MetricsCount,
23+
MetricsDiv,
24+
StyledClassWrapper,
25+
StyledInnerClassWrapper
26+
} from './style';
27+
28+
export const DesignCardUrl = styled('a')(() => ({
29+
textDecoration: 'none'
30+
}));
31+
32+
type CatalogCardProps = {
33+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
34+
pattern: any;
35+
patternType: string;
36+
cardLink: string;
37+
cardHeight: string;
38+
cardWidth: string;
39+
cardStyles: React.CSSProperties;
40+
type: string;
41+
};
42+
43+
export const ClassToIconMap = {
44+
community: <CommunityClassIcon width="16px" height="12px" />,
45+
official: <OfficialClassIcon width="16px" height="12px" />,
46+
verified: <VerificationClassIcon width="16px" height="12px" />
47+
};
48+
49+
const ClassWrap = ({ catalogClassName }: { catalogClassName: string }) => {
50+
if (!catalogClassName) return <></>;
51+
52+
return (
53+
<StyledClassWrapper>
54+
<StyledInnerClassWrapper catalogClassName={catalogClassName}>
55+
{catalogClassName}
56+
</StyledInnerClassWrapper>
57+
</StyledClassWrapper>
58+
);
59+
};
60+
const CatalogCard: React.FC<CatalogCardProps> = ({
61+
pattern,
62+
patternType,
63+
cardHeight,
64+
cardWidth,
65+
cardStyles,
66+
cardLink
67+
}) => {
68+
const outerStyles = {
69+
height: cardHeight,
70+
width: cardWidth,
71+
...cardStyles
72+
};
73+
return (
74+
<DesignCardUrl href={cardLink} target="_blank" rel="noreferrer">
75+
<DesignCard outerStyles={outerStyles}>
76+
<DesignInnerCard className="innerCard">
77+
<ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
78+
<DesignType>{patternType}</DesignType>
79+
<DesignDetailsDiv>
80+
<DesignName
81+
style={{
82+
margin: '3rem 0 1.59rem 0',
83+
textAlign: 'center'
84+
}}
85+
>
86+
{pattern.name}
87+
</DesignName>
88+
<ImageWrapper>
89+
<DesignIcon height={'118'} width={'120'} />
90+
</ImageWrapper>
91+
</DesignDetailsDiv>
92+
<MetricsContainerFront>
93+
<MetricsDiv>
94+
<DownloadIcon width={18} height={18} />
95+
<MetricsCount>{pattern.download_count}</MetricsCount>
96+
</MetricsDiv>
97+
<MetricsDiv>
98+
<CloneIcon width={18} height={18} fill={'#51636B'} />
99+
<MetricsCount>{pattern.clone_count}</MetricsCount>
100+
</MetricsDiv>
101+
<MetricsDiv>
102+
<OpenIcon width={18} height={18} fill={'#51636B'} />
103+
<MetricsCount>{pattern.view_count}</MetricsCount>
104+
</MetricsDiv>
105+
<MetricsDiv>
106+
<DeploymentsIcon width={18} height={18} />
107+
<MetricsCount>{pattern.deployment_count}</MetricsCount>
108+
</MetricsDiv>
109+
<MetricsDiv>
110+
<ShareIcon width={18} height={18} fill={'#51636B'} />
111+
<MetricsCount>{pattern.share_count}</MetricsCount>
112+
</MetricsDiv>
113+
</MetricsContainerFront>
114+
</DesignInnerCard>
115+
</DesignCard>
116+
</DesignCardUrl>
117+
);
118+
};
119+
120+
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: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
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+
}) => {
21+
const mapToColor: Record<string, string> = {
22+
community: 'rgba(122,132,142,.8)',
23+
official: '#EBC017',
24+
verified: '#00B39F'
25+
};
26+
return {
27+
font: 'bold 10px sans-serif',
28+
WebkitTransform: 'rotate(-45deg)',
29+
textAlign: 'center',
30+
transform: 'rotate(-45deg)',
31+
position: 'relative',
32+
padding: '4px 0',
33+
top: '15px',
34+
left: '-30px',
35+
width: '120px',
36+
display: 'flex',
37+
flexDirection: 'row',
38+
justifyContent: 'center',
39+
alignItems: 'center',
40+
backgroundColor: mapToColor[catalogClassName],
41+
color: '#fff'
42+
};
43+
});
44+
45+
export const DesignCard = styled('div')<DesignCardProps>(({ outerStyles }) => ({
46+
position: 'relative',
47+
borderRadius: '1rem',
48+
textAlign: 'center',
49+
transformStyle: 'preserve-3d',
50+
transition: 'all .9s ease-out',
51+
marginBottom: '1.25rem',
52+
display: 'inline-flex',
53+
perspective: '1000px',
54+
'&:hover': {
55+
cursor: 'pointer',
56+
transform: 'translateY(-2%)'
57+
},
58+
['@media (max-width:1200px)']: {
59+
height: '18.75rem'
60+
},
61+
...outerStyles
62+
}));
63+
export const DesignInnerCard = styled('div')(({ theme }) => ({
64+
position: 'relative',
65+
width: '100%',
66+
height: '100%',
67+
textAlign: 'center',
68+
transition: 'transform 0.6s',
69+
boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
70+
borderRadius: '0.9375rem'
71+
}));
72+
export const DesignType = styled('span')(({ theme }) => ({
73+
position: 'absolute',
74+
top: '0',
75+
right: '0',
76+
minWidth: '3rem',
77+
padding: '0 0.75rem',
78+
fontSize: '0.875rem',
79+
textTransform: 'capitalize',
80+
background: theme.palette.background.brand?.default,
81+
color: theme.palette.text.inverse,
82+
borderRadius: '0 1rem 0 2rem'
83+
}));
84+
export const MetricsCount = styled('p')(({ theme }) => ({
85+
fontSize: '1rem',
86+
textTransform: 'capitalize',
87+
margin: '0rem',
88+
lineHeight: '1.5',
89+
textAlign: 'center',
90+
color: theme.palette.text.secondary,
91+
fontWeight: '600'
92+
}));
93+
export const DesignName = styled(Typography)(({ theme }) => ({
94+
fontWeight: 'bold',
95+
textTransform: 'capitalize',
96+
color: theme.palette.text.default,
97+
fontSize: '1.125rem',
98+
marginTop: '2rem',
99+
padding: '0rem 1rem', // "0rem 1.5rem"
100+
position: 'relative',
101+
overflow: 'hidden',
102+
whiteSpace: 'nowrap',
103+
textOverflow: 'ellipsis',
104+
textAlign: 'center',
105+
width: '100%'
106+
}));
107+
export const MetricsContainerFront = styled('div')(({ theme }) => ({
108+
display: 'flex',
109+
justifyContent: 'space-around',
110+
// borderTop: "0.851px solid #C9DBE3",
111+
fontSize: '0.2rem',
112+
color: theme.palette.text.secondary,
113+
// margin: "-0.8rem 0.7rem 0",
114+
padding: '0.9rem 0.1rem',
115+
background: theme.palette.background.secondary,
116+
position: 'absolute',
117+
bottom: '0px',
118+
marginTop: '1.2rem',
119+
borderRadius: '0 0 0.9375rem 0.9375rem',
120+
width: '100%'
121+
}));
122+
export const MetricsDiv = styled('div')(() => ({
123+
display: 'flex',
124+
alignItems: 'center',
125+
gap: '4px',
126+
fontSize: '0.2rem',
127+
color: 'rgba(26, 26, 26, .8)',
128+
margin: '0rem',
129+
padding: '0.1rem'
130+
}));
131+
export const DesignDetailsDiv = styled('div')(() => ({
132+
height: 'max-content',
133+
display: 'flex',
134+
marginTop: '-1rem',
135+
flexDirection: 'column',
136+
padding: '0rem 1rem',
137+
justifyContent: 'start',
138+
alignItems: 'start',
139+
['@media (max-width:1200px)']: {
140+
height: 'max-content'
141+
}
142+
}));
143+
144+
export const ImageWrapper = styled('div')(({ theme }) => ({
145+
background: theme.palette.mode === 'light' ? 'rgba(231, 239, 243, 0.40)' : '#212121',
146+
display: 'flex',
147+
alignItems: 'center',
148+
justifyContent: 'center',
149+
padding: '0.5rem',
150+
width: '100%',
151+
borderRadius: '0.5rem'
152+
}));

‎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;

‎src/icons/ContentClassIcons/VerificationClassIcon.tsx

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { FC } from 'react';
2+
import { IconProps } from '../types';
3+
export const VerificationClassIcon: FC<IconProps> = ({
4+
width = '16',
5+
height = '13',
6+
fill = '#F6F8F8',
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+
fill={fill}
16+
>
17+
<path
18+
fill-rule="evenodd"
19+
clip-rule="evenodd"
20+
d="M6.87297 1.42151C6.50993 1.13554 5.99007 1.13554 5.62703 1.42151L5.1892 1.76637C5.00453 1.91184 4.77201 1.98781 4.53428 1.98035L3.97592 1.96283C3.52026 1.94853 3.11362 2.23851 2.99154 2.66478L2.81687 3.27476C2.75625 3.48645 2.62259 3.67153 2.43823 3.79906L1.91481 4.16114C1.55855 4.40759 1.4116 4.85198 1.55356 5.25359L1.78056 5.89574C1.85188 6.0975 1.85188 6.31656 1.78056 6.51832L1.55356 7.16047C1.4116 7.56208 1.55855 8.00648 1.91481 8.25292L2.43823 8.615C2.62259 8.74253 2.75625 8.92762 2.81687 9.13931L2.99154 9.74928C3.11362 10.1756 3.52026 10.4655 3.97592 10.4512L4.53428 10.4337C4.77201 10.4263 5.00453 10.5022 5.1892 10.6477L5.62703 10.9926C5.99007 11.2785 6.50993 11.2785 6.87297 10.9926L7.3108 10.6477C7.49547 10.5022 7.72799 10.4263 7.96572 10.4337L8.52408 10.4512C8.97974 10.4655 9.38638 10.1756 9.50845 9.74928L9.68313 9.13931C9.74375 8.92762 9.87741 8.74253 10.0618 8.615L10.5852 8.25292C10.9415 8.00648 11.0884 7.56208 10.9464 7.16047L10.7194 6.51832C10.6481 6.31656 10.6481 6.0975 10.7194 5.89575L10.9464 5.25359C11.0884 4.85198 10.9415 4.40759 10.5852 4.16114L10.0618 3.79906C9.87741 3.67153 9.74375 3.48645 9.68313 3.27476L9.50845 2.66478C9.38638 2.23851 8.97974 1.94853 8.52408 1.96283L7.96572 1.98035C7.72799 1.98781 7.49547 1.91184 7.3108 1.76637L6.87297 1.42151ZM8.79938 5.35136C8.97414 5.14785 8.9458 4.8454 8.7361 4.67581C8.52639 4.50622 8.21473 4.53372 8.03998 4.73722L5.85299 7.28406L4.73974 6.56382C4.51262 6.41688 4.20574 6.47644 4.05433 6.69686C3.90291 6.91727 3.96428 7.21508 4.19141 7.36202L5.6742 8.32134C5.88437 8.45731 6.16636 8.41762 6.32807 8.22931L8.79938 5.35136Z"
21+
fill={fill}
22+
/>
23+
</svg>
24+
);
25+
26+
export default VerificationClassIcon;

‎src/icons/ContentClassIcons/index.tsx

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

0 commit comments

Comments
 (0)