feat(PerformersSection): enhance StatCardProps and improve icon click handling

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

Author: amitamrutiya

src/custom/PerformersSection/PerformersSection.tsx

@@ -48,6 +48,7 @@ interface BaseQueryParams {
 
 interface StatCardProps {
   label: string;
+  countKey: string;
   count: number;
   patternName: string;
   pattern: Pattern;
@@ -57,7 +58,7 @@ interface StatCardProps {
   status: string;
   id: string;
   onCardClick: (pattern: Pattern) => void;
-  onIconClick: () => void;
+  onIconClick: (sortOrder: string) => void;
   onAuthorClick: (userId: string) => void;
   onStatusClick: (status: string) => void;
 }
@@ -121,6 +122,7 @@ const createQueryParams = (metric: MetricType): BaseQueryParams => ({
 
 const StatCardComponent: React.FC<StatCardProps> = ({
   label,
+  countKey,
   count,
   patternName,
   pattern,
@@ -138,9 +140,9 @@ const StatCardComponent: React.FC<StatCardProps> = ({
     onCardClick(pattern);
   };
 
-  const handleIconClick = (e: React.MouseEvent) => {
+  const handleIconClick = (e: React.MouseEvent, sortOrder: string) => {
     e.stopPropagation();
-    onIconClick();
+    onIconClick(sortOrder);
   };
 
   const handleAuthorClick = (e: React.MouseEvent) => {
@@ -157,10 +159,10 @@ const StatCardComponent: React.FC<StatCardProps> = ({
     <StyledCard elevation={0} status={status} onClick={handleCardClick}>
       <ContentWrapper cardId={id}>
         <HeaderSection>
-          <HeaderTitle>{label}</HeaderTitle>
-          <IconContainer onClick={handleIconClick}>
+          <IconContainer onClick={(e) => handleIconClick(e, `${countKey}+desc`)}>
             <Icon className={id} />
           </IconContainer>
+          <HeaderTitle>{label}</HeaderTitle>
         </HeaderSection>
 
         <StatsValue>{count}</StatsValue>
@@ -238,6 +240,7 @@ const processQueryData = (
 
   return {
     label: config.label,
+    countKey: config.countKey,
     count: pattern[config.countKey],
     patternName: pattern.name || 'Unknown',
     pattern: pattern,

src/custom/PerformersSection/styles.tsx

@@ -137,22 +137,21 @@ export const IconContainer = styled(Box)(() => ({
   }
 }));
 
-export const ContentWrapper = styled(CardContent)<ContentWrapperProps>(({ cardId, theme }) => ({
+export const ContentWrapper = styled(CardContent)<ContentWrapperProps>(() => ({
   height: '100%',
   display: 'flex',
   flexDirection: 'column',
-  padding: theme.spacing(2),
-  paddingInline: cardId === 'download-icon' ? '12px' : theme.spacing(2),
+  padding: '12px',
   '&:last-child': {
-    paddingBottom: theme.spacing(2)
+    paddingBottom: '12px'
   }
 }));
 
 export const HeaderSection = styled(Box)({
   display: 'flex',
   justifyContent: 'space-between',
   alignItems: 'flex-start',
-  marginBottom: '1rem',
+  marginBottom: '0.5rem',
   gap: '0.6rem'
 });
 
@@ -163,7 +162,14 @@ export const HeaderTitle = styled(Typography)(({ theme }) => ({
   lineHeight: 1.2,
   marginTop: '4px',
   textTransform: 'uppercase',
-  letterSpacing: '0.5px'
+  letterSpacing: '0.5px',
+  display: '-webkit-box',
+  WebkitLineClamp: 2,
+  WebkitBoxOrient: 'vertical',
+  overflow: 'hidden',
+  textOverflow: 'clip',
+  maxWidth: '70%',
+  height: '2.4em'
 }));
 
 export const StatsValue = styled(Typography)(({ theme }) => ({