Merge pull request #664 from rishabhsharma1997/master

feat: added catalog card and icons
layer5io · Jun 27, 2024 · 6a59994 · 6a59994
2 parents 7424585 + e59bacf
commit 6a59994
Show file tree

Hide file tree

Showing 20 changed files with 545 additions and 0 deletions.
diff --git a/src/custom/CatalogCard/CatalogCard.tsx b/src/custom/CatalogCard/CatalogCard.tsx
@@ -0,0 +1,120 @@
+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,
+  ImageWrapper,
+  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;
+  cardLink: 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,
+  cardLink
+}) => {
+  const outerStyles = {
+    height: cardHeight,
+    width: cardWidth,
+    ...cardStyles
+  };
+  return (
+    <DesignCardUrl href={cardLink} 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>
+            <ImageWrapper>
+              <DesignIcon height={'118'} width={'120'} />
+            </ImageWrapper>
+          </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,152 @@
+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
+}) => {
+  const mapToColor: Record<string, string> = {
+    community: 'rgba(122,132,142,.8)',
+    official: '#EBC017',
+    verified: '#00B39F'
+  };
+  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: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`,
+  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',
+  width: '100%'
+}));
+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 ImageWrapper = styled('div')(({ theme }) => ({
+  background: theme.palette.mode === 'light' ? 'rgba(231, 239, 243, 0.40)' : '#212121',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '0.5rem',
+  width: '100%',
+  borderRadius: '0.5rem'
+}));
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;
diff --git a/src/icons/ContentClassIcons/VerificationClassIcon.tsx b/src/icons/ContentClassIcons/VerificationClassIcon.tsx
@@ -0,0 +1,26 @@
+import { FC } from 'react';
+import { IconProps } from '../types';
+export const VerificationClassIcon: FC<IconProps> = ({
+  width = '16',
+  height = '13',
+  fill = '#F6F8F8',
+  style = {}
+}) => (
+  <svg
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height={height}
+    viewBox="0 0 12 13"
+    width={width}
+    fill={fill}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      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"
+      fill={fill}
+    />
+  </svg>
+);
+
+export default VerificationClassIcon;
diff --git a/src/icons/ContentClassIcons/index.tsx b/src/icons/ContentClassIcons/index.tsx
@@ -0,0 +1,4 @@
+import CommunityClassIcon from './CommunityClassIcon';
+import OfficialClassIcon from './OfficialClassIcon';
+import VerificationClassIcon from './VerificationClassIcon';
+export { CommunityClassIcon, OfficialClassIcon, VerificationClassIcon };