feat: added catalog card and icons

Signed-off-by: rishabhsharma1997 <[email protected]>
layer5io · Jun 27, 2024 · 2b40a2c · 2b40a2c
1 parent 7424585
commit 2b40a2c
Show file tree

Hide file tree

Showing 20 changed files with 566 additions and 0 deletions.
diff --git a/src/custom/CatalogCard/CatalogCard.tsx b/src/custom/CatalogCard/CatalogCard.tsx
@@ -0,0 +1,129 @@
+import { styled } from '@mui/material';
+import React from 'react';
+import {
+  CloneIcon,
+  CommunityClassIcon,
+  DesignIcon,
+  OfficialClassIcon,
+  OpenIcon,
+  ShareIcon
+} from '../../icons';
+import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon';
+import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
+import { DownloadIcon } from '../../icons/Download';
+import {
+  DesignCard,
+  DesignDetailsDiv,
+  DesignInnerCard,
+  DesignName,
+  DesignType,
+  MetricsContainerFront,
+  MetricsCount,
+  MetricsDiv,
+  StyledClassWrapper,
+  StyledInnerClassWrapper
+} from './style';
+
+export const DesignCardUrl = styled('a')(() => ({
+  textDecoration: 'none'
+}));
+
+type CatalogCardProps = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  pattern: any;
+  patternType: string;
+  url: string;
+  cardHeight: string;
+  cardWidth: string;
+  cardStyles: React.CSSProperties;
+  type: string;
+};
+
+export const ClassToIconMap = {
+  community: <CommunityClassIcon width="16px" height="12px" />,
+  official: <OfficialClassIcon width="16px" height="12px" />,
+  verified: <VerificationClassIcon width="16px" height="12px" />
+};
+
+const ClassWrap = ({ catalogClassName }: { catalogClassName: string }) => {
+  if (!catalogClassName) return <></>;
+
+  return (
+    <StyledClassWrapper>
+      <StyledInnerClassWrapper catalogClassName={catalogClassName}>
+        {catalogClassName}
+      </StyledInnerClassWrapper>
+    </StyledClassWrapper>
+  );
+};
+const CatalogCard: React.FC<CatalogCardProps> = ({
+  pattern,
+  patternType,
+  cardHeight,
+  cardWidth,
+  cardStyles,
+  url
+}) => {
+  const outerStyles = {
+    height: cardHeight,
+    width: cardWidth,
+    ...cardStyles
+  };
+  return (
+    <DesignCardUrl href={url} target="_blank" rel="noreferrer">
+      <DesignCard outerStyles={outerStyles}>
+        <DesignInnerCard className="innerCard">
+          <ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
+          <DesignType>{patternType}</DesignType>
+          <DesignDetailsDiv>
+            <DesignName
+              style={{
+                margin: '3rem 0 1.59rem 0',
+                textAlign: 'center'
+              }}
+            >
+              {pattern.name}
+            </DesignName>
+            <div
+              style={{
+                background: 'rgba(231, 239, 243, 0.40)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                padding: '0.5rem',
+                width: '100%',
+                borderRadius: '0.5rem'
+              }}
+            >
+              <DesignIcon height={'118'} width={'120'} />
+            </div>
+          </DesignDetailsDiv>
+          <MetricsContainerFront>
+            <MetricsDiv>
+              <DownloadIcon width={18} height={18} />
+              <MetricsCount>{pattern.download_count}</MetricsCount>
+            </MetricsDiv>
+            <MetricsDiv>
+              <CloneIcon width={18} height={18} fill={'#51636B'} />
+              <MetricsCount>{pattern.clone_count}</MetricsCount>
+            </MetricsDiv>
+            <MetricsDiv>
+              <OpenIcon width={18} height={18} fill={'#51636B'} />
+              <MetricsCount>{pattern.view_count}</MetricsCount>
+            </MetricsDiv>
+            <MetricsDiv>
+              <DeploymentsIcon width={18} height={18} />
+              <MetricsCount>{pattern.deployment_count}</MetricsCount>
+            </MetricsDiv>
+            <MetricsDiv>
+              <ShareIcon width={18} height={18} fill={'#51636B'} />
+              <MetricsCount>{pattern.share_count}</MetricsCount>
+            </MetricsDiv>
+          </MetricsContainerFront>
+        </DesignInnerCard>
+      </DesignCard>
+    </DesignCardUrl>
+  );
+};
+
+export default CatalogCard;
diff --git a/src/custom/CatalogCard/index.tsx b/src/custom/CatalogCard/index.tsx
@@ -0,0 +1,3 @@
+import CatalogCard from './CatalogCard';
+
+export { CatalogCard };
diff --git a/src/custom/CatalogCard/style.tsx b/src/custom/CatalogCard/style.tsx
@@ -0,0 +1,164 @@
+import { styled, Typography } from '@mui/material';
+
+type DesignCardProps = {
+  outerStyles: React.CSSProperties;
+};
+type StyledInnerClassWrapperProps = {
+  catalogClassName: string;
+};
+export const StyledClassWrapper = styled('div')(() => ({
+  width: '85px',
+  height: '88px',
+  overflow: 'hidden',
+  position: 'absolute',
+  top: '-3px',
+  left: '-3px'
+}));
+
+export const StyledInnerClassWrapper = styled('div')<StyledInnerClassWrapperProps>(({
+  catalogClassName,
+  theme
+}) => {
+  const mapToColor: Record<string, string> = {
+    community: theme.palette.icon.secondary,
+    official: theme.palette.background.cta?.default || '#EBC017',
+    verified: theme.palette.background.brand?.default || ''
+  };
+  return {
+    font: 'bold 10px sans-serif',
+    WebkitTransform: 'rotate(-45deg)',
+    textAlign: 'center',
+    transform: 'rotate(-45deg)',
+    position: 'relative',
+    padding: '4px 0',
+    top: '15px',
+    left: '-30px',
+    width: '120px',
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: mapToColor[catalogClassName],
+    color: '#fff'
+  };
+});
+
+export const DesignCard = styled('div')<DesignCardProps>(({ outerStyles }) => ({
+  position: 'relative',
+  borderRadius: '1rem',
+  textAlign: 'center',
+  transformStyle: 'preserve-3d',
+  transition: 'all .9s ease-out',
+  marginBottom: '1.25rem',
+  display: 'inline-flex',
+  perspective: '1000px',
+  '&:hover': {
+    cursor: 'pointer',
+    transform: 'translateY(-2%)'
+  },
+  ['@media (max-width:1200px)']: {
+    height: '18.75rem'
+  },
+  ...outerStyles
+}));
+export const DesignInnerCard = styled('div')(({ theme }) => ({
+  position: 'relative',
+  width: '100%',
+  height: '100%',
+  textAlign: 'center',
+  transition: 'transform 0.6s',
+  boxShadow:
+    theme.palette.mode === 'dark'
+      ? '0 4px 8px 0 rgba(255, 255, 255, 0.1)'
+      : '0 4px 8px 0 rgba(0,0,0,0.2)',
+  borderRadius: '0.9375rem'
+}));
+export const DesignType = styled('span')(({ theme }) => ({
+  position: 'absolute',
+  top: '0',
+  right: '0',
+  minWidth: '3rem',
+  padding: '0 0.75rem',
+  fontSize: '0.875rem',
+  textTransform: 'capitalize',
+  background: theme.palette.background.brand?.default,
+  color: theme.palette.text.inverse,
+  borderRadius: '0 1rem 0 2rem'
+}));
+export const MetricsCount = styled('p')(({ theme }) => ({
+  fontSize: '1rem',
+  textTransform: 'capitalize',
+  margin: '0rem',
+  lineHeight: '1.5',
+  textAlign: 'center',
+  color: theme.palette.text.secondary,
+  fontWeight: '600'
+}));
+export const DesignName = styled(Typography)(({ theme }) => ({
+  fontWeight: 'bold',
+  textTransform: 'capitalize',
+  color: theme.palette.text.default,
+  fontSize: '1.125rem',
+  marginTop: '2rem',
+  padding: '0rem 1rem', // "0rem 1.5rem"
+  position: 'relative',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+  // textAlign: "center",
+  textAlign: 'left',
+  '& :after': {
+    content: "''",
+    textAlign: 'right',
+    position: 'absolute',
+    bottom: '0',
+    right: '0',
+    width: '70%',
+    background: 'linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%)'
+  }
+}));
+export const MetricsContainerFront = styled('div')(({ theme }) => ({
+  display: 'flex',
+  justifyContent: 'space-around',
+  // borderTop: "0.851px solid #C9DBE3",
+  fontSize: '0.2rem',
+  color: theme.palette.text.secondary,
+  // margin: "-0.8rem 0.7rem 0",
+  padding: '0.9rem 0.1rem',
+  background: theme.palette.background.secondary,
+  position: 'absolute',
+  bottom: '0px',
+  marginTop: '1.2rem',
+  borderRadius: '0 0 0.9375rem 0.9375rem',
+  width: '100%'
+}));
+export const MetricsDiv = styled('div')(() => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '4px',
+  fontSize: '0.2rem',
+  color: 'rgba(26, 26, 26, .8)',
+  margin: '0rem',
+  padding: '0.1rem'
+}));
+export const DesignDetailsDiv = styled('div')(() => ({
+  height: 'max-content',
+  display: 'flex',
+  marginTop: '-1rem',
+  flexDirection: 'column',
+  padding: '0rem 1rem',
+  justifyContent: 'start',
+  alignItems: 'start',
+  ['@media (max-width:1200px)']: {
+    height: 'max-content'
+  }
+}));
+export const CardFront = styled('div')(({ theme }) => ({
+  boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
+  background: `linear-gradient(to left bottom, #EBEFF1,#f4f5f7, #f7f7f9, #fff, #fff, #fff,#fff,#fff, #fff, #f7f7f9, #f4f5f7, #EBEFF1)`,
+  width: '100%',
+  height: '100%',
+  WebkitBackfaceVisibility: 'hidden',
+  borderRadius: '0.9375rem',
+  backfaceVisibility: 'hidden'
+}));
diff --git a/src/custom/index.tsx b/src/custom/index.tsx
@@ -37,6 +37,7 @@ import { TransferList } from './TransferModal/TransferList';
 import { TransferListProps } from './TransferModal/TransferList/TransferList';
 import UniversalFilter, { UniversalFilterProps } from './UniversalFilter';
 
