Skip to content

Commit 4e8f1fe

Browse files
amitamrutiyaamitamrutiya
committed
feat: add WorkspaceActivityCard and ActionButtonCard components for enhanced dashboard functionality
Signed-off-by: amitamrutiya <amitamrutiya2210@gmail.com>
1 parent 629e7b7 commit 4e8f1fe

3 files changed

Lines changed: 681 additions & 0 deletions

File tree

‎src/custom/DashboardWidgets/GettingStartedWidget/ActionButtonCard.tsx‎

Lines changed: 187 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,187 @@
1+
import { ReactNode } from 'react';
2+
import { Box, Button, Card, CardActions, CardContent, Typography } from '../../../base';
3+
import { styled, useTheme } from '../../../theme';
4+
import { PrecentageLabel, SliderDiv } from '../styles';
5+
6+
interface ActionButtonCardProps {
7+
title: string;
8+
description: ReactNode;
9+
icon: ReactNode;
10+
customComponent?: ReactNode;
11+
href?: string;
12+
target?: string;
13+
onClick?: () => void;
14+
btnTitle: string;
15+
disabled?: boolean;
16+
showProgress?: boolean;
17+
actionButton?: boolean;
18+
maxDescriptionWidth?: string;
19+
completedSteps?: string[];
20+
totalSteps: number;
21+
playgroundCardBackgroundImgSrc?: string;
22+
}
23+
24+
const BoxContainer = styled(Card)<{ playgroundCardBackgroundImgSrc?: string }>(
25+
({ theme, playgroundCardBackgroundImgSrc }) => ({
26+
backgroundImage: playgroundCardBackgroundImgSrc
27+
? `url(${playgroundCardBackgroundImgSrc})`
28+
: 'none',
29+
backgroundPosition: 'right bottom',
30+
backgroundSize: 'cover',
31+
backgroundRepeat: 'no-repeat',
32+
minWidth: 285,
33+
height: '100%',
34+
position: 'relative',
35+
backgroundColor:
36+
theme.palette.mode === 'dark' ? theme.palette.background.card : theme.palette.common.white
37+
})
38+
);
39+
40+
const StyledCard = styled(Card)(({ theme }) => ({
41+
minWidth: 275,
42+
height: '100%',
43+
backgroundColor:
44+
theme.palette.mode === 'dark' ? theme.palette.background.card : theme.palette.common.white
45+
}));
46+
47+
const IconTitleWrapper = styled(Box)({
48+
display: 'flex',
49+
alignItems: 'center',
50+
gap: '0.5rem'
51+
});
52+
53+
const ContentWrapper = styled(Box)({
54+
display: 'flex',
55+
flexDirection: 'column'
56+
});
57+
58+
const DescriptionTypography = styled(Typography)<{ maxWidth?: string }>(({ maxWidth }) => ({
59+
marginLeft: 8,
60+
marginBottom: 8,
61+
minHeight: '4.5rem',
62+
'@media (min-width: 475px) and (max-width: 1200px)': {
63+
maxWidth: maxWidth || '100%'
64+
}
65+
}));
66+
67+
const StandardDescriptionTypography = styled(Typography)({
68+
marginLeft: 8,
69+
marginBottom: 8,
70+
minHeight: '3rem'
71+
});
72+
73+
const ProgressWrapper = styled(Typography)({
74+
marginLeft: 8,
75+
marginBottom: 8
76+
});
77+
78+
const CustomComponentWrapper = styled(Box)({
79+
display: 'flex',
80+
marginLeft: 8
81+
});
82+
83+
const ActionButtonCard = ({
84+
title,
85+
description,
86+
icon,
87+
customComponent,
88+
href,
89+
onClick,
90+
btnTitle,
91+
disabled = false,
92+
showProgress = false,
93+
actionButton = true,
94+
maxDescriptionWidth = '100%',
95+
completedSteps,
96+
totalSteps,
97+
playgroundCardBackgroundImgSrc
98+
}: ActionButtonCardProps) => {
99+
const completed = completedSteps ? completedSteps.length : 0;
100+
const theme = useTheme();
101+
102+
const completedPercentage = (): number => {
103+
return Math.round((100 / totalSteps) * completed);
104+
};
105+
106+
const percentage = completedPercentage();
107+
108+
if (title === 'CLOUD NATIVE PLAYGROUND') {
109+
return (
110+
<BoxContainer playgroundCardBackgroundImgSrc={playgroundCardBackgroundImgSrc}>
111+
<CardContent sx={{ zIndex: 2, position: 'relative' }}>
112+
<IconTitleWrapper>
113+
{icon}
114+
<Typography variant="h6" fontWeight="700">
115+
{title}
116+
</Typography>
117+
</IconTitleWrapper>
118+
<ContentWrapper>
119+
<DescriptionTypography maxWidth={maxDescriptionWidth}>
120+
{description}
121+
</DescriptionTypography>
122+
{showProgress && (
123+
<ProgressWrapper>
124+
<SliderDiv
125+
value={percentage}
126+
size="small"
127+
aria-label="Default"
128+
valueLabelDisplay="auto"
129+
/>
130+
<PrecentageLabel size="small" completedPercentage={percentage} theme={theme}>
131+
{`${percentage}%`}
132+
</PrecentageLabel>
133+
</ProgressWrapper>
134+
)}
135+
<CustomComponentWrapper>{customComponent}</CustomComponentWrapper>
136+
{actionButton && (
137+
<CardActions>
138+
<Button disabled={disabled} variant="contained" href={href} onClick={onClick}>
139+
{btnTitle}
140+
</Button>
141+
</CardActions>
142+
)}
143+
</ContentWrapper>
144+
</CardContent>
145+
</BoxContainer>
146+
);
147+
}
148+
149+
return (
150+
<StyledCard>
151+
<CardContent>
152+
<IconTitleWrapper>
153+
{icon}
154+
<Typography variant="h6" fontWeight="700" component="div" sx={{ mx: 1 }}>
155+
{typeof title === 'string' ? title?.toUpperCase() : title}
156+
</Typography>
157+
</IconTitleWrapper>
158+
<ContentWrapper>
159+
<StandardDescriptionTypography>{description}</StandardDescriptionTypography>
160+
{showProgress && (
161+
<ProgressWrapper>
162+
<SliderDiv
163+
value={percentage}
164+
size="small"
165+
aria-label="Default"
166+
valueLabelDisplay="auto"
167+
/>
168+
<PrecentageLabel size="small" completedPercentage={percentage} theme={theme}>
169+
{`${percentage}%`}
170+
</PrecentageLabel>
171+
</ProgressWrapper>
172+
)}
173+
<CustomComponentWrapper>{customComponent}</CustomComponentWrapper>
174+
{actionButton && (
175+
<CardActions>
176+
<Button disabled={disabled} variant="contained" href={href} onClick={onClick}>
177+
{showProgress ? (percentage === 100 ? 'Revisit' : btnTitle) : btnTitle}
178+
</Button>
179+
</CardActions>
180+
)}
181+
</ContentWrapper>
182+
</CardContent>
183+
</StyledCard>
184+
);
185+
};
186+
187+
export default ActionButtonCard;

0 commit comments

Comments
 (0)