+ {viewType !== 'grid' && (
+
+ );
+};
diff --git a/src/custom/CatalogDesignTable/UnpublishTooltipIcon.tsx b/src/custom/CatalogDesignTable/UnpublishTooltipIcon.tsx
new file mode 100644
index 000000000..69b9deb21
--- /dev/null
+++ b/src/custom/CatalogDesignTable/UnpublishTooltipIcon.tsx
@@ -0,0 +1,53 @@
+import { ReactNode } from 'react';
+import { IconButton } from '../../base';
+import { useTheme } from '../../theme';
+import { HOVER_DELETE } from '../../theme/colors/colors';
+import { CustomTooltip } from '../CustomTooltip';
+import { IconWrapper } from '../ResponsiveDataTable';
+
+interface UnpublishTooltipIconProps {
+ children: ReactNode;
+ onClick: () => void;
+ title: string;
+ iconType: 'delete' | 'publish';
+ id: string;
+ style?: object;
+ placement?: 'bottom' | 'top' | 'left' | 'right';
+ disabled?: boolean;
+}
+
+function UnpublishTooltipIcon({
+ children,
+ onClick,
+ title,
+ iconType,
+ id,
+ style,
+ placement,
+ disabled = false
+}: UnpublishTooltipIconProps) {
+ const theme = useTheme();
+ return (
+
+ {
+ window.location.href = `/user/${user_id}`;
+ }}
+ >
+ {!avatar_url &&
+
+
+
+
+
+
+
+
+
+ )
+ },
+ {
+ title: 'Open in playground',
+ onClick: () => handleOpenPlayground(rowData.id, rowData.name),
+ icon:
+
+ cleanedType === RESOURCE_TYPES.FILTERS
+ ? downloadFilter(details.id, details.name)
+ : downloadYaml(details.pattern_file, details.name)
+ }
+ >
+
+
+ {cleanedType !== RESOURCE_TYPES.FILTERS && (
+ handleClone(details?.name, details?.id)}
+ disabled={isCloneDisabled}
+ >
+ {isCloneLoading ? (
+
+ )}
+
+ )}
+
+ CAVEATS AND CONSIDERATIONS
++
-
+ {items?.map(renderItem)}
+
+
+
+ CLASS
+
+
+
+
+
+ );
+};
+
+export default ContentClassInfo;
diff --git a/src/custom/CatalogDetail/LearningSection.tsx b/src/custom/CatalogDetail/LearningSection.tsx
new file mode 100644
index 000000000..d6e308075
--- /dev/null
+++ b/src/custom/CatalogDetail/LearningSection.tsx
@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react';
+import { Link, ListItemIcon } from '../../base';
+import { LearningIcon } from '../../icons';
+import { useTheme } from '../../theme';
+import CollapsibleSection from './CollapsibleSection';
+import { slugify } from './helper';
+import { LabelDiv } from './style';
+import { FilteredAcademyData } from './types';
+
+interface LearningSectionProps {
+ filteredAcademyData: FilteredAcademyData;
+}
+
+const LearningSection: React.FC+
+
+
+
+ );
+};
+
+export default LeftPanel;
diff --git a/src/custom/CatalogDetail/MetricsDisplay.tsx b/src/custom/CatalogDetail/MetricsDisplay.tsx
new file mode 100644
index 000000000..85cf7ec42
--- /dev/null
+++ b/src/custom/CatalogDetail/MetricsDisplay.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Grid } from '../../base';
+import { Pattern } from '../CustomCatalog/CustomCard';
+import { MetricsContainer, MetricsData, MetricsSection, MetricsType } from './style';
+
+interface MetricItem {
+ label: string;
+ value: number;
+}
+
+interface MetricsDisplayProps {
+ details: Pattern;
+}
+
+const MetricsDisplay: React.FC
+ {details?.name}
+
+ WHAT DOES THIS DESIGN DO?
+ {details?.catalog_data?.pattern_info ? ( +No description available
+ )}
+
+ {isExpanded ? (
+
+ );
+};
+
+export default PatternInfo;
diff --git a/src/custom/CatalogDetail/RelatedDesigns.tsx b/src/custom/CatalogDetail/RelatedDesigns.tsx
new file mode 100644
index 000000000..9449f21f9
--- /dev/null
+++ b/src/custom/CatalogDetail/RelatedDesigns.tsx
@@ -0,0 +1,75 @@
+import { CatalogCardDesignLogo } from '../CustomCatalog';
+import CustomCatalogCard, { Pattern } from '../CustomCatalog/CustomCard';
+import { formatToTitleCase } from './helper';
+import { AdditionalContainer, ContentHeading, DesignCardContainer } from './style';
+import { UserProfile } from './types';
+
+export interface PatternsPerUser {
+ patterns: Pattern[];
+}
+
+interface RelatedDesignsProps {
+ details: Pattern;
+ type: string;
+ patternsPerUser: PatternsPerUser;
+ onSuggestedPatternClick: (pattern: Pattern) => void;
+ userProfile?: UserProfile;
+ technologySVGPath: string;
+ technologySVGSubpath: string;
+ orgName: string;
+ fetchingOrgError: boolean;
+}
+
+const RelatedDesigns: React.FC
+ show less
+
+ ) : (
+
+
+ ...show more
+
+ )}
+
+ )}
+ + Other published design by {formatToTitleCase(userProfile?.first_name ?? '')}{' '} + {fetchingOrgError ? '' : `under ${orgName}`} +
+
+
+ );
+};
+
+export default RightPanel;
diff --git a/src/custom/CatalogDetail/SocialSharePopper.tsx b/src/custom/CatalogDetail/SocialSharePopper.tsx
new file mode 100644
index 000000000..3c24b32d8
--- /dev/null
+++ b/src/custom/CatalogDetail/SocialSharePopper.tsx
@@ -0,0 +1,125 @@
+import { Box, IconButton, Menu, MenuItem, Tooltip } from '@mui/material';
+import React, { useState } from 'react';
+import { FacebookShareButton, LinkedinShareButton, TwitterShareButton } from 'react-share';
+import { ChainIcon, FacebookIcon, LinkedinIcon, ShareIcon, TwitterIcon } from '../../icons';
+import { useTheme } from '../../theme';
+import { Pattern } from '../CustomCatalog/CustomCard';
+import { ErrorBoundary } from '../ErrorBoundary';
+import { CopyShareIconWrapper, VisibilityChip } from './style';
+
+interface SocialSharePopperProps {
+ details: Pattern;
+ type: string;
+ cardId: string;
+ title: string;
+ getUrl: (type: string, id: string) => string;
+ handleCopyUrl: (type: string, name: string, id: string) => void;
+}
+
+const SocialSharePopper: React.FC+
-
+ {showSearch && (
+
+ {!imgError ? (
+ <>
+ 
setImgError(true)}
+ style={{
+ cursor: 'pointer',
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover'
+ }}
+ />
+
+
+ ) : (
+
+ ) : (
+ setImgError(true)}
+ style={{
+ cursor: 'pointer',
+ width: '100%',
+ height: '100%',
+ objectFit: 'cover'
+ }}
+ />
+
+
+ ) : (
+
+ {children}
+
+
+ Updated At
+
+ No match found
+Uh-oh!😔 Please pardon the mesh.
{(error as Error).message}
+
+ Error:
+ {(error as Error).message}
+
+ + {showPackageInfo && ( + <> + Version: {version} + + )}
@@ -88,7 +96,7 @@ const LearningCard: React.FC = ({ tutorial, path, courseCount, courseType