Centralizing the CatalogCard component in sistent

[SAHU-01]

Current Behavior

The meshery-cloud is still using its own CatalogCard, this needs to be centralized to sistent to consolidate these components.

Desired Behavior

Enhance the Sistent component to avoid creation and usage of a separate CatalogCard in meshery-cloud

Implementation

• Adding version property to CatalogCardProps

type CatalogCardProps = {
  // ... existing props
  version?: string;
};

• Adding new styled component for the version tag

export const VersionTag = styled('div')(({ theme }) => ({
  position: 'absolute',
  top: '8px',
  right: '8px',
  backgroundColor: based on theme,
  color: based on theme,
  padding: '2px 6px',
  borderRadius: '4px',
  fontSize: '0.75rem',
  fontWeight: 'bold',
}));

• Updating the CatalogCard component to include the version tag

const CatalogCard: React.FC<CatalogCardProps> = ({
  pattern,
  patternType,
  cardHeight,
  cardWidth,
  cardStyles,
  cardLink,
  version,
}) => {
//....existing code 
  <ClassWrap catalogClassName={pattern?.catalog_data?.content_class} />
   {version && <VersionTag>v{version}</VersionTag>}
   <DesignType>{patternType}</DesignType>

If the CatalogCard is used in a component that has a version it can then be passed like this:

<CatalogCard
  key={index}
  cardLink={`https://meshery.layer5.io/catalog/content/catalog/${item?.id}`}
  cardHeight="20rem"
  cardWidth="16rem"
  pattern={item}
  type="Catalog"
  patternType={item?.catalog_data?.type}
  version={item?.version} // Add this line if version tag is required
/>

Note: The above implementation is with reference to CatalogCard usage in CatalogGrid component of Layer5

Acceptance Tests

Mockups

---

Contributor Guide

• 🎨 Wireframes and designs for Sistent site in Figma (open invite)

[SAHU-01]

@dottharun and @leecalcote please share your thoughts on the suggested implementation process. Based on your remarks I'll push commits and we can test this.