Skip to content

Commit

Permalink
feat(UI): Catalog Card color scheme changes and flip card fixes
Browse files Browse the repository at this point in the history 
Signed-off-by: Ankita Sahu <[email protected]>
  • Loading branch information
@SAHU-01
SAHU-01 committed Aug 13, 2024
1 parent fd0c99b commit e3729c5
Show file tree
Hide file tree
Showing 2 changed files with 143 additions and 70 deletions.
195 changes: 140 additions & 55 deletions src/custom/CatalogCard/CatalogCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { styled } from '@mui/material';
import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
import { Avatar, Box, Typography, styled } from '@mui/material';
import React from 'react';
import {
CloneIcon,
Expand All @@ -12,38 +13,65 @@ import VerificationClassIcon from '../../icons/ContentClassIcons/VerificationCla
import DeploymentsIcon from '../../icons/Deployments/DeploymentsIcon';
import { DownloadIcon } from '../../icons/Download';
import {
BackFace,
BackFaceContent,
DesignCard,
DesignDetailsDiv,
DesignInnerCard,
DesignName,
DesignType,
FlipCard,
Flipper,
FrontFace,
ImageWrapper,
MetricsContainerFront,
MetricsCount,
MetricsDiv,
ProfileSection,
StyledClassWrapper,
StyledInnerClassWrapper,
StyledVersionTag,
TechnologiesSection,
UpdatedSection,
VersionTag
} from './style';

export const DesignCardUrl = styled('a')(() => ({
textDecoration: 'none'
}));

type VersionTagPosition = 'front' | 'back' | 'both' | 'none';
interface Pattern {
name: string;
download_count: number;
clone_count: number;
view_count: number;
deployment_count: number;
share_count: number;
userData?: {
version?: string;
avatarUrl?: string;
userName?: string;
technologies?: string[];
updatedAt?: string;
};
catalog_data?: {
content_class?: string;
};
}

type CatalogCardProps = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
pattern: any;
pattern: Pattern;
patternType: string;
cardLink: string;
cardHeight: string;
cardWidth: string;
cardStyles: React.CSSProperties;
type: string;
versionTagPosition: VersionTagPosition;
version: string;
version?: string;
avatarUrl: string;
userName: string;
technologies: string[];
updatedAt: string;
};

export const ClassToIconMap = {
Expand Down Expand Up @@ -72,7 +100,10 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
cardStyles,
cardLink,
version,
versionTagPosition
avatarUrl,
userName,
updatedAt,
technologies
}) => {
const outerStyles = {
height: cardHeight,
Expand All @@ -81,57 +112,111 @@ const CatalogCard: React.FC<CatalogCardProps> = ({
};

const cardVersion = version || pattern?.userData?.version;
const cardAvatarUrl = avatarUrl || pattern?.userData?.avatarUrl;
const cardName = userName || pattern?.userData?.userName;
const cardTechnologies = technologies || pattern?.userData?.technologies;
const cardUpdatedAt = updatedAt || pattern?.userData?.updatedAt;
const date = cardUpdatedAt ? new Date(cardUpdatedAt) : null;
const options: Intl.DateTimeFormatOptions = { year: 'numeric', month: 'long', day: 'numeric' };
const formattedDate = date ? date.toLocaleDateString('en-US', options) : 'N/A';

return (
<DesignCardUrl href={cardLink} target="_blank" rel="noreferrer">
<DesignCard outerStyles={outerStyles}>
<DesignInnerCard className="innerCard">
<ClassWrap catalogClassName={pattern?.catalog_data?.content_class ?? ''} />
{versionTagPosition !== 'none' &&
cardVersion &&
(versionTagPosition === 'front' ? (
<VersionTag>v{cardVersion}</VersionTag>
) : (
<StyledVersionTag>v{cardVersion}</StyledVersionTag>
))}
<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>
<FlipCard style={outerStyles}>
<Flipper className="flipper">
<FrontFace>
<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>
</FrontFace>
<BackFace>
<BackFaceContent>
{cardAvatarUrl && (
<ProfileSection>
<Avatar src={cardAvatarUrl} />
<Typography variant="h6" style={{ marginLeft: '8px', color: 'white' }}>
{cardName}
</Typography>
</ProfileSection>
)}

{cardTechnologies && (
<TechnologiesSection>
<Typography
variant="subtitle1"
style={{ color: 'white', textDecoration: 'underline' }}
>
Technologies
</Typography>
<Box display="flex" alignItems="center" justifyContent="center" mt={1}>
<img
src="path_to_kubernetes_icon"
alt="Kubernetes"
style={{ width: '40px', height: '40px' }}
/>
</Box>
</TechnologiesSection>
)}

{date && (
<UpdatedSection>
<CalendarMonthIcon style={{ color: '#fff', marginRight: '8px' }} />
<Typography variant="body2" style={{ color: '#fff', marginRight: '24px' }}>
Updated At
</Typography>
<Typography variant="body2" style={{ color: '#fff' }}>
{formattedDate}
</Typography>
</UpdatedSection>
)}

{cardVersion && (
<VersionTag>
<Typography variant="body2">v{cardVersion}</Typography>
</VersionTag>
)}
</BackFaceContent>
</BackFace>
</Flipper>
</FlipCard>
</DesignCardUrl>
);
};
Expand Down
18 changes: 3 additions & 15 deletions src/custom/CatalogCard/style.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -151,10 +151,10 @@ export const ImageWrapper = styled('div')(({ theme }) => ({
borderRadius: '0.5rem'
}));

export const StyledVersionTag = styled('div')(({ theme }) => ({
export const VersionTag = styled('div')(({ theme }) => ({
display: 'inline-block',
backgroundColor: theme.palette.background.secondary,
color: theme.palette.text.secondary,
backgroundColor: theme.palette.background.supplementary,
color: theme.palette.text.constant?.white,
borderRadius: '4px',
fontSize: '0.75rem',
fontWeight: 'bold',
Expand All @@ -163,18 +163,6 @@ export const StyledVersionTag = styled('div')(({ theme }) => ({
maxWidth: 'fit-content'
}));

export const VersionTag = styled('div')(({ theme }) => ({
position: 'absolute',
bottom: '60px',
left: '15px',
backgroundColor: theme.palette.background.secondary,
color: theme.palette.text.secondary,
padding: '2px 6px',
borderRadius: '4px',
fontSize: '0.75rem',
fontWeight: 'bold'
}));

export const FlipCard = styled('div')(() => ({
perspective: '1000px',
'&:hover .flipper': {
Expand Down

0 comments on commit e3729c5

Please sign in to comment.