diff --git a/package-lock.json b/package-lock.json index c491f76b..bc6df646 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "@layer5/sistent", "version": "0.14.11", "dependencies": { + "js-yaml": "^4.1.0", "lodash": "^4.17.21" }, "devDependencies": { @@ -3707,7 +3708,6 @@ "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true, "license": "Python-2.0" }, "node_modules/aria-query": { @@ -8782,7 +8782,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, "license": "MIT", "dependencies": { "argparse": "^2.0.1" @@ -16792,8 +16791,7 @@ "argparse": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", - "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==", - "dev": true + "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, "aria-query": { "version": "5.1.3", @@ -20310,7 +20308,6 @@ "version": "4.1.0", "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz", "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==", - "dev": true, "requires": { "argparse": "^2.0.1" } diff --git a/package.json b/package.json index 5d21feaa..7361e195 100644 --- a/package.json +++ b/package.json @@ -116,6 +116,7 @@ "access": "public" }, "dependencies": { + "js-yaml": "^4.1.0", "lodash": "^4.17.21" } } diff --git a/src/custom/CustomCatalog/CatalogCardDesignLogo.tsx b/src/custom/CustomCatalog/CatalogCardDesignLogo.tsx new file mode 100644 index 00000000..3fb39247 --- /dev/null +++ b/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 = ({ + 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' ? ( + + ) : ( + + ); + }; + + return ( + <> + {imgURL && imgURL.length > 0 ? ( +
+ {!imgError ? ( + <> + Design SnapShot setImgError(true)} + style={{ + cursor: 'pointer', + width: '100%', + height: '100%', + objectFit: 'cover' + }} + /> + + Zoomed Design SnapShot + + + ) : ( + + )} +
+ ) : ( + + )} + + ); +}; + +export default CatalogCardDesignLogo; diff --git a/src/custom/CustomCatalog/custom-card.tsx b/src/custom/CustomCatalog/CustomCard.tsx similarity index 78% rename from src/custom/CustomCatalog/custom-card.tsx rename to src/custom/CustomCatalog/CustomCard.tsx index 004f5079..92517aa7 100644 --- a/src/custom/CustomCatalog/custom-card.tsx +++ b/src/custom/CustomCatalog/CustomCard.tsx @@ -6,7 +6,10 @@ import { CloneIcon, CommunityClassIcon, OfficialClassIcon, OpenIcon, ShareIcon } import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationClassIcon'; import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon'; import { DownloadIcon } from '../../icons/Download'; +import { DARK_TEAL, useTheme } from '../../theme'; +import { SNOW_WHITE } from '../../theme/colors/colors'; import { CustomTooltip } from '../CustomTooltip'; +import { getVersion, handleImage } from './Helper'; import { CardBack, CardFront, @@ -35,7 +38,10 @@ export const DesignCardUrl = styled('a')(() => ({ textDecoration: 'none' })); -interface Pattern { +export interface Pattern { + id: string; + user_id: string; + pattern_file: string; name: string; download_count: number; clone_count: number; @@ -51,8 +57,10 @@ interface Pattern { }; catalog_data?: { content_class?: string; - imageURL?: string; + imageURL?: string[]; compatibility?: string[]; + published_version?: string; + type?: string; }; visibility: string; updated_at: Date; @@ -61,21 +69,15 @@ interface Pattern { type CatalogCardProps = { pattern: Pattern; patternType: string; - cardLink: string; cardHeight: string; cardWidth: string; cardStyles: React.CSSProperties; - version?: string; avatarUrl: string; shouldFlip?: boolean; cardTechnologies?: boolean; isDetailed?: boolean; - cardAvatarUrl?: boolean; - date?: boolean; - cardVersion?: boolean; UserName?: string; children?: React.ReactNode; // catalogImage - TechnologyComponent?: React.ReactNode; basePath?: string; // path of meshmodel img stored subBasePath?: string; // path of meshmodel img stored getHostUrl?: () => string; @@ -109,7 +111,6 @@ const CustomCatalogCard: React.FC = ({ shouldFlip, isDetailed, cardTechnologies, - cardVersion, avatarUrl, UserName, children, @@ -123,45 +124,15 @@ const CustomCatalogCard: React.FC = ({ width: cardWidth, ...cardStyles }; + const theme = useTheme(); - const technologies = pattern.catalog_data?.compatibility || []; // an array + const technologies = pattern.catalog_data?.compatibility || []; const techlimit = 5; const [availableTechnologies, setAvailableTechnologies] = useState([]); - const checkImageUrlValidity = async (url: string, appendHostUrl = true) => { - return new Promise((resolve) => { - const img = new Image(); - // Only append host if the URL does not start with "http" or "https" - if (appendHostUrl && !url.startsWith('http')) { - img.src = (getHostUrl ? getHostUrl() : '') + url; - } else { - img.src = url; - } - img.onload = () => { - // Check if the image loaded successfully - resolve(true); - }; + const version = getVersion(pattern); - img.onerror = () => { - // Handle the case where the image could not be loaded - resolve(false); - }; - }); - }; - - const handleImage = async () => { - const validSvgPaths = []; - for (const technology of technologies) { - const svgIconPath = `${basePath}/${technology.toLowerCase()}/${subBasePath}/${technology.toLowerCase()}-color.svg`; - const isSvgPathValid = await checkImageUrlValidity(svgIconPath as string); - if (isSvgPathValid) { - validSvgPaths.push(technology); - } - } - - setAvailableTechnologies(validSvgPaths); - }; useEffect(() => { - handleImage(); + handleImage(technologies, basePath, subBasePath, setAvailableTechnologies); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); @@ -196,7 +167,8 @@ const CustomCatalogCard: React.FC = ({
= ({ {isDetailed && ( - - - {pattern.download_count} - - - - {pattern.clone_count} - - - - {pattern.view_count} - - - - {pattern.deployment_count} - - - - {pattern.share_count} - + {[ + { Icon: DownloadIcon, count: pattern.download_count }, + { Icon: CloneIcon, count: pattern.clone_count }, + { Icon: OpenIcon, count: pattern.view_count }, + { Icon: DeploymentsIcon, count: pattern.deployment_count }, + { Icon: ShareIcon, count: pattern.share_count } + ].map(({ Icon, count }, index) => ( + + + {count} + + ))} )} @@ -335,9 +303,9 @@ const CustomCatalogCard: React.FC = ({ )} - {cardVersion && ( + {version && ( - v{cardVersion} + v{version} )} diff --git a/src/custom/CustomCatalog/EmptyStateCard.tsx b/src/custom/CustomCatalog/EmptyStateCard.tsx new file mode 100644 index 00000000..014b0a55 --- /dev/null +++ b/src/custom/CustomCatalog/EmptyStateCard.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react'; +import { EmptyStyleIcon } from '../../icons/EmptyStyle'; +import { useTheme } from '../../theme'; +import { CatalogEmptyStateDiv } from './style'; + +const EmptyStateCard: FC = () => { + const theme = useTheme(); + return ( + + +

No match found

+ + ); +}; + +export default EmptyStateCard; diff --git a/src/custom/CustomCatalog/Helper.ts b/src/custom/CustomCatalog/Helper.ts new file mode 100644 index 00000000..10bbc4e3 --- /dev/null +++ b/src/custom/CustomCatalog/Helper.ts @@ -0,0 +1,68 @@ +import jsyaml from 'js-yaml'; +import { Pattern } from './CustomCard'; + +const checkImageUrlValidity = async ( + url: string, + appendHostUrl = true, + getHostUrl?: () => string +): Promise => { + return new Promise((resolve) => { + const img = new Image(); + // Only append host if the URL does not start with "http" or "https" + if (appendHostUrl && !url.startsWith('http')) { + img.src = (getHostUrl ? getHostUrl() : '') + url; + } else { + img.src = url; + } + img.onload = () => { + // Check if the image loaded successfully + resolve(true); + }; + + img.onerror = () => { + // Handle the case where the image could not be loaded + resolve(false); + }; + }); +}; + +const getValidSvgPaths = async ( + technologies: string[], + basePath: string, + subBasePath: string +): Promise => { + const validSvgPaths: string[] = []; + for (const technology of technologies) { + const svgIconPath = `${basePath}/${technology.toLowerCase()}/${subBasePath}/${technology.toLowerCase()}-color.svg`; + const isSvgPathValid = await checkImageUrlValidity(svgIconPath as string); + if (isSvgPathValid) { + validSvgPaths.push(technology); + } + } + return validSvgPaths; +}; + +export const handleImage = async ( + technologies: string[], + basePath: string = '', + subBasePath: string = '', + setAvailableTechnologies: (technologies: string[]) => void +) => { + const validSvgPaths = await getValidSvgPaths(technologies, basePath, subBasePath); + setAvailableTechnologies(validSvgPaths); +}; + +export const DEFAULT_DESIGN_VERSION = '0.0.0'; + +export const getVersion = (design: Pattern) => { + if (design.visibility === 'published') { + return design?.catalog_data?.published_version || DEFAULT_DESIGN_VERSION; + } + try { + const patternFile = jsyaml.load(design.pattern_file); + return patternFile?.version || DEFAULT_DESIGN_VERSION; + } catch (e) { + console.error(e); + return DEFAULT_DESIGN_VERSION; + } +}; diff --git a/src/custom/CustomCatalog/index.tsx b/src/custom/CustomCatalog/index.tsx index 09adbc5c..be7c4712 100644 --- a/src/custom/CustomCatalog/index.tsx +++ b/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 }; diff --git a/src/custom/CustomCatalog/style.tsx b/src/custom/CustomCatalog/style.tsx index 7e89b190..a49cbebb 100644 --- a/src/custom/CustomCatalog/style.tsx +++ b/src/custom/CustomCatalog/style.tsx @@ -1,4 +1,6 @@ import { styled, Typography } from '@mui/material'; +import { accentGrey, DARK_PRIMARY_COLOR, GRAY97, slateGray, WHITESMOKE } from '../../theme'; +import { charcoal, DARK_TEAL, SNOW_WHITE } from '../../theme/colors/colors'; type DesignCardProps = { outerStyles: React.CSSProperties; @@ -45,12 +47,13 @@ export const NoTechnologyText = styled('div')(() => ({ })); export const StyledInnerClassWrapper = styled('div')(({ - catalogClassName + catalogClassName, + theme }) => { const mapToColor: Record = { - community: 'rgba(122,132,142,.8)', - official: '#EBC017', - verified: '#00B39F' + community: slateGray.main, + official: theme.palette.background.cta?.default || '#EBC017', + verified: theme.palette.background.brand?.default || '#00B39F' }; return { font: 'bold 10px sans-serif', @@ -67,7 +70,7 @@ export const StyledInnerClassWrapper = styled('div') ({ fontSize: '0.875rem', textTransform: 'capitalize', background: theme.palette.background.brand?.default, - color: theme.palette.text.inverse, + color: theme.palette.background.constant?.white, borderRadius: '0 1rem 0 2rem' })); export const MetricsCount = styled('p')(({ theme }) => ({ @@ -131,13 +134,13 @@ export const MetricsCount = styled('p')(({ theme }) => ({ margin: '0rem', lineHeight: '1.5', textAlign: 'center', - color: theme.palette.text.secondary, + color: theme.palette.mode === 'light' ? DARK_TEAL : SNOW_WHITE, fontWeight: '600' })); -export const DesignName = styled(Typography)(() => ({ +export const DesignName = styled(Typography)(({ theme }) => ({ fontWeight: 'bold', textTransform: 'capitalize', - color: '#000D12', + color: theme.palette.text.default, fontSize: '1.125rem', marginTop: '2rem', padding: '0rem 1rem', @@ -151,15 +154,13 @@ export const DesignName = styled(Typography)(() => ({ fontFamily: 'inherit' })); -export const MetricsContainerFront = styled('div')(({ isDetailed }) => ({ +export const MetricsContainerFront = styled('div')(({ isDetailed, theme }) => ({ display: 'flex', justifyContent: 'space-around', - // borderTop: "0.851px solid #C9DBE3", fontSize: '0.2rem', - color: 'rgba(26, 26, 26, .8)', - // margin: "-0.8rem 0.7rem 0", + color: theme.palette.mode === 'light' ? 'rgba(26, 26, 26, .8)' : theme.palette.text.default, padding: '0.9rem 0.1rem', - background: '#E7EFF3', + background: theme.palette.mode === 'light' ? '#E7EFF3' : DARK_TEAL, ...(isDetailed && { position: 'absolute', bottom: '0px' @@ -194,7 +195,7 @@ export const DesignDetailsDiv = styled('div')(() => ({ })); export const ImageWrapper = styled('div')(({ theme }) => ({ - background: theme.palette.mode === 'light' ? 'rgba(231, 239, 243, 0.40)' : '#212121', + background: theme.palette.background.surfaces, display: 'flex', alignItems: 'center', justifyContent: 'center', @@ -347,22 +348,34 @@ export const CardBack = styled('div')(({ isCatalog }) => ({ }) })); -export const CardFront = styled('div')(({ shouldFlip, isDetailed, theme }) => ({ - ...(shouldFlip && { - position: 'absolute', - boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`, - background: `linear-gradient(to left bottom, #EBEFF1, #f4f5f7, #f7f7f9, white, white, white, white, white, white, #f7f7f9, #f4f5f7, #EBEFF1);` - }), - ...(isDetailed && { - boxShadow: `2px 2px 3px 0px ${theme.palette.background.brand?.default}`, - background: `linear-gradient(to left bottom, #EBEFF1, #f4f5f7, #f7f7f9, white, white, white, white, white, white, #f7f7f9, #f4f5f7, #EBEFF1);` - }), - width: '100%', - height: '100%', - WebkitBackfaceVisibility: 'hidden', - borderRadius: '0.9375rem', - backfaceVisibility: 'hidden' -})); +const getBackground = (isLightMode: boolean) => { + const lightGradient = `linear-gradient(to left bottom, ${WHITESMOKE}, ${GRAY97},white, white, white, white, white, white, white,white, $, ${WHITESMOKE}, ${GRAY97})`; + const darkGradient = `linear-gradient(to right top, ${DARK_PRIMARY_COLOR}, ${accentGrey[30]}, ${accentGrey[20]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${accentGrey[10]}, ${charcoal[20]}, ${charcoal[10]}, black)`; + + return isLightMode ? lightGradient : darkGradient; +}; +export const CardFront = styled('div')(({ shouldFlip, isDetailed, theme }) => { + const isLightMode = theme.palette.mode === 'light'; + const background = getBackground(isLightMode); + const boxShadow = `2px 2px 3px 0px ${theme.palette.background.brand?.default}`; + + return { + ...(shouldFlip && { + position: 'absolute', + boxShadow, + background + }), + ...(isDetailed && { + boxShadow, + background + }), + width: '100%', + height: '100%', + WebkitBackfaceVisibility: 'hidden', + borderRadius: '0.9375rem', + backfaceVisibility: 'hidden' + }; +}); export const DateText = styled('div')(() => ({ fontSize: '0.875rem', @@ -398,3 +411,25 @@ export const DesignAuthorName = styled('div')(() => ({ height: 'max-content' } })); + +export const CatalogEmptyStateDiv = styled('div')(({ theme }) => { + const isLightMode = theme.palette.mode === 'light'; + const background = getBackground(isLightMode); + const boxShadow = `2px 2px 3px 0px ${theme.palette.background.brand?.default}`; + + return { + background: background, + boxShadow: boxShadow, + textAlign: 'center', + borderRadius: '1rem', + width: '15rem', + height: '18rem', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + [theme.breakpoints.down('lg')]: { + height: '18.75rem' + } + }; +}); diff --git a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx index faf61645..36bfc06b 100644 --- a/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx +++ b/src/custom/CustomColumnVisibilityControl/CustomColumnVisibilityControl.tsx @@ -1,4 +1,3 @@ -import { useTheme } from '@mui/material'; import React from 'react'; import { Box } from '../../base/Box'; import { Card } from '../../base/Card'; @@ -6,6 +5,7 @@ import { Checkbox } from '../../base/Checkbox'; import { ClickAwayListener } from '../../base/ClickAwayListener'; import { FormControlLabel } from '../../base/FormControlLabel'; import { ColumnIcon } from '../../icons'; +import { useTheme } from '../../theme'; import PopperListener from '../PopperListener'; import TooltipIcon from '../TooltipIcon'; diff --git a/src/custom/Prompt/promt-component.tsx b/src/custom/Prompt/promt-component.tsx index 87130367..9d1cba78 100644 --- a/src/custom/Prompt/promt-component.tsx +++ b/src/custom/Prompt/promt-component.tsx @@ -1,6 +1,6 @@ -import { useTheme } from '@mui/material'; import { forwardRef, useImperativeHandle, useRef, useState } from 'react'; import { Typography } from '../../base'; +import { useTheme } from '../../theme'; import { Modal, ModalBody, ModalButtonPrimary, ModalButtonSecondary, ModalFooter } from '../Modal'; import { ActionComponent, Subtitle } from './style'; diff --git a/src/custom/SearchBar.tsx b/src/custom/SearchBar.tsx index db72eaf4..8b7f2734 100644 --- a/src/custom/SearchBar.tsx +++ b/src/custom/SearchBar.tsx @@ -1,11 +1,12 @@ /* eslint-disable react-hooks/exhaustive-deps */ import { outlinedInputClasses } from '@mui/material/OutlinedInput'; -import { Theme, ThemeProvider, createTheme, useTheme } from '@mui/material/styles'; +import { Theme, ThemeProvider, createTheme } from '@mui/material/styles'; import debounce from 'lodash/debounce'; import React, { useCallback } from 'react'; import { ClickAwayListener } from '../base/ClickAwayListener'; import { TextField } from '../base/TextField'; import { CloseIcon, SearchIcon } from '../icons'; +import { useTheme } from '../theme'; import TooltipIcon from './TooltipIcon'; const customTheme = (theme: Theme) => diff --git a/src/custom/Stepper/index.tsx b/src/custom/Stepper/index.tsx index e993341d..5fd4107f 100644 --- a/src/custom/Stepper/index.tsx +++ b/src/custom/Stepper/index.tsx @@ -1,9 +1,10 @@ -import { Box, Stack, Step, StepConnector, StepLabel, Stepper, useTheme } from '@mui/material'; +import { Box, Stack, Step, StepConnector, StepLabel, Stepper } from '@mui/material'; import { stepConnectorClasses } from '@mui/material/StepConnector'; import { StepIconProps } from '@mui/material/StepIcon'; import { styled } from '@mui/system'; import React, { useMemo, useState } from 'react'; import { IconProps } from '../../icons/types'; +import { useTheme } from '../../theme'; interface ColorlibStepIconPropsI extends StepIconProps { icons: React.ComponentType[]; diff --git a/src/custom/StyledSearchBar/StyledSearchBar.tsx b/src/custom/StyledSearchBar/StyledSearchBar.tsx index f3dcce72..165f72c2 100644 --- a/src/custom/StyledSearchBar/StyledSearchBar.tsx +++ b/src/custom/StyledSearchBar/StyledSearchBar.tsx @@ -1,8 +1,9 @@ -import { SxProps, Theme, useTheme } from '@mui/material'; +import { SxProps, Theme } from '@mui/material'; import { debounce } from 'lodash'; import React, { useCallback, useState } from 'react'; import { InputAdornment } from '../../base'; import { SearchIcon } from '../../icons'; +import { useTheme } from '../../theme'; import { InputAdornmentEnd, StyledSearchInput } from './style'; interface SearchBarProps { diff --git a/src/custom/UniversalFilter.tsx b/src/custom/UniversalFilter.tsx index 1df8dbab..02a8213f 100644 --- a/src/custom/UniversalFilter.tsx +++ b/src/custom/UniversalFilter.tsx @@ -1,4 +1,3 @@ -import { useTheme } from '@mui/material'; import { SelectChangeEvent } from '@mui/material/Select'; import React from 'react'; import { Button } from '../base/Button'; @@ -8,6 +7,7 @@ import { MenuItem } from '../base/MenuItem'; import { Paper } from '../base/Paper'; import { Select } from '../base/Select'; import { FilterIcon } from '../icons'; +import { useTheme } from '../theme'; import PopperListener from './PopperListener'; import TooltipIcon from './TooltipIcon'; diff --git a/src/custom/index.tsx b/src/custom/index.tsx index 1fc4eea3..ca9ba32b 100644 --- a/src/custom/index.tsx +++ b/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, diff --git a/src/icons/ContentClassIcons/CommunityClassIcon.tsx b/src/icons/ContentClassIcons/CommunityClassIcon.tsx index ad000fc1..393c609b 100644 --- a/src/icons/ContentClassIcons/CommunityClassIcon.tsx +++ b/src/icons/ContentClassIcons/CommunityClassIcon.tsx @@ -3,8 +3,8 @@ import { CustomIconProps } from '../types'; export const CommunityClassIcon: FC = ({ width = '16', height = '13', - secondaryFill = '#293B43', - primaryFill = '#647176', + fill = '#293B43', + secondaryFill = '#647176', style = {} }) => ( = ({ > ); diff --git a/src/icons/EmptyStyle/EmptyStyleIcon.tsx b/src/icons/EmptyStyle/EmptyStyleIcon.tsx new file mode 100644 index 00000000..dcd90aae --- /dev/null +++ b/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 = ({ + width = '24px', + height = '24px', + fill, + style = {}, + onClick = () => {} +}) => ( + + + +); + +export default EmptyStyleIcon; diff --git a/src/icons/EmptyStyle/index.tsx b/src/icons/EmptyStyle/index.tsx new file mode 100644 index 00000000..97ba77dd --- /dev/null +++ b/src/icons/EmptyStyle/index.tsx @@ -0,0 +1 @@ +export { default as EmptyStyleIcon } from './EmptyStyleIcon';