feat: add new image and catalog empty card

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

Author: amitamrutiya

src/custom/CustomCatalog/CatalogCardDesignLogo.tsx

@@ -0,0 +1,95 @@
+import React, { useState } from 'react';
+import { Dialog } from '../../base';
+import { DesignIcon, MesheryFilterIcon } from '../../icons';
+
+interface CatalogCardDesignLogoProps {
+  zoomEffect?: boolean;
+  imgURL?: string[];
+  type: { type: string };
+  width: string;
+  height: string;
+  style?: React.CSSProperties;
+}
+
+const CatalogCardDesignLogo: React.FC<CatalogCardDesignLogoProps> = ({
+  zoomEffect = false,
+  imgURL,
+  type,
+  width,
+  height,
+  style = {}
+}) => {
+  const [imgError, setImgError] = useState(false);
+  const [isZoomed, setIsZoomed] = useState(false);
+
+  const handleZoomClick = () => {
+    if (zoomEffect) {
+      setIsZoomed(true);
+    }
+  };
+
+  const handleZoomClose = () => {
+    setIsZoomed(false);
+  };
+
+  const SvgComponent: React.FC<{ type: { type: string } }> = ({ type }) => {
+    return type.type === 'filter' ? (
+      <MesheryFilterIcon width={width} height={height} style={style} />
+    ) : (
+      <DesignIcon width={width} height={height} style={style} />
+    );
+  };
+
+  return (
+    <>
+      {imgURL && imgURL.length > 0 ? (
+        <div style={{ width: '100%', height: '7.5rem', position: 'relative' }}>
+          {!imgError ? (
+            <>
+              <img
+                src={imgURL[0]}
+                alt="Design SnapShot"
+                loading="lazy"
+                onClick={handleZoomClick}
+                onError={() => setImgError(true)}
+                style={{
+                  cursor: 'pointer',
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover'
+                }}
+              />
+              <Dialog
+                open={isZoomed}
+                onClose={handleZoomClose}
+                style={{
+                  backgroundColor: 'rgba(0, 0, 0, 0.8)'
+                }}
+                PaperProps={{
+                  style: {
+                    background: 'transparent',
+                    boxShadow: 'none',
+                    overflow: 'hidden',
+                    maxWidth: '60vw'
+                  }
+                }}
+              >
+                <img
+                  src={imgURL[0]}
+                  alt="Zoomed Design SnapShot"
+                  style={{ objectFit: 'contain', maxWidth: '100%', maxHeight: '100%' }}
+                />
+              </Dialog>
+            </>
+          ) : (
+            <SvgComponent type={type} />
+          )}
+        </div>
+      ) : (
+        <SvgComponent type={type} />
+      )}
+    </>
+  );
+};
+
+export default CatalogCardDesignLogo;

src/custom/CustomCatalog/custom-card.tsx src/custom/CustomCatalog/CustomCard.tsxsrc/custom/CustomCatalog/custom-card.tsx renamed to src/custom/CustomCatalog/CustomCard.tsx