+export { CatalogCard } from './CatalogCard';
 export { StyledChartDialog } from './ChartDialog';
 export { LearningContent } from './LearningContent';
 export { SetupPreReq } from './SetupPrerequisite';

diff --git a/src/icons/ContentClassIcons/CommunityClassIcon.tsx b/src/icons/ContentClassIcons/CommunityClassIcon.tsx
@@ -0,0 +1,44 @@
+import { FC } from 'react';
+import { CustomIconProps } from '../types';
+export const CommunityClassIcon: FC<CustomIconProps> = ({
+  width = '16',
+  height = '13',
+  secondaryFill = '#293B43',
+  primaryFill = '#647176',
+  style = {}
+}) => (
+  <svg
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height={height}
+    viewBox="0 0 16 13"
+    width={width}
+  >
+    <path
+      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"
+      fill={secondaryFill}
+    />
+    <path
+      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"
+      fill={secondaryFill}
+    />
+    <path
+      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"
+      fill={primaryFill}
+    />
+    <path
+      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"
+      fill={primaryFill}
+    />
+    <path
+      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"
+      fill={secondaryFill}
+    />
+    <path
+      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"
+      fill={secondaryFill}
+    />
+  </svg>
+);
+
+export default CommunityClassIcon;
diff --git a/src/icons/ContentClassIcons/OfficialClassIcon.tsx b/src/icons/ContentClassIcons/OfficialClassIcon.tsx
@@ -0,0 +1,25 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+export const OfficialClassIcon: FC<IconProps> = ({
+  width = '16',
+  height = '13',
+  fill = '#293B43',
+  style = {}
+}) => (
+  <svg
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height={height}
+    viewBox="0 0 12 13"
+    width={width}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      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"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default OfficialClassIcon;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import CatalogCard from './CatalogCard';

		export { CatalogCard };