@@ -160,6 +160,7 @@ const CustomCatalogCard: React.FC<CatalogCardProps> = ({
 
     setAvailableTechnologies(validSvgPaths);
   };
+
   useEffect(() => {
     handleImage();
     // eslint-disable-next-line react-hooks/exhaustive-deps

src/custom/CustomCatalog/EmptyStateCard.tsx

@@ -0,0 +1,16 @@
+import { useTheme } from '@mui/material';
+import { FC } from 'react';
+import { EmptyStyleIcon } from '../../icons/EmptyStyle';
+import { CatalogEmptyStateDiv } from './style';
+
+const EmptyStateCard: FC = () => {
+  const theme = useTheme();
+  return (
+    <CatalogEmptyStateDiv>
+      <EmptyStyleIcon fill={theme.palette.secondary.contrastText} width="100px" height="100px" />
+      <h3 style={{ color: theme.palette.secondary.contrastText }}>No match found</h3>
+    </CatalogEmptyStateDiv>
+  );
+};
+
+export default EmptyStateCard;

src/custom/CustomCatalog/index.tsx

@@ -1,3 +1,5 @@
-import CustomCatalogCard from './custom-card';
+import CatalogCardDesignLogo from './CatalogCardDesignLogo';
+import CustomCatalogCard from './CustomCard';
+import EmptyStateCard from './EmptyStateCard';
 
-export { CustomCatalogCard };
+export { CatalogCardDesignLogo, CustomCatalogCard, EmptyStateCard };

src/custom/CustomCatalog/style.tsx

@@ -398,3 +398,30 @@ export const DesignAuthorName = styled('div')(() => ({
     height: 'max-content'
   }
 }));
+
+export const CatalogEmptyStateDiv = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.common.white,
+  textAlign: 'center',
+  borderRadius: '1rem',
+  width: '15rem',
+  height: '18rem',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  [theme.breakpoints.down('lg')]: {
+    height: '18.75rem'
+  }
+}));
+
+export const EmptyStateDiv = styled('div')(({ theme }) => ({
+  backgroundColor: theme.palette.common.white,
+  textAlign: 'center',
+  borderRadius: '1rem',
+  width: '100%',
+  padding: '1.5rem',
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center'
+}));

src/custom/index.tsx

@@ -3,7 +3,7 @@ import { BookmarkNotification } from './BookmarkNotification';
 import CatalogFilter, { CatalogFilterProps } from './CatalogFilter/CatalogFilter';
 import { ChapterCard } from './ChapterCard';
 import { ConnectionChip } from './ConnectionChip';
-import { CustomCatalogCard } from './CustomCatalog';
+import { CatalogCardDesignLogo, CustomCatalogCard, EmptyStateCard } from './CustomCatalog';
 import {
   CustomColumn,
   CustomColumnVisibilityControl,
@@ -58,6 +58,7 @@ export { Terminal } from './Terminal';
 export {
   ActionButton,
   BookmarkNotification,
+  CatalogCardDesignLogo,
   CatalogFilter,
   ChapterCard,
   ConnectionChip,
@@ -68,6 +69,7 @@ export {
   CustomTooltip,
   DataTableEllipsisMenu,
   EmptyState,
+  EmptyStateCard,
   ErrorBoundary,
   Fallback,
   FeedbackButton,

src/icons/EmptyStyle/EmptyStyleIcon.tsx

@@ -0,0 +1,31 @@
+import { CSSProperties, FC } from 'react';
+
+interface EmptyStyleIconProps {
+  width?: string;
+  height?: string;
+  fill?: string;
+  style?: CSSProperties;
+  onClick?: () => void;
+}
+
+const EmptyStyleIcon: FC<EmptyStyleIconProps> = ({
+  width = '24px',
+  height = '24px',
+  fill,
+  style = {},
+  onClick = () => {}
+}) => (
+  <svg
+    style={style}
+    xmlns="http://www.w3.org/2000/svg"
+    height={height}
+    viewBox="0 -960 960 960"
+    width={width}
+    fill={fill}
+    onClick={onClick}
+  >
+    <path d="m159-168-34-14q-31-13-41.5-45t3.5-63l72-156v278Zm160 88q-33 0-56.5-23.5T239-160v-240l106 294q3 7 6 13.5t8 12.5h-40Zm206-4q-32 12-62-3t-42-47L243-622q-12-32 2-62.5t46-41.5l302-110q32-12 62 3t42 47l178 488q12 32-2 62.5T827-194L525-84Zm-86-476q17 0 28.5-11.5T479-600q0-17-11.5-28.5T439-640q-17 0-28.5 11.5T399-600q0 17 11.5 28.5T439-560Z" />
+  </svg>
+);
+
+export default EmptyStyleIcon;

src/icons/EmptyStyle/index.tsx

@@ -0,0 +1 @@
+export { default as EmptyStyleIcon } from './EmptyStyleIcon';